Blogger yazı altına sosyal buton ekleme, blogger sosyal buton ekleme,blogger en iyi sosyal butonlar, blogger sayfa altına sosyal paylaşım butonu ekleme,TeknoWin
Yazı Sonunda Şık Duran Sosyal Paylaşım Butonları Yapma
Blogger bloğunuzda yayınladığınız yazılarınızın sosyal medya ağlarında paylaşılması bloğunuza ziyaretçi çekeceği için yararlı kabul edilir. Aynı zamanda blog ziyaretçilerinizin hoşlarına giden bir yazınızı paylaşmalarında kolaylık sağlaması açısından sosyal paylaşım butonları bloglar için vazgeçilmez eklentilerden biridir.

Yazı altına sosyal paylaşım butonları nasıl eklenir, Facebook. Twitter, Google Plus, Linkedin butonları/düğmeleri nasıl yapılır gibi sorularınızı bu yazımda cevaplandıracağım.

Şimdi anlatacağım sosyal paylaşım düğmeleri yazdığınız her yazının sonuna otomatikmen eklenecektir. Gayet hoş durduğu ve kolaylık sağladığı için aynı düğmeleri bende kullanıyorum. Bu yazının sonuna geldiğinizde canlı örneğini göreceksiniz.

1. Blogger panelimizden Şablon-HTML'yi Düzenle giriş yapın ve <data:post.body/> kodunu bulun. Bu kodun alt satırına gelecek şekilde aşağıdaki HTML kodlarını kopyalayıp yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;
http://www.facebook.com/sharer.php?u=&quot; + data:post.url + 
&quot;&amp;title=&quot; + data:post.title' 
rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;
http://www.facebook.com/sharer.php?u=&quot; + data:post.url 
+ &quot;&amp;title=&quot; + data:post.title' 
rel='nofollow' target='_blank'>Paylaş Facebook</a>
</div>
<div class='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' 
expr:data-url='data:post.url' href='http://twitter.com/share' 
rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' 
expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' 
target='_blank'>Paylaş Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?
url=&quot; + data:post.url' rel='nofollow' target='_blank'/><a 
class='tombol-berbagi-gp-label' expr:href='&quot;
https://plus.google.com/share?url=&quot; 
+ data:post.url' rel='nofollow' target='_blank'>Paylaş Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/share
Article?mini=true&amp;amp;amp;url=&quot; + data:post.url 
+ &quot;&amp;amp;title=&quot; + data:post.title 
+ &quot;&amp;amp;summary=&quot; + data:post.snippets' 
rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' 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' rel='nofollow' 
target='_blank'>Paylaş LinkedIn</a>
</div>
</div>
</b:if>
2. Şimdi ]]></b:skin> kodunu bulun ve üst satına aşağıdaki CSS kodlarını yapıştırın.
/* https://teknoowin.blogspot.com Paylaş Butonları */
.tombol-berbagi-arlina{display:block;position:relative;
height:43px;line-height:43px;
padding:10px;border-top:1px solid #dadada;border-bottom:1px 
solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;
width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-
lk{float:left;width:21%;height
:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,
.tombol-berbagi-lin,
.tombol-berbagi-pi{float:left;display:block;background:url
('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI
/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') 
no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,
.tombol-berbagi-gp-label,
.tombol-berbagi-lin-label{float:left;width:58px
;height:inherit;font-size:12px;font-family:
'Open Sans Bold',Arial,sans-serif;line-height:
14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;
float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk
{float:left;width:48%;padding:0;border-left:0}}
Şablonu kaydedin ve sonuçlarını görmek için bloğunuza bakın
Gördüğünüz üzere blogger bloğunuza yazı altında gösterilen facebook twitter gibi sosyal paylaşım butonlarını eklemek bu kadar basit. 


Butonlarla ilgili sorunuz varsa aşağıdaki yorum formunu kullanarak bana sorabilirsiniz. Takipte kalın
Demo Görmek İçin Tıklayınız
Axact

Admin Ælis

TeknoWin.blogspot.com Bir çok konuda fikir sahibi olduğu kategorilere yönelip kullanıcıya en iyi ve en özgün bilgiyi sunmayı amaç edinmiştir.TeknoWin Olarak Güncel Haber , Teknoloji , İnternet , Program İndirme , Blogger Konuları , Blogger Temaları Magazin Haberleri , İlginç Bilgiler ,Pratik Bilgiler ve Çözümler , Program Hataları ve Çözümleri Film İndir ve Dizi İndir Oyun İndir , Film Dizi Hakkında Öneriler , Videolar Komik Gifler Fotograflar Tüm Bu Kategorileri Baz Alan Genel Güncel Paylaşım ve Portal Sitesidir...

Yorum Yap:

0 Hiç Yorum Yapılmamış İlk Yorumu Sen Yapmak İstermisin:

Yorum yazabilmek için:
Yorumlama biçimi seçeneklerinden profil üyeliğiniz yoksa; Adı/URL profilini seçip kendi belirlediğiniz isimle URL kısmını boş bırakarak yorum yazabilir ya da Anonim profili seçeneği ile isimsiz olarak yorum yapabilirsiniz.