Blogger Siteye Sosyal Medya Paylaşım Butonları Eklemek

Blogger Siteye Sosyal Medya Paylaşım Butonları Eklemek

Herkese merhabalar arkadaşlar bugün sizlere blogger sitelerine ekleyeceğiz sosyal medya paylaşım butonları kodlarını paylaşacağız.

Aslında sadece blogger sitelere eklenmiyor bu kodlar.Her türlü siteye ekleyebilirsiniz.Çünkü css,javascript ve html kodları mevcut.Bu sosyal paylaşım butonunun wordpress’de illaki eklentisi vardır lakin ismini tam hatırlamıyorum.Siz eklentinin adını bulursanız yorum kısmından bizlerle paylaşabilirsiniz.

Şimdi gelelim kodları paylaşmaya.Öncelikle css kodlarını paylaşalım.

Css Kodları:

#postsocial {
border:1px solid #ddd;
min-width:55px;
width:auto;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
-webkit-box-shadow:1px 0 5px rgba(0,0,0,.1);
-moz-box-shadow:1px 0 5px rgba(0,0,0,.1);
box-shadow:1px 0 5px rgba(0,0,0,.1);
padding:5px;
font:10px/16px Arial;
background:padding-box #fff;
position:absolute;
margin-left:-84px;
top:150px;
}
#postsocial.fixed {
position:fixed;
top:150px;
}
.postsocialbtn {
width:auto;
height:auto;
line-height:0;
padding:4px 1px;
text-align:center;
}

Şimdi javascript kodlarını paylaşalım.

Javascript Kodlar:

<script>
//<![CDATA[
$(document).ready(function () {
var top = $('#postsocial').offset().top - parseFloat($('#postsocial').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#postsocial').addClass('fixed');
} else {
$('#postsocial').removeClass('fixed');
}
});
});
//]]>
</script>

Şimdi de html kodlarını paylaşalım.

Html Kodları:

<div id='postsocial'>
<div class='postsocialbtn'>
<a class='twitter-share-button' data-count='vertical' data-related='weblogtemplates' data-via='weblogtemplates' href='https://twitter.com/share'>
Tweet
</a>
</div>
<div class='clear'/>
<div class='postsocialbtn'>
<div class='g-plusone' data-size='tall'/>
</div>
<div class='clear'/>
<div class='postsocialbtn'>
<div class='fb-like' data-font='lucida grande' data-layout='box_count' data-send='false' data-show-faces='false' data-width='55' expr:data-href='data:post.url'/>
</div></div>

Evet arkadaşlar kodlar bu şekildedir.Peki bu kodları nereye eklememiz gerekiyor onu anlatalım hemen.

Öncelikle css kodlarını blogger panelinize girdikten sonra sol kısımdan “Tema>HTML’yi Düzenle” kısmına giriyorsunuz.Ardından burada aşağıdaki resimde gördüğünüz gibi mavi renkli kodlar var onların arasına bir yere yapıştırıyoruz.

Sonrasında ise <body> kodlarının içerisinde herhangi bir yere javascript kodlarını ekliyoruz.Ardından html kodlarını da butonun nerede görünmesini istiyorsak oraya eklememiz gerekiyor.Yani konu içine eklememiz gerekmektedir.

Bunun için ise yine Html’yi düzenle kısmından ctrl+f yaparak “<data:post.body/>” bu kodu aratın ve altına html kodlarını yapıştırın.

İşte bu kadardır arkadaşlar ardından aşağıda gördüğünüz gibi konu içerisinde sosyal medya butonlarımız eklenmiş oldu.

Herkese iyi çalışmalar dilerim.Kolay gelsin…

---Bizlere Destek Olmak İçin Aşağıdan Yorum Yazmayı ve Yazılarımızı Sosyal Medyada Paylaşmayı Unutmayınız---
admin

Merhabalar sitemizde sizler için birbirinden kaliteli paylaşımlar yapmaktayız.Her konuda bilgili editör arkadaşlarımızla sizlere faydalı ve eğitici makaleler paylaşmaktayız.Ders notları,seo,oyun,dini bilgiler vb. tüm alanda sizler için en iyi içerikleri üretmekteyiz.Bizleri takip ettiğiniz için teşekkür ederiz...

Benzer Yazılar

Yapına Yorumlar (2)

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*
*

Time limit is exhausted. Please reload CAPTCHA.