jQuery Fade Effect Social Share

jQuery Fade Effect Social Share - Menu share dibawah artikel itu sangat berguna sekali untuk blog . Siapa tahu saja setelah pengunjung blog membaca artikel kita merasa puas dan ingin membagikan tutorial atau artikel kita ke media sosial kan kita jadi lebih terbantu menyebarkan url dan artikel . Dan semakin banyak orang yang men-share artikel kita , maka akan semakin banyak juga orang yang berkunjung ke blog kita . Dengan begitu selain trafik membludak , rank juga menyusust dan itu istimewa . 

Nah dikesempatan ini saya akan share cara membuat Sosial Share dengan efek jQuery yang cantik . JIka anda tertarik untuk membuatnya , silahkan ikui panduannya dibawah ini .

Cara membuat jQuery Fade Effect Social Share
1. Login ke Blogger,
2. Template - Template HTML,
3. Jangan lupa ceklist - Expand Template Widget
4. Selanjutnya, gunakan ctrl-f untuk menemukan kode berikut,
]]></b:skin>
5. Tempelkan Css dibawah ini setelah kode diatas

/***********************************
*     SOCIAL ICONS - GENERAL        *
***********************************/
.social h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #121621; text-shadow: 0px 2px 6px #333; }
.social h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #000000; }
.social h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #312400; text-shadow: 0px 2px 6px #333; }
.social h2 a:hover { color: #AF7F00; }
.social h3 { clear:both; padding:20px 0 0 60px; }
.social p { padding:5px 10px; }
.social a { color:#AF7F00; text-decoration:underline; }
.social a:hover { text-decoration:none; }
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("http://4.bp.blogspot.com/-zUan6A92JeA/TiUbPKzwzmI/AAAAAAAAAts/8M1Q7AwXmz0/s1600/delicious.png"); }
li.digg { background-image:url("http://4.bp.blogspot.com/--lDMLfECjh4/TiUbQva9N2I/AAAAAAAAAtw/Cor5ZqCYZ9E/s1600/digg.png"); }
li.facebook { background-image:url("http://2.bp.blogspot.com/-akGfIQmw9p8/TiUbTNuRFWI/AAAAAAAAAt0/h5m8rR9Rm0Q/s1600/facebook.png"); }
li.flickr { background-image: url("http://3.bp.blogspot.com/-sn54AapCSSk/TiUbVYGWDvI/AAAAAAAAAt4/ocvrRwswQgc/s1600/flickr.png"); }
li.linkedin { background-image:url("http://4.bp.blogspot.com/-nYO1oqTAOoE/TiUbXbytZpI/AAAAAAAAAt8/lb9unT3_tcc/s1600/linkedin.png"); }
li.reddit { background-image:url("http://1.bp.blogspot.com/-5Gg1c8k6ZZo/TiUbZFxMaDI/AAAAAAAAAuA/ZXnbTGTnQ5k/s1600/reddit.png"); }
li.rss { background-image:url("http://1.bp.blogspot.com/-kcETipqBWK4/TiUbbFOrJhI/AAAAAAAAAuE/g_ipVzoQCOE/s1600/rss.png"); }
li.twitter { background-image:url("http://3.bp.blogspot.com/-BkeWOjtdI7s/TiUc3hVX-bI/AAAAAAAAAuI/3_FpFhoIPRI/s1600/twitter.png"); }

6. Selanjutnya cari kode <data:post.body/>
7. Kemudian letakkan Script dibawah ini tepat dibawahnya .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class="social" id="jquery">
<li class="delicious">
<a href="http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="digg">
<a href="http://digg.com/submit?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?u=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="flickr">
<a href="http://www.flickr.com/people/59053382@N04/"></a>
</li>
<li class="linkedin">
<a href="http://www.linkedin.com/"></a>
</li>
<li class="reddit">
<a href="http://www.reddit.com/submit?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
<li class="rss">
<a href="http://feeds.feedburner.com/JqueryShareBookmark"></a>
</li>
<li class="twitter">
<a href="http://twitthis.com/twit?url=%22%20+%20data:post.url%20+%20%22&amp;title=%22%20+%20data:post.title"></a>
</li>
</ul>
</b:if> 

Simpan template dan lihat hasilnya dibawah posting anda .

Kode <data:post.body/> biasanya lebih dari 1 , tempelkan script diatas di semua kode tersebut .

Semoga bermanfaat .