Blogger İzleyiciler Gadget Nasıl Özelleştirilir ?

Sosyal medya üzerinden bir bloğu takip etmenin birden fazla yöntemi olsa da blogger ın sahip olduğu izleyiciler eklentisi ile takibin yeri bir başka!

Twitter ya da facebook üzerinden bir bloğu takip ettiğinizde arkadaşlarınızın farklı paylaşımlarına bakarken çoğu kez blog yazılarını atlarız. Fakat izleyiciler eklentisini kullandığımızda durum biraz daha farklıdır. %90 bilgisayar kullanarak blogger yönetici paneline ulaşmışızdır ve takibimizdeki blogların paylaşımlarına tıklama ihtimalimiz de yüksektir.

Bu da izleyiciler eklentisinin aslında blogger kullanıcıları için ne kadar önemli olduğunu gösteriyor.

Bu gadget ı ekleme konusunda hem fikirsek gelin biraz standart uygulama ve görünümün dışına çıkarak nasıl bu öğeyi özelleştirebiliriz ona bakalım :

Belki klasik olarak şimdiye kadar blogger panelinizde yerleşim kısmın gelerek Html Gadget ekle kısmından bu eklentiyi bloğunuza yerleştirdiniz. Fakat tek yöntem sadece bu değil !

• Eğer bu eklentinin sitenizin yüklenme zamanını artırdığını
• Sidebar alanında yer işgal ettiğini

Düşünüyorsanız link olarak ya da banner olarak da ekleme yapmanız mümkün. Önemli olan sadece blog Id nizi bularak aşağıda sizlerle paylaştığım kodu bloğunuza eklemek.

Bu en çok size diğer sosyal medya takip butonları kısmını gösterdiğiniz yer de izleyiciler i eklemenizi sağlama konusunda yardımcı olacak.

Blog ID nasıl öğrenilir ?

Bu id her bloga ait özel numaradır. Bunu öğrenmek de oldukça basittir :

Blogger yönetici panelinize girdiğinizde adres satırına bakarsanız bu numarayı görebilirsiniz :

1 – Sadece link olarak ekleme

Bunun için aşağıdaki kodu göstermek istediğiniz yere yapıştırabilirsiniz:

<a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx' target='_blank' title="Takip Et">Takip Et</a>

Yukarıda xxx yazan kısma blog Id nizi girmeniz gerekmektedir

2 – Banner olarak ekleme

Kodu biraz düzenleyerek aşağıdaki şekilde yapmanız gerekmektedir:

<a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx' target='_blank' title="Takip etmek için tıklayın">
<img alt='Folower Button' src='http://resim adresi' title="Takip için tıklayın"/></a>

Örnek

Teknojest sitemde beni izleyiciler eklentisi ile takip etmek isteyenler aşağıdaki resme tıklayabilir:

Evet, bu yazıyı hazırlamamdaki ilk amaç yukarıdaki durumlar içindi. Eğer siz “yok ben bu eklentiyi sidebar da göstermek istiyorum” diyorsanız blogunuza göre renk uyumunu nasıl sağlayabilirsiniz ondan bahsedelim:

Eğer klasik bir şekilde gadget i blogunuza eklediyseniz şimdi gelin birlikte arka plan, kenarlık rengini değiştirerek farklı bir görünüm kazandıralım.

Blogunuzu tarayıcıda açtıktan sonra Ctrl + U kısayoluyla birlikte sayfanızın kodlarını görüntüleyin.

Ctrl + F ile followers şeklinde sayfada arama yapın. Aşağıdaki kodları bulacaksınız :

<div id="div-1w8ox432bgme4" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-1w8ox432bgme4",
     height: 260,
     
     
     
     site: "11627246095246557409",
     locale: 'tr' },
     skin);
  </script>
</div>

Şimdi bu kodları aşağıdaki gibi düzenleyelim : Kodların son hali aşağıdaki gibi olacaktır.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-1w8ox432bgme4" style="width: 100%;border:1px solid #fff;background:#fff; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['BORDER_COLOR'] = "fff";
    skin['ENDCAP_BG_COLOR'] = "fff";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-1w8ox432bgme4",
     height: 260,
     
     
     
     site: "11627246095246557409",
     locale: 'tr' },
     skin);
  </script>

Burada yer alan div-1w8ox432bgme4 ve 11627246095246557409 kodları benim bloguma ait kodlar. Sizin ki farklı olacaktır. Değiştirmeyi unutmayın.

border:1px solid #fff;background:#fff; kısmındaki #fff renk kodlarını değiştirerek border ve arka plan rengini isteğinize göre düzenleyebilirsiniz.

Olabildiğince basit bir şekilde anlatmaya çalıştım. Sizler de küçük bir html bilgisi ile izleyiciler gadget düzenleme işlemini yapabilirsiniz.