CSS3 İle Oluşturulmuş Sosyal Paylaşım Butonları

Merhabalar,bugün size yine güzel bir eklenti ile tanıştıracağım.İlk gördüğüm de çok hoşuma gitti.Biraz kurcaladıktan sonra sizlere sunma gereği duydum :) Butonlarımız CSS3 ile oluşturulmuş ve gayet hoş hover efektleri kazandırılmış.








Öncelikle aşağıdaki kodu şablonunuzdan CTRL+F yardımı ile bulun.

]]></b:skin>

Yukarıdaki kodun hemen üstüne aşağıdaki CSS3 kodlarını ekleyin.

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Qe4Redz9uKlFLwRGWzUcKGwD_9YnO-xSNRiYJiK7J44hFULR6YP-DO1Ly5YpxIiQA2DzrWaBv8pPj-IBXj3lji0_pvYFZfWHnqzmA9kr1AsmujxdsMQ52BFvG4MqSOBZbwNYyX0AfXm_/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
#w2b-share ul li a.facebook   {background-position: -32px -0px;  }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover  {background-position: -128px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Temayı kaydetmeden aşağıdaki kodu bulun.

<data:post.body/>

Yukarıda bulduğumuz kodun hemen sonrasına aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='w2b-share'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' 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' title='Share this post on Facebook'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Şablonunuzu kaydedin.İşlemlerimiz tamamlanmıştır.İyi bloglamalar.