Blogger'da Açılır Facebook Beğen Kutusu Yapımı

How To Add Sliding Floating Facebook Like Box In Blogger
Bir çok blogger ve web site yazarı, blog trafiğini artırmak için facebook hayran sayfasını kullanıyor. Okuyucu olarak pek çoğumuz web sitelerini facebook gibi sosyal medya uygulamalarından takip ediyoruz. Tabi hayranların facebook sayfanızı öğrenmesi için bloğunuzda facebook sayfanızın linki ya da beğen kutusu olması şart.

Bu yazımızda "Blogger'da açılır facebook beğen kutusu yapımı'nı" anlatıyoruz.

  • Blogger kumanda panelinden "Yerleşim" sekmesine geliyoruz. 
  • Her sayfada gözüken bir gatget alanına "Gatget ekle" diyoruz.
  • HTML / JavaScript seçeneğini seçiyoruz.
  • Aşağıdaki 2 kodu birleştirip kendimize göre düzenleyip buraya yapıştırıyoruz.
<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmhey7rr2v0i4nPPTRJpNK6ASWk4XSNeUrgTSpRv72K3GTlI92V_1ybAf6HFhCi7E5Wo8Bs0yuKlMEbaJe6zgns1QuIvXUqE987qrn2fvQ9oqQcX_sufooAkjWqmx3Wy02WPF1v9LDkwG/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FKod-Sarayı-268685043555306&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
Şimdi Yukarıdaki kodun çalışması için kütüphaneyi temaya tanıtmamız gerekiyor. Bunun için;

  • Blogger kontrol panelinde "Tema" bölümündeki "HTML'yi düzenle" butonuna basıyoruz.
  • <head/> etiketini buluyoruz ve üstüne aşağıdaki kodu ekliyoruz.
<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type = 'text / javascript' />

Tema'yı kaydettiğinizde bloğunuzun sağ tarafında facebook beğen kutusu gelecektir.

Facebook Beğen Kutusunu Özelleştirme


Bu eklentide isteğe bağlı iki şeyi değiştirmemiz gerekiyor.

  • float: right olan kısmı float: left olarak değiştirip beğen kutusunu sol tarafa alabilirsiniz.
  • Kod-Sarayı-268685043555306 olan kısmı kendi facebook hayran sayfanızın linkteki adıyla değiştirmelisiniz.

Yorum Gönder

0 Yorumlar