Kayan Facebook Hayran Sayfası Eklentisi

Yabancı blogları gezen bloggerlar dikkat etmiştir kişisel blogların çoğunda normalde sadece etiket olarak görülen fare imleci üzerine geldiğinde açılan Facebook Like Box eklentileri mevcut.

Görsel anlamda oldukça büyük zenginlik katan bu opsiyonun basit uygulanışını vermeye çalışalım.


Öncelikle çalışan DEMO

Şimdi gelelim uygulamaya.

2 basit adım ile uygulayacağız;

1. Adım

Blogger kontrol paneline giriş yapıyoruz. Önce tasarı, sonra HTML'yi düzenle sekmelerinden kod penceresini açıyoruz. Ctrl+F tuşlarını kullanarak açılan pencereye </head> yazarak kodlar içinde </head> kısmını buluyoruz.

Bu kodun tam önüne aşağıdaki kodları yapıştırıyoruz.

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

Sonrasında Şablonu Kaydet yazan butona basıyoruz.

2. Adım


Tasarım –>> Gadget->> Html/java script. sekmelerini sırayla tıklıyoruz. Açılan pencereye aşağıdaki kodu yapıştırıyoruz.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEhY1clHDAHfGsfXVUeGYUzLkdcVonBJEbHYh0dNgz8Y_QnPZ0ZlrQO7xc7MPd48vx49yN9JnHl_R6AASEY-tgWy7dIB1uZEl_85Nwes8cVrI9KCodBdhKGZ92zXUNrT9fPWEATCqD2vr4M_/s1600/facebookbadge.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=http://www.facebook.com/pages/Blogspot-tutorial/220888831260608&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>By <a href="http://24work.blogspot.com/">Blogspot tutorial</a> / <a href="http://24work.blogspot.com/">+Get This!</a></span></div></div> 

</div>

Kırmızı ile vurguladığım kısmı kendi Facebook sayfanızın adresi ile değiştirmeyi unutmayın. Keyifli bloglamalar.

Facebook sayfanızı oluşturmakla ilgili yazımız içinse şuraya bakın.

Blog’unuz için Facebook hayran sayfası oluşturun