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!!!

21 yorum:

  1. Paylaşım için teşekkür ederim.Elinize sağlık.

    YanıtlaSil
  2. Hocam ne zamandır sizi takip ediyorum.sizin gi i birinden fikir almak beni onurlandırır.blogum hakkında eleştiri yaparsaniz çok mutlu olurum

    YanıtlaSil
  3. süper anlatım tüm bloglar içib grekli

    YanıtlaSil
  4. Çok beğendim. Emeğinize sağlık hocam

    YanıtlaSil
  5. Hocam anlayışla karşılayacağını düşünüyorum. Herkesin şapkasını önüne alıp düşünmesi için yazımı burada paylaşıyorum. Şimdiden teşekkür ederim anlayışın için. https://ugurunhazinesi.blogspot.com.tr/2016/12/yeni-yeniden-teror-saldirisi.html

    YanıtlaSil
  6. Çok güzel bilgi vermişsiniz hocam elinize sağlık.

    YanıtlaSil
  7. hocam size 2 defa mail attım sorum vardı size yardım eder misin . https://istanitim.blogspot.com.tr/

    YanıtlaSil
  8. Merhaba bolg hocam
    Ben senin yazılarını çok beğeniyorum kendim de uğraşıyorum
    https://yeniblogrehberim.blogspot.com.tr/ sitem benim bi analiz yapar mısın rica etsem çok ihtiyacım var

    YanıtlaSil
  9. Selamın aleyküm hocam ben devamını Oku eklentisi yapmak istiyorum yardımcı olursanız sevinirim
    aksaraynerede.blogspot.com

    YanıtlaSil
  10. hocam yine güzel bir paylaşımda bulunmuşsunuz elinize sağlık

    YanıtlaSil
  11. Çok güzel bir paylaşım yapmışınız yine Serdar bey. Ayrıca uzun bir süredir Sementit
    tasarımınızıda blogumda kullanıyorum. Katkılarınız için çok teşekkür ederim.

    YanıtlaSil
  12. Hocam daha sade bişeyler istiyorum ya. Acaba yakında görebilir miyim.

    YanıtlaSil
  13. bloguma uyguladım güzel oldu teşekkürler
    okurizlergezer.blogspot.com beklerim

    YanıtlaSil
  14. siteyi cok guzel gosteriyor sagolun hocam www.guncelkpssnotlari.blogspot.com

    YanıtlaSil
  15. Olmuyor çok uğraştım ama olmadı.Şablon biçimlenmiyor. 1888. Satır sütun 14 te sürekli hata veriyor. Ne kadar uğrastıysam da sorunun kaynağını bir türlü bulamadım.

    YanıtlaSil
  16. Teşekkür ederim, çok işimize yaradı :)

    YanıtlaSil
  17. Çok işime yaradı, teşekkürler :)

    YanıtlaSil
  18. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  19. Blogunuzu ilgiyle takip ediyorum ve çok şey öğreniyorum hocam, elinize sağlık yine güzel bir yazı olmuş. Benim sorum; kodu head'in üzerine ekleyin derken nasıl yapmam gerekiyor acaba yardımcı olabilecek olan var mı? kod bilgim sıfır :(

    YanıtlaSil

Blogger tarafından desteklenmektedir.