Senin, 09 April 2012

Membuat Tombol Share di Atas dan di bawah Posting blog

Share Button. memang sangat berguna untuk meningkatkan popularitas sebuah blog, yang mana jika pembaca menyukai artikel kita, kemungkinan besar akan di share lewat button yang kita sediakan. memasang tombol share (Social booksmark).

Contoh Tombol Share dengan CSS3 seperti dibawah ini.


Bagi sobat yang ingin menggunakan button share seperti contoh diatas. ikuti langkah di bawah :1. Login ke Blogger.
2. Buka Dashboard blogger sobat lalu arahkan pada menu rancangan / Design / Template
3. Masuk pada Edit HTML > Expand Template Widget 
4. Masukan kode dibawah ini sebelum kode ]]></b:skin>
#bookmarks {
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }

#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }

5. Lalu cari kode <data:post.body/>
6. Copy Code dibawah ini :

<div id='bookmarks'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>

<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>

<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>
  • Button Share diatas postingan : paste kode diatas <data:post.body/>
  • Button Share dibawah postingan : paste kode dibawah <data:post.body/>
Catatan :  
Letakkan pada <data:post.body/> yang kedua., jika template blog sobat hanya memiliki satu buah <data:post.body/>, tambahkan kode berwarna merah, hingga menjadi seperti dibawah ini:

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

==== Paste kode langkah ke-6 disini ===

</b:if>

7. Jika sudah silahkan disimpan.

Selamat Mencoba. :)