Blog Resimlerine Sosyal Paylaşım Bütonları Ekleme

Merhaba blogcular, bu yazımızda sizlere blog şablonlarının anasayfasında bulunan blog içerik resimlerine sosyal paylaşım bütonları ekleme / yükleme eğitimini paylaşacağız.

Bu yazıda paylaşılanlar fare imlecini blog anasayfasında resimler üzerinde bulunan paylaşım bütonlarının hover efektiyle çalışmasını blogcuların isteği üzerine yapılmış ve paylaşılmıştır. Hiç şüphesiz sosyal paylaşım bütonlarının blogun evrensel olarak vitrin yapmasını sağlamaktadır. Sadece CSS kullanarak biçimlendirilen (hafif) bu eklentiyi uygulamanızda, blogunuzu yavaşlatma konusunda endişelenmenize gerek yok.

Blogger Resimlerine Sosyal Paylaşım Bütonları Nasıl Eklenir?

1. Blogger hesabınızda oturum açın ve eklemek istediğiniz blogu seçin. Seçmiş olduğunuz blogun kumanda panelinde (blog arayüz) bulunan seklemelerden Şablon > HTML'i Düzenle > CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

/* Blogger Eklentileri Revoltify */
ul.betfgpaylas{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:0;top:20px;left:20px;line-height:normal;overflow:hidden;}
ul.betfgpaylas li{text-align:left;float:left;margin-bottom:0;margin-top:-30px;opacity:0;padding:0;transition:all 0.3s;}
.post:hover .betfgpaylas li{opacity:1;margin-top:0;}
ul.betfgpaylas li a{background-clip:padding-box;background-repeat:no-repeat;display:block;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:30px;height:30px;line-height:30px;position:relative;margin:0;padding:0;font-size:14px;font-weight:normal;background-color:#fff;color:#aaa;transition:all 0.3s;}
ul.betfgpaylas li a:hover{color:#fff;}
ul.betfgpaylas li a.bef-begen:hover {background-color:#5479b7;}
ul.betfgpaylas li a.bet-paylas:hover {background-color:#58c2e7;}
ul.betfgpaylas li a.beg-paylas:hover {background-color:#f36d5c;}

2. Aşağıdaki kodu blogunuzun şablon kodlarında bulun.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>

Bulduğunuz kodun hemen altına aşağıdaki HTML kodları ekleyin.

<ul class='betfgpaylas'>
<li>
<a class='bef-begen' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Facebook ile paylaş'><i class='fa fa-facebook'/></a> 
</li>
<li>
<a class='bet-paylas' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter ile paylaş'><i class='fa fa-twitter'/></a> 
</li>
<li>
<a class='beg-paylas' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus ile paylaş'><i class='fa fa-google-plus'/></a> 
</li>
</ul>

Eklemiş olduğunuz kodlar aşağıdaki örnek kodlar gibi olmalıdır.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<ul class='betfgpaylas'>
<li>
<a class='bef-begen' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Facebook ile paylaş'><i class='fa fa-facebook'/></a> 
</li>
<li>
<a class='bet-paylas' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter ile paylaş'><i class='fa fa-twitter'/></a> 
</li>
<li>
<a class='beg-paylas' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google Plus ile paylaş'><i class='fa fa-google-plus'/></a> 
</li>
</ul>

Şablonu kaydedin ve blogunuzun anasayfasını kontrol edin.

Eğer kullandığınız şablon kodlamaları yada şablonunuz farklı bir şablon ise yukarıdaki kodları şablon kodlarınıza göre düzenlemelisiniz.

Eğer HTML5 uyumlu blog şablonu / teması kullanmak istiyorsanız buradan bakabilirsiniz. Yeni bir blogger eklenti eğitiminde görüşmek üzere.