Headlines News :
Home » » Add Social Sharing/Bookmarking Widget with Cool Hover Effect

Add Social Sharing/Bookmarking Widget with Cool Hover Effect

Written By Johannes Nababan on Sunday, June 3, 2012 | 12:48 PM

https://lh4.googleusercontent.com/-2jYfr57XRQw/T8rz-Jy5G0I/AAAAAAAAAZE/UYU0hgR23Sk/s271/000000000000000000000000000000000000000000%252B.pngAdd Social Sharing/Bookmarking Widget with Cool Hover Effect. Widget ini sungguh keren dan enak dilihat. Mengapa saya bilang sungguh keren dan enak dilihat, dalam Widget ini icon Social Sharingnya tidak diam, melainkan ada animasinya/hiasannya. Hiasan tersebut terjadi apabila kita mengarahkan cursor kita ke icon Social Sharing tersebut. Ada juga Widget Social Sharing lain yang memberi animasi/hiasan seperti Sharing in Sexy.

Berikut saya memberikan widget yang dan menambahkan efek hover keren dengan CSS3 untuk Anda. Jika anda tertarik, anda bisa memasangnya di blog anda.




»Cara menginstal widget ini :

Step 1 :

1. Masuk ke blogger.
2. Buka Template.
3. Kemudian klik Edit Template, lalu pilih lanjutkan.
4. Centang dulu Expand Template Widget. Lalu cari kode berikut ]]></b:skin> ( Ctrl + F )
5. Kemudian, copy-paste kode berikut ini tepat dibawahnya.


#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/AVvXsEjoboSiYs5ox5P-3herTrsXLn2GjpftQroO1eG9HbjiqEY86mR-Zatw8ul6yi6-wPV-fv0cY62nqhKxQNoyqpY66kobNnEeLUvLFCtI04X8JrQnxhVOV-QITGbgcuu69pNGfgVLvNov1iyH/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.stumbleupon  {background-position: -64px -0px;  }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover  {background-position: -160px -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.del-icio-us  {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px;  }
#w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
#w2b-share ul li a.technorati  {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin   {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Step 2 :

1. Cari kode <data:post.body/> (jika ada 4 pilih yang ke 3)
2. Letakkan kode berikut tepat dibawahnya.



<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='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></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='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></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>

Warning :
  • Jika kode <data:post.body/> yang ke 3 tidak berhasil, copy kode diatas lalu letakkan dibawah kode <data:post.body/> yang pertama, jika tak berhasil juga letakkan di kode <data:post.body/> ke 2 dan begitu seterusnya sampai berhasil.
Sekian Artikel ini, jika masih ada masalah tentang kode <data:post.body/>, silahkan beri komentar.

Happy Blogging
Share this article :

8 komentar:

  1. Nice posting sob,,,mungkin akan saya coba terapkan pada blog saya

    ReplyDelete
  2. itu hanya buat blog aja ya masbro?

    ReplyDelete
    Replies
    1. menurut pengalaman sih iya gan..
      tp coba dulu gih mana tau bisa :)

      Delete
  3. bagus juga ya kalau bisa memasang widget social bookmark, bisa memudahkan pengunjung blog yang ingin menshare postingan kita di akun media social mereka

    ReplyDelete
  4. thanks banget, gan.. artikelnya sangat membantu sekali. keep posting, kawan..

    ReplyDelete

Setelah membaca Artikel yang saya berikan diatas, anda dapat memberikan komentar terhadap Artikel diatas tanpa adanya :
-Spam
-Rasis
-Dan perkataan lainnya yang dapat membuat orang lain merasa tersinggung.

Terima Kasih

banner ads banner ads

 
Support : Blog | Joe | Johny Template
Copyright © 2011. Blog | Joe - All Rights Reserved
Template Created by Johny Template Published by Blog | Joe
Proudly powered by Blogger