8 Aralık 2016 Perşembe

Blogger Sosyal Takip Eklentisi

Gerek Blogger gerek Wordpress bloglarda en çok kullanılan eklentilerden biri sosyal takip ekletileri. Wordpress’de hazır pluginler ile pek çok seçenek mevcut fakat Blogger için aynı durum söz konusu değil ne yazık ki. Bunun için ya Blog Hocam gibi sitelerde paylaşılan eklentilerden faydalanacaksınız ya da kod bilginizi kullanarak kendiniz bir eklenti oluşturacaksınız.

Geçmişte çok sayıda sosyal takip eklentisi paylaşmama rağmen zaman geçtikçe değişen trendler ve web teknolojileri insanları daha modern eklenti arayışına itiyor haklı olarak.

Bu yazıda Blogger kullanıcıları için fontface teknolojisi kullanılarak oluşturulmuş modern ve hızlı bir sosyal takip eklentisi paylaşacağım. Bu eklentide insanların blogunuzu Facebook, Twitter, Instagram, Google+ ve Blogger panelinden takip etmeleri için gerekli linkler, platformlara ait renkler ve ikonlar yer almakta.



Sonuç gördüğünüz görseldeki gibi olacaktır. Bu eklentiyi blogunuza eklemek için aşağıdaki işlemleri yapmanız yeterlidir.

1. Öncelikle şablona fontface kodunu eklemeniz gerekiyor. Bunun için şablonda </head> kodunu bulup üzerine şu kodu ekleyin:

<script src="https://use.fontawesome.com/0b1db492d2.js"></script>

2. Ardından yerleşimden HTML/JavaScript gadget olarak aşağıdaki kodları ekleyin:

<div style="background:#3B5998;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
<a href="
http://www.facebook.com/bloghocam" target="_blank" title="Blog Hocam'ı Facebook'ta Beğen"><span style="color:#fff"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook'ta Beğen</span></a></div>
<div style="background:#1da1f2;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
<a href="
http://www.twitter.com/bloghocam" target="_blank" title="Blog Hocam'ı Twitter'da Takip Et"><span style="color:#fff"><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter'da Takip Et</span></a></div>
<div style="background:#895a4d;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
<a href="
http://www.instagram.com/username" target="_blank" title="Blog Hocam'ı Instagram'da Takip Et"><span style="color:#fff"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram'da Takip Et</span></a></div>
<div style="background:#dd4b39;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
<a href="
https://www.google.com/+BloghocamBlogspot" target="_blank" title="Blog Hocam'ı Google+'da Takip Et"><span style="color:#fff"><i class="fa fa-google-plus" aria-hidden="true"></i> Google +'da Takip Et</span></a></div>
<div style="background:#f3ac13;color:#fff;font-weight:bold;font-size:100%;text-align:center;padding:10px 0;">
<a href="
http://www.blogger.com/follow-blog.g?blogID=4490267687722891359" target="_blank" title="Blog Hocam'ı Blogger'da Takip Et"><span style="color:#fff"><i class="fa fa-user-plus" aria-hidden="true"></i> Blogger'da Takip Et</span></a></div>

Kodlarda düzenlemeniz gereken yerler var.
  • Kırmızı ile gösterdiğim titleları kendi blogunuzun adını yazarak düzenleyin.
  • Mavi ile gösterdiğim urlleri kendi sosyal hesaplarınızın urlleri ile değiştirin.
  • Yeşil ile gösterdiğim yere blogunuzun Blogger ID’si gelecek. Bu ID numarasını bulmak için Blogger kumanda panelinden blogunuzu seçtikten sonra tarayıcının adres satırına bakın.

    blogger blog id numarası
Bu değişikliklerden sonra eklenti kullanıma hazır olacaktır. Takıldığınız yerleri, konu ile ilgili soru ve görüşlerini yorum bölümünden iletebilirsiniz.

İyi bloglar!!!

Hiç yorum yok:

Yorum Gönder