
Şimdi blogunuzda sosyal paylaşım butonlarını daha ilgi çekici hale getirelim. Eklediğiniz bir çok butonlar sitenizde tamda istediğiniz gibi durmuyor. Şimdi sizlerle paylaşacağım eklenti hem blogunuzun görünümünü değiştirecek hem de yayınlarınızı paylaşım oranını biraz daha artıracak. Butonların nasıl durduğu yazımızın hemen altında sayfamızda uygulanmaktadır.
Blogger Blogspot Sosyal Paylaşım Butonları
1- Blogger kumanda panelinden Şablon-HTML'yi Düzenle ve CTRL+F Tuşları yardımıyla
<b:if cond='data:blog.pageType == "item"'>
<div class='tombol-berbagi-btn'>
<div class='tombol-berbagi-btn-fb'>
<a class='tombol-berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Paylaş Facebook</a>
</div>
<div class='tombol-berbagi-btn-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Paylaş Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Paylaş Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Paylaş LinkedIn</a>
</div>
</div>
</b:if>
2- Yine CTRL+F tuşları yardımı ile ]]></b:skin> yada </style> kodunu aratın ve bu kodun hemen üst satırına aşağıdaki CSS kodlarını yapıştırın.
.tombol-berbagi-btn{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-btn-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-btn-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-btn a{color:#999;transition:all .3s;}
.tombol-berbagi-btn a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-btn-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-btn-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}
Kodları ekledikten sonra şablanu keydedin blogunuzdaki değişiklili fark edin. Bizi takip etmeye devam edin ve yenilikleri kaçırmayın...
Yorum Gönderme