Duyarlı sosyal paylaşım butonları ve daha fazlası için widgets sayfasını ziyaret ediniz.
Blog yazılarının altında ya da üstünde bulunan sosyal paylaşım butonlarını özelleştirip toplam paylaşım sayınızı gösterir.
Sosyal paylaşım butonları, bir blogda ya da web sitesinde olması gereken en önemli eklentilerden biridir. Ziyaretçiler sayfanıza girdiğinde bu eklentileri mutlaka kullanırlar. Böylelikle yazılarınızı daha bu eklentiyle fazla kitleye kolaylıkla ulaştırmış olursunuz. SEO seo
Eklenti bütün temalarda çalışmayabilir. Ayrıca Font Awsome iconlarını daha önceden yüklemeniz gerekmektedir.
Duyarlı sosyal paylaşım butonları kurulum:
1. CSS kodlarını ekleme:
Blogger kumanda panelinden şablon> HTML Düzenle > CTRL + F kombinasyonuyla ]]></b:skin> kodunu bulun. Hemen üzerine aşağıdaki kodları ekleyin.
/* Share Button dengan Counter untuk Blogger by http://twistedshape.blogspot.com */
.arlina_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.arlina_share_button .share_blog {display:block;}
.arlina_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.arlina_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.arlina_share_button .share_blog ul {margin:0;padding:0;}
.arlina_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.arlina_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.arlina_share_button .share_blog .btn_fb{background:#3a579a}.arlina_share_button .share_blog .btn_fb:hover{background:#314a83}.arlina_share_button .share_blog .btn_twtr{background:#00abf0}.arlina_share_button .share_blog .btn_twtr:hover{background:#0092cc}.arlina_share_button .share_blog .btn_gplus{background:#df4a32}.arlina_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.arlina_share_button .share_blog .btn_pntrst{background:#cd1c1f}.arlina_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.arlina_share_button .share_blog .btn_linkdin{background:#2554BF}.arlina_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.arlina_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.arlina_share_button .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.arlina_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
@media only screen and (max-width: 979px) {
.arlina_share_button .share_blog .btn_linkdin {width:34px;}
.arlina_share_button .share_blog .btn_fb .share-btn,.arlina_share_button .share_blog .btn_twtr .share-btn,.arlina_share_button .share_blog .btn_linkdin .share-btn,.arlina_share_button .share_blog .btn_gplus .share-btn,.arlina_share_button .share_blog .btn_pntrst .share-btn{display:none}}
@media only screen and (max-width:768px) {
.arlina_share_button .share_blog ul li a,.arlina_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.arlina_share_button .share_blog .wrap{min-width:34px}.arlina_share_button .share_blog .btn_linkdin,.arlina_share_button .share_blog .btn_pntrst{width:30px}.arlina_share_button .share_blog ul li{margin:1px 3px}}
@media only screen and (max-width:479px) {
.arlina_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.arlina_share_button .share_blog ul li{width:25px;margin:2px;}.arlina_share_button .share_blog .wrap{display:none}.arlina_share_button .share_blog ul li .fa{width:25px}}2. HTML kodlarını ekleme:
Aşağıdaki kodları eğer yazılarınızın üst kısmında gözükmesini istiyorsanız <data:post.body/>üzerine, alt kısmında gözükmesini istiyorsanızda
<div class='post-footer'> kodunun üzerine ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<div class='arlina_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='btn_fb'><a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @BlogDuzenim - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-twitter'/></div>
<div class='wrap'>Tweet</div>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'>
<div class='wrap1'><i class='fa fa-google-plus'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='btn_pntrst'><a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-pinterest'/></div>
<div class='wrap'>Pin</div>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='btn_linkdin'><a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-linkedin'/></div>
<div class='wrap'>Share</div>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>Twitter paylaşımlarında kullanıcı adınızın gözükmesi için lütfen kod içindeki BlogDuzenim kısmını düzenlemeyi unutmayın.
3. Javascprit kodlarını ekleme :
Son olarak aşağıdaki kodları da temanızda </body> üzerine ekleyin.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by twistedshape.blogspot.com
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>4. Temanızı kaydedin.
Blog Düzenim bloggeri geliştirmek ve yeni blog kullanıcılarına yardımcı olmak amacıyla açılmıştır. We love blogger.
ConversionConversion EmoticonEmoticon