Ana Sayfa / Blogger Eklentileri / Blogger Flat Sosyal Medya Paylaşım Butonu Eklentisi

Blogger Flat Sosyal Medya Paylaşım Butonu Eklentisi

 

MsDesignbd yapımı bu eklentiyi birçok web sitesi kullanmaktadır. Özellikle yapılan blogger temalarında sosyal medya paylaşım butonları artık olmazsa olmaz bir hale gelmiştir. Eğer temanızda yoksa siz de aşağıdaki adımları uygulayarak temanıza bu özelliği kazandırın.

BU EKLENTİ NE İŞİME YARAYACAK ?

Sosyal medya paylaşım butonları, her blogda önemli bir rol oynamaktadır. Her blog ziyaretçi trafiğini arttırmak için bu yolu kullanmalıdır. Sitenizi ziyaret eden ziyaretçiler eğer içeriklerinizi yararlı bulursa bunları sosyal medya hesaplarında paylaşmalarına imkan vermiş olursunuz. Bu da yazılarınızın daha büyük kitlelere ulaşmasına imkan sağlar.

EKLENTİNİN DEMOSU İÇİN TIKLAYIN

NASIL EKLENİR ?

Blogger’dan admin panelinize ulaşın.

Tema – HTML Düzenle bölümünü açın.

Aşağıdaki kodları </style> kodundan önce herhangi bir yere yapıştırın.


.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}

Şimdi </head>  kodundan öncesine aşağıdaki kısmı yapıştırıyoruz.

 

</span>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

<span style="font-family: Consolas, Monaco, monospace;">

 

Daha sonra ise <data:post.body/> kodunu buluyoruz ve hemen ardına aşağıdaki kodları ekliyoruz.


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='sharepost'> <ul> <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul> </div> </b:if>

Bir cevap yazın

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