5 Cara pasang Widget social sharing Hover Effect

Cara pasang Widget social sharing Hover Effect - Widget social sharing Hover Effect sesuai dengan namanya sob widget ini berfungsi sebagai social sharing. sosial bookmark sharing dengan gaya Popular Gray-scale. Maksudnya adalah ketika pointer ke salah satu icon di widget tersebut yang sebelumnya bewarna Abu-abu menjadi berwarna sesuai warna icon. Widget social yang saya berikan ini menurut saya cukup bagus tampilanya  dengan dengan CSS3 dan jQuery. Widget ini sudah saya gunakan dan berhasil. Saya posting artikel ini.Untuk berbagi sesama blogger mau tau gimana bentuknya lihat screenshoot di bawaah :

Berminat untuk membuatnya sob langsung saja ikuti langkah-langkahnya :

• Pertama login ke blog sobat.
• Selanjutnya download dulu templatenya, hal ini dilakukan untuk mengantisipasi bila terjadi kesalahan
• Pada menu pilih Rancangan ➨ Edit HTML.
• Cari  code ]]><b:skin>
• Apa bila sudah ketemu sobat copast kode di bawah ini tepat di atas kode di atas

#anvity-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}

#anvity-share ul li {display: inline;background:none;margin:0;padding:0;}

#anvity-share ul li a {display: block;float: left;width: 
32px;height:32px;background-image: 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhia2xU4Bwk9ImhPmbB_kSzCVGfQ2CR7YtkaEoEWob-bYh3HGz7vOd_zmeCe7BvXWtXf06exVt6cJY-BOpZ5QjgeknnK8HoDJzDDrfJssA83nWT6Vche2_Txz7GQdRizF50iSaEKjFfbqIc/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; }

#anvity-share ul li a.twitter    {background-position: -0px -0px;   }

#anvity-share ul li a.twitter:hover {background-position: -0px -33px;  }

#anvity-share ul li a.facebook   {background-position: -32px -0px;  }

#anvity-share ul li a.facebook:hover {background-position: -32px -33px; }

#anvity-share ul li a.stumbleupon  {background-position: -64px -0px;  }

#anvity-share ul li a.stumbleupon:hover{background-position: -64px -33px; }

#anvity-share ul li a.digg    {background-position: -192px -0px; }

#anvity-share ul li a.digg:hover  {background-position: -192px -33px;}

#anvity-share ul li a.reddit   {background-position: -160px -0px; }

#anvity-share ul li a.reddit:hover  {background-position: -160px -33px;}

#anvity-share ul li a.google   {background-position: -128px -0px; }

#anvity-share ul li a.google:hover  {background-position: -128px -33px;}

#anvity-share ul li a.del-icio-us  {background-position: -480px -0px; }

#anvity-share ul li a.del-icio-us:hover{background-position: -480px -33px;}

#anvity-share ul li a.mixx    {background-position: -96px -0px;  }

#anvity-share ul li a.mixx:hover  {background-position: -96px -33px; }

#anvity-share ul li a.technorati  {background-position: -416px -0px; }

#anvity-share ul li a.technorati:hover {background-position: -416px -33px;}

#anvity-share ul li a.linkin   {background-position: -256px -0px; }

#anvity-share ul li a.linkin:hover  {background-position: -256px -33px;}

#anvity-share ul li a.yahoobuzz  {background-position: -448px -0px; }

#anvity-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}

#anvity-share ul li a.myspace   {background-position: -512px -0px; }

#anvity-share ul li a.myspace:hover {background-position: -512px -33px;}

#anvity-share ul li a.more    {background-position: -576px -0px; }

#anvity-share ul li a.more:hover  {background-position: -576px -33px;}

• Simpan lalu centang  Expand Template Widget
• Cari code <data:post.body/>
• Apa bila sudah ketemu sobat copast kode di bawah ini tepat di bawah kode di atas 

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

<div id='anvity-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>

Catatan :

Apabila sobat menemukan banyak kode <data:post.body/> silahkan sobat pilih saja kode yang ke 2

• Simpan lagi dan lihatlah hasilnya

Sekian sobat semoga dapat bermanfaat, apabila ada yang sobat ingin tanyakan jangan sungkan untuk memberikan komentar dan menayakannya kepada Master Copast. Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog,   yang berjudul Cara pasang Widget social sharing Hover Effect. Semoga bermanfaat Master Copast