Yazılarınıza Paylaş Butonu Ekleyin - 2

Blog tasarımımızda olması gereken en önemli kısımlardan birisi okuyucularınızın yazılarınızı paylaşacak butonları sitenizde olmasıdır.Bunun için bizler de yazı sonlarına ya da yazı başlığının altında facebook , twitter ve google plus paylaşım butonları ekliyoruz.İnternette araştırma yaparsanız bu butonların farklı versiyonlarını bulacaksınız.Değişik tipte olanları sitemde zaten paylaşmıştım.Bu yazımda ise resimde göreceğiniz üzere yine farklı tip paylaş butonlarını sitemize nasıl ekleriz onu paylaşacağım.

Paylaş butonlarını her zaman olduğu gibi iki adımda yükleyeceğiz.İlk olarak butonların özelliklerini CSS olarak ekleyece ve sonra blogdaki yerini göstereceğiz.O zaman hemen başlayalım:

>>Yazı Başlığının Altına Sosyal Paylaşım Butonları Ekleyin

>>Kayan Sosyal Paylaşım Butonları Ekleyin

Blogger hesabınıza giriş yapın ve Şablon  Html Düzenleme sayfasına gelin.

Aşağıdaki kodları ]]></b:skin> kodunun üstüne kopyalayın.

.share-buttons li { list-style: none; float: left; padding-right: 20px; padding-bottom: 10px; } .sharetitle { float: left; font-size: 51px; font-weight: 900; text-transform: uppercase; line-height: 60px; padding-right: 10px; color: #2aa4cf; } .sharetitle2 { float: left; margin-left: -112px; margin-top: 50px; font-size: 20px; text-transform: uppercase; font-weight: 900; Color: #8a8c8e; } .sharetitle3 img { float: left; padding-right: 20px; padding-left: 10px; padding-top: 5px; } .share-buttons { padding-top: 20px; }
.like-cm{margin-top:15px;width:10px;height:10px;background:url(http://lh6.ggpht.com/-smRIL9DaITs/UM9cIp-I8bI/AAAAAAAABeM/wAw1Z1sgj78/s10/like.png) no-repeat}
#social img:hover {opacity: 0.6;}

Daha sonra bu kodları nereye ekleyeceğinize göre aşağıdaki kodları farklı yere ekleyebilirsiniz.Örneğin yazı sonuna eklemek istiyorsanız

<div class='post-footer-line post-footer-line-3'>

Kodunu bulun ve hemen altına aşağıdaki kodu ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-buttons'>
<div class='sharetitle'>Beğen</div> <div class='sharetitle2'>Paylaş</div><div class='sharetitle3'><img src='http://2.bp.blogspot.com/-4ApGF_JO_qk/UTnLsoO4CaI/AAAAAAAAAl0/P6iiO0wsj6o/s1600/racka1.png'/>

</div>
<li><a class='twitter-share-button' data-count='vertical' data-related='' data-via='mtrucosblogger' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></li>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;

width=55&amp;action=like&amp;font=arial&amp;

colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:70px; height:62px;'/></li>
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/> </li>
  </div>
</b:if>

Sarı renkli kısımı kendinize göre değiştirebilirsiniz.Eğer yazı başlığının altına yerleştirmek istiyorsanız da

<div class='post-header-line-1'/>

kodunun altına ekleyebilirsiniz.