26 Mart 2012 Pazartesi

Kenardan Açılan Pencere Şeklinde Facebook Beğen Kutusu Eklemek

       Merhaba arkadaşlar başlık biraz uzun olabilir :)  Fakat bu bilgilendiri makalemi okuduğunuzda gerçekten kolay ve anlaşılır olduğunu göreceksiniz. Öncelikle bir önceki makalemde Facebook Beğen Butonu Eklemek  den bahsetmiştim. Şimdi yine facebook ile alakalı gerçekten görsellik açısından olsun kolaylık açısından olsun facebook sayfa beğenen üyesini kolayca yükseltebileceğiniz bir kod paylaşacağım. Devamını Oku-->
   Evet Kenardan Açılan Pencere Şeklinde Facebook beğen Kutusu Eklemek için ilk önce blogumuzda Tasarım > Html'yi Düzenle  Ardından widget şablonunu genişletin. Ardından ;

1)  Ctrl+f ile </head> kapanış kodunu bulun. Ardından aşağıda vermiş oldugum kodu kopyalayıp hemen üstüne yapıştırın.

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

2) Evet az önceki kodu kopyaladıysak kaydedip yine Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript diyoruz. Ardından yine aşağıda verdiğim kodu bunun içine yapıştırarak, kaydediyoruz..

<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/AVvXsEi1zYFJug2F2mTfqDzhp2tNImBv7yiWkJJSj_61TKToW-dI7CYSjPSV9Z-KGtKgDk3KElwGkyGMj6EmV_zY1VjgDG6bgtz-DDYbYBZk9OJfMA9VGcfLEAYU0sBqIPlI8jvGrNLfCuzByOk/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/CLipWoRLd&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>

NOT : Kod içindeki "http://www.facebook.com/CLipWoRLd " url li facebook sayfasını değiştirebilirsiniz..
Eğer Çalışmazsa ;
    Bazı bloglarda çalışmayabilir bunun nedeni blogun temasından kaynaklanabilir. Lakin bunun bir çözüm yolu var.  1. adımda vermiş olduğumuz kodun yerini değiştireceğiz. Kodu  ></b:skin>  kodundan sonra yapıştırarak bu sorunu halletmiş oluruz....

Hiç yorum yok:

Yorum Gönder