Enes İLHAN\ Blogger Highslide Eklentisi {Türkçe}

Blogger İpuçları 18 yorum 10.033 10 Şubat 2011

Evet arkadaşlar yine bir Blogger İpuçları ile karşınızdayım. Bugün kü eklentimiz resimlerin şatafatlı bir biçimde görünmesini sağlayan highslide eklentisi 🙂 Eklenti ingilizceydi türkçeleştirmesini ben yaptım. Bunu javascript dosyasında görebilirsiniz. Peki bu eklenti ne işe yarıyor diye soracak olursanız blogumda da görmüş olduğunuz gibi resmi seri bir şekilde büyültüp küçültüyor. Bu eklenti bazen çok işe yarıyor. Mesela resmi 150×150 pikselde sol alana gömdünüz ve esas görüntünün ise yine görünmesini istiyorsunuz. İşte bu sırada o küçük resme tıklayarak esas resmi de görebilirsiniz. Yani şu durumda bu eklenti blogger için yapılmış olan otomatik olarak küçültme eklentisinin kurulmasını boşa çıkarıyor desek yanlış söylemiş olmayız. Yani şu eklentiyi blogunuza entegre ettikten sonra otomatik olarak resmi küçülten eklentiye gerek yok bana göre. Ben henüz denemedim ama bu eklentinin ana görevi bu dediğim şeyle aynı yola çıkıyor. İsterseniz bu eklentinin Blogger bloglarınıza nasıl kurulacağını anlatayım hemen:

Blogger blogumuza giriş yaptıktan sonra Tasarım > HTML’yi Düzenle kısmına gelip “Widget Şablonlarını Genişlet” tikin aktif hale getiriyoruz. Sonra da CTRL+F kombinasyonuyla </head> kodundan önce şu kodları yapıştırıyoruz:

<link rel="stylesheet" href="http://konfor.enesilhan.net/js/highslide-turkce/highslide.css" type="text/css" />
<script type="text/javascript" src="http://konfor.enesilhan.net/js/highslide-turkce/highslide.js"></script>

<script type="text/javascript">
    hs.graphicsDir = "http://projects.jesseheap.com/wp-content/plugins/highslide/graphics/";
    hs.outlineType = "rounded-white";
    hs.outlineWhileAnimating = true;
    hs.showCredits = false;
</script>

ve şablonumuzu kaydediyoruz. Evet hepsi bu sadece bu kadar. Bir de bu eklentiyi resminizde nasıl kullanacaksınız hemen onu da söyleyeyim. İşte aşağıdaki kodda herhangi bir resim eklemek istediğiniz zaman kullanacağınız kod olacak. (isterseniz bir yere kaydedebilirsiniz):

<a class="highslide-image" href="Buraya kendi resim adresinizi koyacaksınız" onclick="return hs.expand(this);"><img alt="boşda bırakabilirsiniz burayı" class="alignleft size-thumbnail wp-image-4967" height="193 (Burası resmin yüksekliği)" src="Buraya da yine kendi resim adresinizi koyacaksınız" title="Buraya resmin açıklamasını yazabilrisiniz" width="600 (Burası resmin genişliği)" /></a>

Evet yukarıdaki kodunu parantez içerisinde belirttiğim gibi kopyalayın bir metin belgesine ne olur ne olmaz misali 😉 Birde bu eklentinin farkını net olarak görmeniz için bir fotoğraf ekliyorum:

doga

Evet görmüş olduğunuz gibi resmi çok güzel bir biçimde büyültüp küçültmenin yanı sıra sağa ve sola da taşıyabiliyorsunuz. Herhangi bir sorunda yardımcı olmaya çalışırım, hepinize kolay gelsin..

Bu yazıdan önce yazmış olduğum "Bloggerda Cufon Font Kullanımı" başlıklı yazımı da okumanızı tavsiye ederim.

Yorumlar ;

Sınır Tanımayan Psikopat Adam
10 Şubat 2011 - 19:27:40

Teşşekürler arkdaşım güzel bi eklenti 🙂

Mert Pehlivan
10 Şubat 2011 - 20:15:59

Eklenti için teşekkürler, deniyeceğim.

ByCakko
11 Şubat 2011 - 20:51:48

Gayet güzel bir eklenti hocam , teşekkürler 🙂

Enes İLHAN
11 Şubat 2011 - 23:11:24

@ByCakko,
Rica ederim de keşke birde link verseydin.

ByCakko
12 Şubat 2011 - 09:36:41

Kaynak olarak sizi gösterdim fakat link eklemeyi unutmuşum , şimdi hatamı düzelttim.Kusura bakmayın 🙁

Yunus Emre
12 Şubat 2011 - 11:33:32

Gerçekten güzel bir eklenti yapmışsınız:)Sizi tebrik ediyorum..

damla
15 Şubat 2011 - 11:22:15

merhaba, kodu doğru yazdığım halde hiç bir faydası olması resimler üzerinde. başka bir yolu mu var acaba?

Enes İLHAN
15 Şubat 2011 - 12:35:22

@damla,
Yukarıda ilk kodu ekledikten sonra çok önemli olan 2.kod var. O kodu herhangi bir resim eklediğinizde kullanacaksınız. Bu şekilde yaparsanız hiçbir sorun olacağını düşünmüyorum. Tekrar sorun olursa tekrar bildirebilirsiniz, kolay gelsin.

damla
15 Şubat 2011 - 14:18:35

Yani ilk kodu html'ye ikincisi ise her resim de mi yapacağız? Ama bu çok uğraştırıcı olmaz mı 🙂

Enes İLHAN
15 Şubat 2011 - 23:40:41

@damla,
Evet damla aynen öyle. Biraz uğraştırıcı gibi gelse de aslında basit bir olay. Sadece her resim eklediğinizde koddaki açıklamayı ve resim adresini değiştireceksiniz hepsi bu kadar 🙂

Havlayan Kirpi
17 Şubat 2011 - 06:06:48

Eline sağlık Enes, yine güzel bir eklenti bulmuşsun :).. Değişik projelerde kullanabileceğim birşey olmuş. Havlayan Kirpi'nin tasarımını değiştirdim bi girip düşünceni belirtirsen sevirim. 🙂

Anonymous
20 Şubat 2011 - 10:22:12

Hello everyone

First of all sorry that I write in this topic but I have some technical problem with the use of this forum. When I'm trying to enter in the appropriate topic, I received a 404 error It's about the only topic in which I was able to enter. Do you have the same problems? What's going on?

Faruk
26 Şubat 2011 - 20:18:39

İşimize çok yarayacak. Teşekkürler…

Anonymous
4 Mart 2011 - 07:51:17

man that was a good one..really

Anonymous
19 Mart 2011 - 15:02:47

çok güzel bir uygulama teşekürler. Bu arada bişey merak ettiğim bişey sorucam. Ben bloggerda yeniyim. Bildiğim kadarıyla bloggerda dosya depolama yok. Siz bir subdomain açıp dosyaları depolamışsınız. Nasıl yaptınız?

!ツ-ㄨ™Nette-Bilgi™ ㄨ-ツ!
10 Nisan 2011 - 14:46:18

çok teşekkür ederim ama benim merak ettiğim eklenti acaba konu başlığının üstündeki googlede ara eklentisi var ya onu nasıl yapabiliyoruz bir anlatırsan çok iyi olur kardeş

kralizasyon
6 Ağustos 2011 - 19:00:59

biraz zahmetli ama güzel bir eklenti. ekliyorum…

invest liberty reserve
19 Ağustos 2011 - 17:28:17

I agree with your Blogger Highslide Eklentisi {Türkçe} | Enes ve Blog’u, great post.