Blogger için Sosyal Paylaşım Düğmeleri Eklentisi

Blogger için Düz Sosyal Paylaşma Düğmesi - bu widget'ı blogunuza yükleyin. Bu derste, blogcuya düz sosyal paylaşım butonunun nasıl yükleneceğini yukarıdaki resimdeki gibi paylaşacağım . Bu blogcu için basit bir sosyal paylaşım widget. Bazen bazı kullanıcılar blogları için benzersiz, minimal, düz ve basit bir sosyal paylaşım butonu ararlar. Bu blog yazısında, blogspot blog için harika ve en popüler CSS sosyal paylaşım butonunu paylaşacağım .

Sosyal Paylaşım Düğmesinin Önemi - Sosyal paylaşım düğmesinin önemini açıklamaya gerek yok. Ancak, bir sosyal paylaşım düğmesinin blogunuz için ziyaretçiyi büyüttüğünü söyleyerek. Sosyal paylaşım butonu, ziyaretçiyi blogunuzda tutmanıza yardımcı olur. Her blogcu, bloglarına sosyal paylaşım butonu eklemek zorundadır. Çünkü blog trafiğini artırmak için harika bir yöntem . Günümüzde sosyal medya, birbirleriyle iletişim kurmanın en kolay ve yaygın yoludur. Bu yüzden sosyal medyadan çok sayıda ziyaretçi almalısınız.

Şimdi ana bölüme gel. Bu derste ben sizinle bu önemli widget'ı paylaşıyorum. Aşağıdaki adımları izleyin.

Öncelikle Blogger şablon editör sayfamızı açalım ve Ctrl+F yardımıyla ]]></b:skin> kodunu veya </style> kodlarını aratalım ve bulduğum kodun üzerine gelece şekilde aşağıda ki CSS kodlarını ekleyelim.

/* CSS Share Button */
.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 bu kodlara ilişkin aşağıda vermiş olduğum koduda </head> kodunun üzerine gelecek şekilde ekleyin.

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

Ve son olarak Sosyal paylaşım düğmelerine aktif hele gelecek aşağıda ki eklentiyi <data:post.body/> kodunun bir satır altına ekleyin.

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

NOT: <data:post.body/> kodunundan birden fazla olduğundan tek tek deneyerek yapmanızı tavsiye ederim.

Bütün işlemler bu kadar herkese kolay gelsin.