Blogger Siteye Sosyal Medya Paylaşım Butonları Eklemek

« İnstagram’da En Çok Takipçisi Olan 10 Kişi

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;
}

#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>

//<![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>

</a>

</div>

</div>

</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.