Facebook Begen Kutusu Ekle -Sagdan Acilan Pencere Seklinde

Daha önce blogğunuza facebook beğen kutusunu nasıl ekleyebileceğinizi anlatmıştık.Şimdi ise blogunuzda hem fazla yer kaplamaması için hemde tasarım açısından görsel güzellik kazandırması açısından, blogunuza eklediğiniz facebook beğen kutusunu, sağdan açılan pencere şeklinde, blogunuza nasıl ekleyebileceğinizi anlatacağız.İsterseniz açılır pencere şeklinde yerleştirdiğimiz facebook beğen kutusunun, nasıl göründüğünü görmek için tıklayınız.

1.Adım:Bloggerde oturumunuzu açın.Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin.Kodlar içerisinde  Ctrl+F yardımıyla aratıp </head> kodunu bulun.Aşşağıdaki kodu bulduğunuz </head> kodundan hemen önceki kısma yapıştırın.

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

2.Adım Widget Ekleme: Tasarım>Gadget Ekle>Html/Javascript yolunu izliyoruz.Html/Javascript gadgetinin içine aşşağıdaki kodu ekliyoruz.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiVmxwHQ2tVnfTHutUSkzxAcCpNzwDC_yMd1uNnimw2IQGGxl8Oc900-NuegU0JRzaFC0I4NlC6Mv_Ps4JCuG7lh4eC9F9Bc6rwI2gPdu_ep7W9sau2QNivvOFItA3FBcJtODglUxpyfs/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Blog-Okulu/270630239670726&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://blogokulu.blogspot.com/2012/02/facebook-begen-kutusu-ekle-sagdan.html" target="_blank"><b>++Sitene Ekle</b></a></span></div></div>

Kod içerisinde;

http://www.facebook.com/pages/Blog-Okulu/270630239670726

yeri kendi Facebook URL adresiniz ile değiştirin ve kaydedin.
ÖNEMLİ NOT:Bazı bloglarda temalardan kaynaklanan sebeplerden dolayı eklentinin göründüğü fakat açılmadığı tespit edilmiştir.Eğer sizde böyle bir sorunla karşılaşırsanız.
Buna çözüm olarak;1.Adımda yazdığımız script kodunun şablon içerisindeki yerini değiştiriniz.
kodlar içerisinde ></b:skin> kodunu bulun ve 1.adımda verdiğimiz aşşağıdaki kodu

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

bulduğumuz ></b:skin> kodunun hemen altına yapıştırıp

acilir menu seklinde facebook begen kutusu , Blogger , bloggerde sosyal medya , bloguna begen kutusu , facebook begen kutusu ekle , facebook begen kutusu kodu , kayan pencereli begen kutusu

PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

• 
• 
• 
• 
•