Blogger Highslide Eklentisi {Türkçe}

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.

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

18 yorum

  1. Sınır Tanımayan Psikopat Adam   •  

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

  2. Mert Pehlivan   •  

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

  3. ByCakko   •  

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

  4. Enes İLHAN   •  

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

  5. ByCakko   •  

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

  6. Yunus Emre   •  

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

  7. damla   •  

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

  8. Enes İLHAN   •  

    @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.

  9. damla   •  

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

  10. Enes İLHAN   •  

    @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 🙂

  11. Havlayan Kirpi   •  

    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. 🙂

  12. Anonymous   •  

    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?

  13. Faruk   •  

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

  14. Anonymous   •  

    man that was a good one..really

  15. Anonymous   •  

    ç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?

  16. !ツ-ㄨ™Nette-Bilgi™ ㄨ-ツ!   •  

    ç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ş

  17. kralizasyon   •  

    biraz zahmetli ama güzel bir eklenti. ekliyorum…

  18. invest liberty reserve   •  

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

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Güvenlik Sorusu ? * Time limit is exhausted. Please reload the CAPTCHA.