Blogunuza floating yani yüzen ( ben sabit diye adlandırıyorum ) bir Facebook beğen kutusu ekleyebileceğiniz güzel bir script buldum ve sizlerle paylaşmak istedim.
Scriptin çalışması şu şekilde: Blogunuzun sağ tarafında bir Facebook yazısı görünüyor.Sayfayı aşağı yukarı kaydırsanız bile o yazının yeri hiçbir zaman değişmiyor.Yazının üzerine geldiğinizde ise Facebook sayfanıza ait beğen kutusu açılıyor.
Eklentinin demosunu aşağıdaki videodan izleyerek nasıl çalıştığını daha iyi anlayabilirsiniz.
Eğer bu eklentiyi beğendiyseniz nasıl kullanacağınızı anlatayım.
1. Blogunuzun şablonundan <head> kodunu bulun ve bunun altına aşağıdaki JQuery kodunu ekleyin.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
2. Sayfa öğelerine giderek HTML/JavaScript gadget’ı olarak aşağıdaki kodları ekleyin.
<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/AVvXsEgMVv9_t_w9gKyWsWKURTM-OWO1gtmqgfrHQVwF4oi-R6RoU46ANYNb0N7wszDu0BuULXlftCN-BP37BDi4iUIxIQgS88PWg75Dyfut-ruuU4YX8AKpt9LnkbFqh4HfgCu3qnowr7MyGl59/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%2Fbloghocam&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
Kırmızı renkle belirttiğim bloghocam yazan yere kendi Facebook sayfanızın ismini yazmayı unutmayın.
Kolay gelsin.
Hiç yorum yok:
Yorum Gönder