Sosyal Medya Paylaşım Kodu

Blogger yazi altına sosyal paylaşım butonları

Blogger da yazı altına sosyal paylaşım butonları ekleyerek , blogunuza uğrayan ziyaretçilerin yazılarınızı sosyal paylaşım sitelerinde paylaşmalarını sağlayabilirsiniz.Daha önceleri de bu sosyal paylaşım butonlarının blogunuza yararları hakkında bir yazı yazmıştım ve bir kaç sosyal paylaşma butonları eklentileri de eklemiştim.

Bu widgeti blogunuza ekleyerek Facebook , twitter , google plus , pinterest ve linkedin gibi sosyal paylaşım sitelerinde yazılarınız paylaşılabilir.Bu sayede sosyal medya dan alacağınız trafik artacaktır.

Gelelim yazı altına sosyal paylaşım butonlarının nasıl ekleneceğine :

Öncelikle her ihtimale karşı blog şablonunuzun bir yedeğini alınız.

Blogger paneline giriş yapınız.
Şablon html'yi düzenle butonuna tıklayınız.
]]></b:skin> kodunu Ctrl+F yöntemi ile aratarak bulunuz.
Bulduğunuz kodun hemen bir üst satırına aşağıdaki kodları yapıştırınız.

ul.social_btrix {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_btrix li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_btrix li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_btrix li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_btrix li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1UCyvMcYsSTFVTSL82yvdz3T0WS9Y-sadqqY-pkb6XRIEiTMMsPIznp62nIIBvG_WzBmxh-SUb9HaS_iWlVs89WKUiTG32WBjXWdXA0JBJOcDARs81eRkoKPHWg2iiT6PBAW-60KlU815/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmEMEe-njPUp0f6wHPQk-oQAMyWyopsGp8OwfTg92DMvsOKYy-PGnhb76_vs8hi7rVspqMM5ufmiWA5zR570OxSyAdYr-a-CJ2PsgtdhRDGkkh6-dPRihwYhAz3dhD0e1swDz5q7KVjQlH/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHokcjt9sZjuzaSJ7W8q4_IkU9CM2TIDOaS1Xhu4g2C5H0h1mrM4-AyE5QVeWxfvKrMypHX934aCE05o0ycpXrOhW_sKaVGklw74AsMrKDJZ_pht0X7wlqInByzNFBJwrDztffQYvLjX0/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimG3S1yUHFMbk-ZUITAVJ9-lj-G59_H_e_F6O701bomqR5LMYyUTWFK10WOaB23xX3xH42axuQWgbUsf63DUMgZbGzXMG6oB_y-TKm5t-G3NmZHktJJJCSC-BDEY1YHebvemLyPEuDBJxL/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEham7e-PkIxhgVRrTrdUSPmtnUfxsbeHMouRKbC9_0hx7Zhh0XPVbVyT3aUqGVVzHeCf1OvOt_FZYzU4JdjZNeIe5L_ZKd3AZznkkU9ZqsjiThxCMi7iFxR75SJdlSrkT1QN4GntPR9c1uw/s1600/btrix-Linkedin-icon.png);
}
#animation_btrix:hover li {
opacity:0.2;
}
#animation_btrix li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_btrix li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_btrix li:hover {
opacity:1;
}
#animation_btrix li:hover a strong {
opacity:1;
top:-10px;
}

Daha sonra <data:post.body/> kodunu aratınız.Bu kodun altına da aşağıda yer alan kodları yapıştırınız.<data:post.body/> kodunu arattığınıza birden fazla sonuç çıkabilir.Genelde ikinci bulduğunuz <data:post.body/> kodunun altına yapıştırın.Yani ben bu eklentiyi bloguma uygularken bu şekilde yaptım.Eğer olmazsa diğer bulduğunuz <data:post.body/> kodunun altına yapıştırın.
Eğer sosyal paylaşım butonlarının yazınızın en başında görünmesini istiyorsanızda bulmuş olduğunuz <data:post.body/> kodunun hemen bir üst satırına aşağıdaki kodları yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b>Share this article with your friends.</b></div>
    <ul class='social_btrix' id='animation_btrix'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
    </ul>
</b:if>

Kaydet butonuna tıklayarak yazı altına sosyal paylaşım butonları eklemiş olacaksınız.

Bir önceki yazımda Blogger da yazılarınıza ekledğiniz resimlerin SEO için önemi' hakkında bilgiler verilmektedir.

güncel habaerler burada izlenir

Yazı Altına Sosyal Paylaşım Butonları

Öne Çıkan Yayın

[4.2.2] Jiayu Rom