Membuat Widget Social Share

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

www.junioriqfar.com, Membuat Widget Social Share. Tutorial kali ini saya akan membahas tentang membuat Widget Social Share yang menggunakan effect seperti postingan saya sebelumnya yaitu widget social. Untuk lebih jelasnya silahkan sobat blogger untuk melihat demonya dulu. Jika berminat ikutilah langkah demi langkah yang saya buat semoga sobat blogger bisa mengerti tutorial saya kali ini.

Demo Widget Social ShareKlik disini untuk melihat demo Widget Social Share

1. Masuk akun blogger sobat
2. Kemudian klik Rancangan, lalu Edit HTML
3. Lalu Centang Expand Template Widget
4. Copy code CSS di bawah ini

#social-share ul {
list-style: none;
clear: none;
padding: 0px 0px;
margin: 5px 0;
}
#social-share ul li {
display: inline;
background:none;
margin:0;
padding:0;
}
#social-share ul li a {
display: block;
float: left;
width: 32px;
height:32px;
background-image: url('http://i766.photobucket.com/albums/xx310/Ikhfar/image.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;
}
#social-share ul li a.twitter    {background-position: -0px -0px;   }
#social-share ul li a.twitter:hover {background-position: -0px -33px;  }
#social-share ul li a.facebook   {background-position: -32px -0px;  }
#social-share ul li a.facebook:hover {background-position: -32px -33px; }
#social-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#social-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#social-share ul li a.digg    {background-position: -192px -0px; }
#social-share ul li a.digg:hover  {background-position: -192px -33px;}
#social-share ul li a.reddit   {background-position: -160px -0px; }
#social-share ul li a.reddit:hover  {background-position: -160px -33px;}
#social-share ul li a.google   {background-position: -128px -0px; }
#social-share ul li a.google:hover  {background-position: -128px -33px;}
#social-share ul li a.del-icio-us  {background-position: -480px -0px; }
#social-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#social-share ul li a.mixx    {background-position: -96px -0px;  }
#social-share ul li a.mixx:hover  {background-position: -96px -33px; }
#social-share ul li a.technorati  {background-position: -416px -0px; }
#social-share ul li a.technorati:hover {background-position: -416px -33px;}
#social-share ul li a.linkin   {background-position: -256px -0px; }
#social-share ul li a.linkin:hover  {background-position: -256px -33px;}
#social-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#social-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#social-share ul li a.myspace   {background-position: -512px -0px; }
#social-share ul li a.myspace:hover {background-position: -512px -33px;}
#social-share ul li a.more    {background-position: -576px -0px; }
#social-share ul li a.more:hover  {background-position: -576px -33px;}

5. Dan paste di atas kode

]]></b:skin>

6. Selanjutnya cari kode ini dengan tombol F3

<data:post.body/>

7. Dan copy lagi code dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='social-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. Simpan template sobat

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait