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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGjaEAKPR-mB5NpM0iKX57CGmuVKm2gpnwfXabK8DRkeYhh9pgqVRajxe6Mjrji31UiIEQe7XjDpeuLSuzTHB8uCCbGuWrueu2z8ZvNyuQr_06z2nggOApMgh5luDd4s_3GzTx2pfGwt4/s1600/delicious.png"); }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQr2jtRoUmH_sSFvgWZ6qp6Hkh-CO45S9F8IpCu4ggzrmtr8S9YVKeXxcKR6ikuj9_s3Ec_Ul7kXLMtWc-sf4WZaaTgqUckrd95SPBhK0jhChOwnaGPMD3Ra02E18glf7JDKeP6UOwynE/s1600/digg.png"); }
li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4Zznwix0oChsHs_i0i4bAXkaSBIwGON3oIQq6ng0S-M_3A5vu1jPIaF1KV40yMXfPA17HbjZhVtoMuuNpfbyWHB66LDZBFp2vCoz4c_Z0tVHkTmdmgvCu8OjXAMKE8NEMe6vsF-WM8Q/s1600/facebook.png"); }
li.flickr { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQg01A5Ou3W1Jw8SIYqorTMt9rsJBDU8T57kcqZrnE7T4-96DMBio3KIOyYiTSLl9X7AE-cc3ABjRxGioG_oF1U8B-2GxxQDzXEilibbRpE1TBpjnrOmxeTM6YOHeiUQrZstSHMCCORRs/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDzbdbKqSxQLf24e2aWAPZIssJumycwf3uk62KiTRORb1MXXMNU90GLYf7-Oy6LfQnaL-m2xxMuyzjksTt-kAMATAx3_kaKbcvYVMfjy8AlspJW2vL1jHD0cVTvQ2LFlGUo2DQ0mqn9hw/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisOtwXpSEKsa9tI5kE3EjZHumxbafvNUFzf69dXq8iSqrHJJFHtna9FgslOlv84Fyu63iQ5YdKd0Zcr9vphLo2FxpVyPQG-R5NMhu95HxcjUlPeoVLATTsn-tcpb1Y0vbnPVMpFfO1_bw/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJsUp7mVDXjIikEDvj_-VTX1xvqqUcMuTtjuI10yf_Osjy1j8_E92pud9N70R-6dQstt5fA1Oxl6Qp-qy0yKVDQnBUYj9NJgme8-L4n72Ffv2qwcrrbf7CfujzvEMzvQlAwDBjjhJ5uo/s1600/rss.png"); }
li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Y4b8jmEqeOWa7VsjU3ey3YWeDXSz-s7KaQxLYepG5aB2PPzFNIdEWb-Ab38RdZ-qErG-h5q_4RIVYCOk_8o4DWnXTeL1INJBCJxG2V93xqNtv5YQBi7l4X3beiLLDQOCYoBeD8QHk8A/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 .