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('http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/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

6 komentar:

hendri mengatakan...

wah keren sob,,mantap nih ,,keren juga share button'nya ssob,,,biaar blog makin keren juga makin banyak pengunjung,,,makasih atas tuturialnya sob,,sukses

Say No To Maho Blogs mengatakan...

nice tutor gan , sekalian kunjungan balik.

Tifan Dwi Avianto mengatakan...

nice! keren, dapet dari mana artikelnya? kok gak pake sumber ya?

Copast Master mengatakan...

@hendri : makasih sob atas kunjunganya .. amin juga makasih do'anya..

@maho Blogs : mantap langsung TKP gan..

@tifan : Dapet dari jalan.. Banyak yang posting kaya gini apa salahnya ane juga posting kaya gini. Sumber aslinya gag jelas.

Awan Kurniawan mengatakan...

Boleh di coba nih...

Rayen mengatakan...

Saya pernah masang tapi gagal terus =C .
Jadinya saya pakai trik lain.
Menurut saya lebih komplit ini sobat

Posting Komentar

◄ Newer Post Older Post ►