Sağdan Açılır Pencere Facebook Beğen Kutusu Ekleme

Merhabalar arkadaşlar. Bu yazımda sizlere sitenize nasıl facebook sağdan açılır pencere ekliyeceğinizi göstermek istiyorum. Öncelikle eklenti hakkında biraz konuşalım. Bu eklenti facebook sayfanızın blogunuzda fazla yer kaplamadan sağ tarafta durarak ve sadece mause(fare) ile "Facebook" yazısının üstüne gelerek açılan bir eklentidir.

 Eklentinin demosuna buradan bakabilirsiniz = Demo için Tıkla!

1. Adım: İlk olarak blogger hesabınızda oturum açın. Kontrol Paneli'ne girdikten sonra Şablon>Html'yi düzenle yolunu izleyin. Aşağıdaki kodların üzerine tıklayarak Ctrl+f yardımı ile </head> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

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

2. Adım: Tekrardan kontorl paneli'ne dönün ve "Yerleşim" kısmına gelin. Buradan herhangi bir yere "Gadget Ekle" yazısına tıklayarak Html/Javascript gadgetinin içerisine aşağıdaki kodları ekleyiniz:

<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://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") 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=www.facebook.com/blogkuzusu&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="
http://blogkuzusu.blogspot.com/2015/02/sitene-facebook-begen-kutusu-ekle.html
">++Sitene Ekle</a></span></div></div>

Not:

Kod içerisinde "www.facebook.com/blogkuzusu" olarak verilen yere kendi facebook url adresinizi ekleyiniz.