Yazı Sonunda Şık Duran Sosyal Paylaşım Butonları Yapma
1. Blogger panelimizden Şablon-HTML'yi Düzenle giriş yapın ve <data:post.body/> kodunu bulun. Bu kodun alt satırına gelecek şekilde aşağıdaki HTML kodlarını kopyalayıp yapıştırın.
Blogger bloğunuzda yayınladığınız yazılarınızın sosyal medya ağlarında paylaşılması bloğunuza ziyaretçi çekeceği için yararlı kabul edilir. Aynı zamanda blog ziyaretçilerinizin hoşlarına giden bir yazınızı paylaşmalarında kolaylık sağlaması açısından sosyal paylaşım butonları bloglar için vazgeçilmez eklentilerden biridir.
Yazı altına sosyal paylaşım butonları nasıl eklenir, Facebook. Twitter, Google Plus, Linkedin butonları/düğmeleri nasıl yapılır gibi sorularınızı bu yazımda cevaplandıracağım.
Şimdi anlatacağım sosyal paylaşım düğmeleri yazdığınız her yazının sonuna otomatikmen eklenecektir. Gayet hoş durduğu ve kolaylık sağladığı için aynı düğmeleri bende kullanıyorum. Bu yazının sonuna geldiğinizde canlı örneğini göreceksiniz.
Yazı altına sosyal paylaşım butonları nasıl eklenir, Facebook. Twitter, Google Plus, Linkedin butonları/düğmeleri nasıl yapılır gibi sorularınızı bu yazımda cevaplandıracağım.
Şimdi anlatacağım sosyal paylaşım düğmeleri yazdığınız her yazının sonuna otomatikmen eklenecektir. Gayet hoş durduğu ve kolaylık sağladığı için aynı düğmeleri bende kullanıyorum. Bu yazının sonuna geldiğinizde canlı örneğini göreceksiniz.
<b:if cond='data:blog.pageType == "item"'>2. Şimdi ]]></b:skin> kodunu bulun ve üst satına aşağıdaki CSS kodlarını yapıştırın.
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-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-arlina-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/share
Article?mini=true&amp;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>
/* https://teknoowin.blogspot.com Paylaş Butonları */Şablonu kaydedin ve sonuçlarını görmek için bloğunuza bakın
.tombol-berbagi-arlina{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-arlina-fb,.tombol-berbagi{float:left;
width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-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-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}
@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;
float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk
{float:left;width:48%;padding:0;border-left:0}}
Gördüğünüz üzere blogger bloğunuza yazı altında gösterilen facebook twitter gibi sosyal paylaşım butonlarını eklemek bu kadar basit.
Butonlarla ilgili sorunuz varsa aşağıdaki yorum formunu kullanarak bana sorabilirsiniz. Takipte kalın
Hiç yorum yok:
Yorum Gönder