Blogger İçin Siren Gibi Yanıp Sönen Linkler

Blogger bloglarımızda bulunan bağlantıları (Linkler) özelleştirmeye ne dersiniz?

Blog içerisinde bulunan bağlantı linklerinin üzerine mouse ile gelindiğinde sarı/mavi/yeşil/mor ve daha pek çok renk tonunda tıpkı bir siren gibi renk değiştiren linkleriniz olsun istemez misiniz?

Cevap "evet" ise yapmamız gereken sadece bir JavaScript kodunu HTML'mize eklemek olacak.

Öncelikle CTRL + F kombinasyonu ile </head> etiketini aratıyoruz. Ardından bu etiketten önce aşağıdaki JS kodlarını kopyalayıp yapıştırıyoruz.

Sonrasında şablonu kayıt ediyoruz. İşte hepsi bu kadar.

lightbox js v2 04 blogger entegrasyonu

Blogger için LightBox kurulumunu sizler için çok kolay hale getirdim diyebilirim. Javascript dosyaları ile herhangi bir düzenleme yapmanıza gerek kalmadan LightBox'u blogunuzda kullanabileceksiniz. Daha önce bazı arkadaşlar bloglarında anlatmışlardı. Fakat bu anlatımda LightBox'un en yeni versiyonu kullanıldı. Ayrıca Prototype.js dosyasının içindeki gereksiz yerler çıkartılarak boyutu biraz daha düşürüldü.

LightBox için gerekli olan düzenlemeleri ve js dosyalarını sizler için yükledim. Öncelikle LightBox uygulamasının ne olduğunu bilmeyenler Buradaki sayfa tamamen yüklendikten sonra yazı içindeki resimlere tıklayabilir ve LightBox'un ne işe yaradığını görebilirler.

Şimdi gelelim LightBox'u blogumuza nasıl entegre edeceğimize...

• Öncelikle temamızda Yerleşim > HTML Düzenle > Widgetları Genişlet diyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz.
  
• Ardından Ctrl+F yaparak </Head> kodunu aratıyoruz. Bu kodun hemen üstüne aşağıdaki kodları yapıştırıyoruz.

<link rel="stylesheet" href="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/lightbox.css" type="text/css" media="screen"/>

<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/prototype.js" type="text/javascript"></script>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/lightbox.js" type="text/javascript"></script>

• Şablonu kaydet diyoruz. Artık LightBox'u blogumuza entegre ettik. Bu aşamadan sonra yapacaklarımız blogumuza gönderdiğimiz yazılar üzerinde gerçekleşecek.

Blogumuza LightBox'u entegre ettik. Yazılarımızı yayınlarken yüklediğimiz resimlerin üzerine ufak bir kod eklememiz gerekiyor.

• Eğer bir tane resim eklediysek yazımızı yayınlamadan önce Yazının HTML'yi Düzenle sekmesine tıklıyoruz (Oluşturun Yanındaki). Resim kodumuzun içindeki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox" yazıyoruz. (Örnek sayfadaki ilk resim)
  
• Eğer bir tane değilde daha fazla resim göstereceksek yine üstteki gibi resim kodlarının içlerinde ki  imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox[TeknoMobi]" vb. gibi yazıyoruz. burada yazdığım TeknoMobi Aynı pencerede peşpeşe görünecek resimlerimizi belirliyor.(Örnek sayfadaki 2,3,4 üncü resimler)
• Resiminizin altında açıklayıcı bilgi vermek isterseniz yukarıda verdiğim rel= kodlarından sonra title='Açıklama' şeklinde yazabilirsiniz.

En kısa zamanda blogunuza eklemenizde kolaylık sağlayacak videolu anlatımıda vermeye çalışacağım.

Blogger Arama Motoru Optimizasyonu

Blog yazarlarının en büyük derdi. Bir an önce arama motorları tarafından tanımlanmak ve ziyaretçi çekmektir. Blogger kullanıcılarınında bloglarına ziayretçilerin gelmesini biraz daha kolaylaştırmak için tema üzerinde ufak oynama yapmaları gerekebiliyor.

Düzenlenmemiş bir blogger temasında herhangi bir yazı yayınladığınızda arama motoru yazınızı Blog Adınız: Blogda Yayınladığınız Yazı şeklinde tanımlamaktadır. Buda yazılarınızın arama motorlarında tam olarak tercih edilememesine veya sıralamada gerilere gitmesine neden olur.

Bunu düzeltmek ve arama motorlarının sitenizi tararken sadece yazınızı tanımlamasını sağlamak için yani Blogda Yayınladığınız Yazı şeklinde tanımlaması için aşağıda vereceğim kod değişikliğini yapmanız gerekiyor.

Öncelikle Yerleşim > HTML Düzenle Widgetları genişlet diyoruz ve Şablonumuzun bir yedeğini alıyoruz. Temamızda aşağıdaki kodu aratıyoruz.Temamızın en üstünde bulunuyor. Head kodunun hemen altında...

<title><data:blog.pageTitle/></title>

Bu kodu bulduktan sonra yerine aşağıdaki kodu yapıştırıyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Temamızda önizleme yapıyoruz. Herhangi bir hata vermeden blogunuzun önizlemesini yaptıysanız şablonu kaydet diyebilirsiniz.

Bu yöntem daha önce bazı bloglarda verilmişti ama biz yeniden hatırlatalım dedik. Ne de olsa Blogger'e yeni adım atanlar var...