Trick jQuery Social Bookmark Fade Effect ~ HMC l Informasi Komputer, Jaringan And Software

Tutorial blogger kali ini Kang Koisine akan berbagi Social Bookmark dengan Fade Effect. Social bookmark ini sangat penting karena dapat menerbitkan suatu artikel ke situs jejaring sosial seperti Facebook, Twitter, dll, siapa tau setelah menerbitkan artikel ke jejaring sosial banyak orang yang melihat dan mengklik artikel yang ada pada situs jejaring tersebut, berarti pengunjung blog akan bertambah dan rank pun meningkat, bagaimana cara membuatnya ?

Caranya :

Login ke Blogger,
Template - Template HTML,
Jangan lupa ceklist - Expand Template Widget
Selanjutnya, gunakan ctrl-f untuk menemukan kode berikut,

]]></b:skin>

Setelah itu, letakan kode CSS di bawah ini sebelum kode yang sudah sobat temukan,

/***********************************
* 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/AVvXsEhZpZvGLMQfIcQiGzIOf9OncsZpzUPBUTPSaeoik42_nLSCTxIMMt-45WAqyK795vFRAZcd26PNV22ctGIiXM8RaWuj6zqayMqaArJytv8CBeLdmJqA-nyhbVRQV4u6bP9A0gC6g-4E38w/s1600/delicious.png"); }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ewbzJb9l5wWJhY2Iq5gWcuurEF1ExrIPd1ilfhh2pbl0Jfis4NLetBuqW6Nqvxfqj6lFuqk56RBgh3ZLgR7BC_31GcEPok72M2BQOd6hcc7bsJJEO6Hbx__FLxVPpMMWwUGqBdCsxFE/s1600/digg.png"); }
li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfpb4OjkB1LiNsLVzd935wsPidH-JwcmXBaFVlWbId3nMnRdwRooyAGqWkG1wxJi7v0W9Iom2iv_fcARZ6Z6z19BDkj2MHWEUl29LZg52rbCFH_ZlHYGoKDayl1brb_K4-BW93Or6VJk/s1600/facebook.png"); }
li.flickr { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40kxCyJEYZOf_pWumPuQFgvx28WDVsMJUgvzcsPzbUY7K3DNjic5ZKT9Xs8wS1QH3fFxlrgdaU8MxLbSck4D96LWJ0J4qk2nDBrJ3_iROtc74L9_AUoXxdzR_qGM_bmOhNmRFoMREnjA/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUbY7yZ2XdIw0qUvvghUKHy4uHFovZjajG9JGLlw_TITwncbbQd99XfdTEcbAgkw8OjUrtuiTLZIGlykOqaW5zW_jzfunCh7_fjAa-QDfm3fvtvw8v1BHdTz8uecR7LovAwXjJJ2TUqQY/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9MVJLJzn_FyEguvO76jydpm48gzpVuDJj6ycbQ9U8y3lb5MCppCgcLhbtez8CHPvkZsj-Kq9XT9MnpW2a6mlZUkvbfHVTpopVmQINU9u2jRHJYiPaWJ4XE-VLHlNG_QrUsQrq09J7tI/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2DppyvpKhFWkqrDoLx1_p1gVGFaV-RFm4P_MaCYjSLuBwIl2IlL-wdsUoJaGkvIT9_OLm_NzPPbl9RW_L8XdIZFsIhjqyl-kqMKbphoaAAluMvIR1bZbcpJdy-AXodSK4mFHnHmO6Gas/s1600/rss.png"); }
li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFZW9GStMaJh2GXqe36cAGSFWUK2wNHEmhYJ72vvrVH6w1twSQn0Vb3I3OYI6hKzm_-hieO18Vv8Qi6SISNSw7ImneFXJ8hk6-jlnyKc6zhtqownwr91Pj837GURNafYdjGTGLEGu3Ko/s1600/twitter.png"); }

Selanjutnya, gunakan ctrl-F untuk mencari kode yang sama seperti di bawah ini,

<data:post.body/>

Selanjutnya, letakan kode html di bawah ini sesudah kode yang sudah sobat temukan,

<b:if cond='data:blog.pageType == "item"'>
<ul class="social" id="jquery">
<li class="delicious">
<a href="http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&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&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&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&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&title=%22%20+%20data:post.title"></a>
</li>
</ul>
</b:if>