 |
| 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.
- Bloggerda sosyal medya butonlarının kullanımın önemi
- Blogger sosyal paylaşım butonları
- Sayfa da aşağı inildiğinde çıkan paylaş eklentisi
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/AVvXsEjTP2sFiKRr1C9ORg-SwbG82qFG6FXVI-UCEFXdFujYTH6D0jnbfOhghjeb5s2ECOGs-Z_E_JT9XtfA_myT2C3fRk1T3-4RWNNUNBZS5l4tr6ptwYhiSzOhZBFnoDfjb5N1tJyqOYOsuveX/s1600/btrix-facebook-icon.png);
}
ul.social_btrix li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5LwhsdlMmdM0zMB1NwXlgHppwsns53hI5H0kxK8LtVunb2tfJ2XBT9h-Idl66R2n8xGTuGsCKtM1x00e1uH6ESJnJMroRDbpPKDUr5ANMDK_45Sh0emciufin5mHqSLI-KIPNC9X3fkD/s1600/btrix-twitter-icon.png);
}
ul.social_btrix li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFkIzYMsQWMHKwMAkWBlaECzWNR5YMieIE6HCtlZ3j4TXU0ohs0LQo3Qhm7hzHasyIU52NEs8dOAjDVPolQa4e8YSfm_V2YPuShBhvFvuv-CxNw_ZmcrORcLvfhWAZg7zHy5wyoqWTeiy/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8uw78UdE5eV4dBCk_IEdFnz0VC8aAbLalsjmu4qoWJ_bHz2KAR_1TCPbbo8Nou5HuRPl3BGRUiJ3cnnbTXtkw-c3BsgbbbR1gOtDZU6qOsx4Xye-iFDD8w0VT8FbN1ZfSYxaT_z-CZaLD/s1600/btrix-Pinterest-icon.png);
}
ul.social_btrix li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijhMD3ZeVXDyqLjQLmjpjjXc4xCkz95zjXEtA_-5SaQRwxnWV5VICoN-hPszWx2E7dECAlG2CXIyLfiYSFzdxW70nKmLtITFv_x_H348PvNv2Cl062uu4lsJ6t_yUr5b_VKQbPRq5KwXWa/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 == "item"'>
<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='"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'><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' 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.
Hiç yorum yok:
Yorum Gönder