Widget Sosial Sharing Popular For Blog

Cobasanasini - Widget Sosial Sharing Popular For Blog. Maksudnya adalah ketika pointer/mouse 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 cool (baca: keren/indah) dengan dengan CSS3 dan jQuery. Widget ini sudah saya gunakan sejak lama karena saya suka sekali dengan widget ini. Maka dari itulah saya posting artikel ini. Untuk demo widgetnya silahkan lihat di halaman postingan bagian bawah blog ini.
Demo FRrom Cobasanasini Blog
Langsung saja tanpa pamit lagi dari emak langsung aja dech sobayt cobasanasini langsung saja saya kasi tipsnya jangan lupa ikuti langkah langkah berikut ini :

1. Pastikan sahabat sudah login ke akun Blogger.
2. Masuk ke bagian "Template" pada Dashboard
3. Pilih (klik) "Edit HTML"
4. Cari kode ]]><b:skin> (Gunakan Ctrl+F)
5. Letakan kode CCS dibawah ini tepat dibawah kode ]]></b:skin>

#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;}
6. Centang "Expand Widget Template" dan kemudian cari kode <data:post.body/> (Gunakan Ctrl+F)
7. Letakan kode dibawah ini tepat dibawah kode <data:post.body/>

<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>
8. Save Template. Done!

Solusi untuk pencarian kode <data:post.body/>


Biasanya kode <data:post.body/> terdapat 3 buah, bahkan di HTML Template Blog ini sampai 4. So, untuk menyelesaikan masalah penemuan kode tersebut, silahkan letakan saja di salah satu ketiga kode berikut. Lebih bagus coba terlebih dahulu yang pertama dan lihat hasilnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>

Enjoy and Happy Blogging!

0 Coment "Widget Sosial Sharing Popular For Blog", Baca atau Masukkan Komentar

Posting Komentar