Cara Buat Tombol Share Dengan Efek jQuery Nudging ~ Libra Blog

Cara Membuat Tombol Share Media Social Bookmarking| Tombol Share widget menggunakan jQuery nudging ini adalah salah satu widget media social seperti twitter, facebook, yahoo, dll. Tetapi disini saya menggunakan gambar/ikon sehingga terlihat menarik dan unik. Icon sharing widget yang ada di Libra Blog ini, terdiri dari beberapa situs social media yang umum dipakai oleh orang untuk membagikan artikel yang bermanfaat ke sahabat mereka. Dan widget script jQuery yang saya share ini, tidak berat ketika di loading. Script jQuery ini sangat ringan dan saya pun memakai script ini pada sharing widget di blog ini, jadi jangan khawatir untuk memasang script jQuery pada blog sobat.

Sebelum kita memasang ikon sharing widget ini ada baiknya anda back up template terlebih dahulu untuk jaga-jaga agar tidak terjadi error. Untuk Screenshot, sobat bisa lihat diakhir artikel ini.

Login ke Blogspot sobat.
Masuk ke Template > Edit Html.
Centang pada "Expand Widget Templates"
Cari kode ]]></b:skin>
Copy kode dibawah ini dan paste tepat dibawah kode ]]></b:skin>

Gunakan CTRL+F kemudian cari kode <b:if cond='data:post.hasJumpLink'> setelah ketemu kemudian diatas kode tersebut akan ada kode: <div style='clear: both;'/> </div>
Copy code dibawah ini dan paste tepat diatas kode: <div style='clear: both;'/> </div>

<br/> <b:if cond='data:blog.pageType == "item"'><b>Bagikan ke Teman Anda</b><br /> <br /> <table border='0'> <tr> <td><script type='text/javascript'> window.___gcfg = {lang: 'en'}; (function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();</script><g:plusone size="standard"></g:plusone></td> <td><div class='bookmarks'> <a class='nudge' expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguRdUtA7Xku6dhfwZgcfeAXLBixHjaJiziEmurSrGym7vnXpNCU0rKgYUzLqyk_EI7Tj2PVZR_X_ZhUHOAzD7HsBb6yXohyG7bFfbXj0sqNtWorz28WLe6JjzPU2KpTHLp4gNXVTWa5Xc/s1600/facebook.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Facebook'/></a> <a class='nudge' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&amp;url=" + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1SH0pDGzazr3uX-zJlyaNxH9JoL3cpaZiMxbxpL4Vc-bnH2KFZw0GH75z5Z2_Os6J9RQ40fBG8ZbKkjzCO07-6aXetF6sxuch2Iqhzk25piw0lmsKEj_EoFrTUjFvr1VeP1e44VV_0c/s1600/twitter.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share this post on twitter'/></a> <a class='nudge' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvfluDjH1Pcm2Wn9TklGchFcdhX_iLD-muSuqSNf1Jq-lSSFw_2q1A0Ni88yuJy-orggNrgtxHFkCPuF9fiCHUZBMIoXTvBZqpbfkS62u2jhBXaREZXOXP1XN5lhgOmceIuvZ-aK2mG1o/s1600/delicious.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Bookmark on Delicious'/></a> <a class='nudge' expr:href='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkIhKfb2UdbDLMISShTEanZf1Qzrydj6jPhO0yZpHZqGxV_QfJQNfwqK3t2pvAKits4NCAVDA_2URh89xXSC3SO9VQUElLQeftpIlphBLuCqRf1TCMhP7oi2FHQ9-55YYxow8AJyteHQ/s1600/digg.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Digg This'/></a> <a class='nudge' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY_nTOW_NTwvstvtEghJ6nkav0aL-3QQ5oRSaRZ1y4gP1FX9RLzBPASItsm4isVRKmwnE5pfZU-j7S4uKP3Imowd8EkOPTWTZ4CKAFT53umdCFPbJpHTnKuZACuVZJ1gh3YvguU_4Od6E/s1600/stumbleupon.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Stumble This'/></a> <a class='nudge' expr:href='" http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9vsTl6ndnCZtqNyuqb8Kl1pVcqzQWB6sCT2s1SBjXVTLgsbym4N4I3FMWHZOUdUcssm5S1OMJ4bRr84TLq9EuzjFxustLEZfWtkzbBlQ4LdM08mV5c6qnDR34Btfo8ujW7XbwrW5oGA/s1600/reddit.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Share to Reddit'/></a> <a class='nudge' expr:href='" http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIaUawHbFuEjYcwp52qBn-CxoztYwIVgGz5u2-cPpbfLpBTbFOtPMJk1iUkjNcgKo7VFoVDkM9fYw-TV_804KRoPsYKnipwY4iv9yo7jQxTjrhGfM2edmJaaSSamuIxYotMNa0Ky9eTc/s1600/yahoo.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Yahoo Bookmark'/></a> <a class='nudge' expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAydg5ujllz95cSi0MtsHlqC4zbyD1VvT4GZamYmUcHprN7yT5u7UDJ78IETCZevzAJub_5gir4QRrk_30hT7nDZyvSiF5p5OirLMS5LvNNb4Eaddoleh1c0yaagrxEH5hg6mVI_QVWUs/s1600/furl.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Send to Furl/Diigo'/></a> <a class='nudge' expr:href='" http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmeSQ0Pq-xKGuKJh4-eYFrlZKFhffDJ88VzHuV879fVB2BVQzPONsQim6tF2jzx4X7LcQDj94EBisImLfdbW69heJWWBRySE_IUPRbObF3b2KNGhbFCr3tfXnwnyWlDj7WmCI-TgCHhcs/s1600/google.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Google Bookmark'/></a> <a class='nudge' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrtMpu8upBNrNbIjjD5IUsati9_n1Q_EziTbTNmM5a-V6oJKyoxHOVxM0TERJqdv8WvZbj9VzPD0E-W_dU_O9C69uj6ATUEe49aeSowEAt6PRf6NXtsWCXeD_TVKTsaxcESutMDLN6T4/s1600/technorati.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Add to Technorati'/></a> <a class='nudge' expr:href='" http://www.newsvine.com/_tools/seed&amp;save?u=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxZawDXdyBJHTw0j29F3Y-VN3FTrVmDZs0bSrGJl2org0bsks-yj21-TvaxqTKItRvgewxVzC0DyGAvVhNSs3F23-lRHtBExXCQPkmrxUvFw-Bj5kgnAE_Rk_9BsJQoiTOOQP_3Yw7yaI/s1600/newsvine.png' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;' title='Save to Newsvine'/></a> <a class='nudge' href='http://bloggerpeer.blogspot.com' target='_blank'><img alt='Tips Triks Blogger, Tutorial SEO, Info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLnCm1zLc4W9n5pJjLf3Lw6NsrSTj18ZSzcKcMD7f0CwCp6x6yIKcm2kgxWfR7jgRY8sEeoXyMHQvce56Bkr-ggNHLMXfWE6PUhH61Lc4_6yMFcACB8r1bS3ybdAezEfTvbY9czTIEQqI/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div> </td></tr> </table> </b:if>

PENTING:

Karena GOOGLE CHROME melakukan update, tombol share dengan efek NUDGING ini tidak dapat bekerja dengan baik jika dibuka menggunakan browser GOOGLE CHROME. Saran saya, lebih baik gunakan tombol share ini tanpa efek NUDGING demi kenyamanan pembaca Blog sobat.

CARANYA: Jangan memasang kode script yang dibawah kode ]]></b:skin> atau skip saja kode itu, kemudian lanjutkan dengan kode yang kedua dan terakhir simpan template.

Semoga bermanfaat...