Blogunuza Kayan Facebook Beğen Kutusu Ekleyin

Bu yazımızda çoğu wordpress blogunda alışkın olduğunuz  sağ taraftan içeri doğru kayan çok şık facebook beğen kutusu ekleyeceğiz.Öncelikle blogger hesabınıza giriş yapın ve Tasarım>Yerleşim yolunu izleyerek Gadget Ekle ye tıklayın.Çıkan pencerede Html/JavaScript i seçin.

Aşağıdaki kodu kopyalayın ve çıkan Html ekranına yapıştırın:

<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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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%2Fehliblog&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><span>Widget by:<a href="http://www.ehliblog.com">Ehl-i Blog</a></span></div></div>

Renkli olarak belirttiğim yere kendi kullanıcı adınızı ekleyin.Eğer henüz bir kullanıcı adı oluşturmadıysanız buraya tıklayarak kullanıcı adı oluşturun.

Şimdi sıra blogumuza javascript kodunu eklemeye geldi.Bunun için aşağıdaki kodu <head> kodunun hemen altına yapıştırın:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Şablonu kaydedip çıkın.Blogunuzu görüntülediğinizde aşağıdaki resimdeki gibi çok şık içeriye doğru açılan facebook beğen kutunuz olacak.

 Demo 

image

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

5 yorum:

  1. Çok faydalı bir yazı olmuş (: Tebrik ediyorum . İyi bloglamalar (:

    YanıtlaSil
    Yanıtlar
    1. teşekkür ediyorum.Beğendiğinize sevindim

      Sil
  2. güzel paylaşım


    www.yuklex.blogspot.com

    YanıtlaSil
  3. iyi guzelde bu islemin ikinci kismi olan "head" kodunu bulamadim ki ben. islemin 2. kisminin nasil yapilacagini biraz daha aciklayabilirmisiniz ? "head" kodu nerede bulunur acep ?

    YanıtlaSil
    Yanıtlar
    1. Blogger hesabınıza giriş yaparak Edit HTML kısmına gelin ve Ctrl F
      tuşları yardımıyla "head" kodunu arayın

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.