Click Box Eklentimi Paylaşıyorum

Blogumun sidebarında en üstte gördüğünüz Facebbok beğen, Twitter takip et ve Google +1 butonlarından oluşan bçölüme Click Box adını vermiştim.Bu bölbutonları ilk eklediğimde sizden güzel tepkiler almıştım.O günden beri yorumlarda ve mesajlarda bu Click Box’ın nasıl yapıldığını soran çok kişi oldu.Sanırım artık paylaşma zamanı geldi.

 

Kodların gadget olarak kolayca eleyebilmeniz olabildiğince sadeleştirdim.Bazı okuyucular butonlardan sadece 1 veya 2 tanesini kullanmak istediği için kodları ayrı ayrı paylaşıyorum.Yapmanız gereken sayfa adreslerini kendi adreslerinizle değiştirmek ve kodları HTML/JavaScript olarak kenar çubuğunuza eklemek.

 

Facebook Beğen Butonu

 

 

İlk olarak Facebook beğen butonu ile başlayalım.Burada değiştrmeniz gereken tek yer http://bloghocam.blogspot.com/ yazan yer.Buraya beğen butonua basıldığında hangi sayfanın beğenilmesini istiyorsanız onun adresini yazın.Blogunuz veya Facebook sayfanız olabilir.

 

<style>
#clickface {width:256px; height:23px; margin-top:5px; padding-top:11px; padding-bottom:10px; border:1px solid #d8d7d7;  padding-left:10px; margin-bottom:10px;margin-left:5px; background:url(https://lh3.googleusercontent.com/-EczW7--mfZ8/T36voZW3WtI/AAAAAAAACqQ/WxWacmyqs1U/s265/face.jpg);
-webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px}
</style>
<div id="clickface">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://bloghocam.blogspot.com/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></div>

 

Twitter Takip Et Butonu

 

 

İkinci  paylaşacaım kodlar click box’ın Twitter takip et butonuna ait kodlar.Burada da değiştirmeniz gereken tek yer var. http://twitter.com/bloghocam yerine kendi Twitter adresinizi yazın.

 

<style>
#clickfollow {width:256px; height:23px; margin-top:5px; padding-top:11px; padding-bottom:10px; border:1px solid #d8d7d7;  padding-left:10px; margin-bottom:10px;margin-left:5px; background:url(https://lh4.googleusercontent.com/-ImtSc988lkM/T4ayCH9xRqI/AAAAAAAACtI/DlNwLdckthE/s280/twitter.gif);
-webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px}
</style>
<div id="clickfollow">
<a href="http://twitter.com/bloghocam" class="twitter-follow-button" data-lang="tr">Follow @bloghocam</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

 

Google +1 Butonu

 

 

Son olarak Google +1 butonun kodlarını paylaşacağım.Burada da değiştirmeniz gereken sadece bir yer var. http://bloghocam.blogspot.com yerine kendi blogunuzun adresini yazın.

 

<style>
#clickplus {width:256px; height:23px; margin-top:5px; padding-top:11px; padding-bottom:10px; border:1px solid #d8d7d7;  padding-left:10px; margin-bottom:10px;margin-left:5px; background:url(https://lh4.googleusercontent.com/-YtCRluKZit4/T36voX1YBgI/AAAAAAAACqI/jLBA0f4NKBw/s265/plus.jpg);
-webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px}
</style>
<div id="clickplus">
    <g:plusone size="medium" href="http://bloghocam.blogspot.com"></g:plusone>

<script type="text/javascript">
  window.___gcfg = {lang: 'tr'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></div>

 

Eğer bu eklentiyi beğendiyseniz aşağıdaki paylaşım butonlrını kullanarak yazıyı arkadaşlarınızla paylaşın.Ayrıca Click Box’taki beğen, takip et ve +1 butonlarna henüz tıklamadıysanız hemen şimdi tıklayabilirsiniz.