Membuat Kotak Share Sosial Bookmark Bergoyang

Setelah beberapa waktu Kolom Tutorial™ menyajikan tutorial Membuat Kotak Share Sosial Bokkmark Sekarang akan mencoba dengan versi yang berbeda yakni menggunakan jQuery kotak ini akan mampu bergoyang ria ( Kaya penyanyi dangsut aja ya gan pake bisa goyang-goyang segala, hehhehhehhh)
Ok gan trik kali ini Membuat Kotak Share Sosial Bookmark Bergoyang ala Kolom Tutorial™ hehhehheh........ yang kurang lebih previewnya seperti gambar dibawah ini :

Caranya :
1. Seperti biasa Login Dule ke Akun Blogger Sobat
2. Klik Template >> Edit HTML >> Lanjutkan
3. Centang Expand Template Widget
4. Copy kode dibawah ini dan paste tepat dibawah kode :  ]]></b:skin>

<script src='http://joens-tutorial.googlecode.com/files/membuat-kotak-share-keren1.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;a.nudge, .#Label2 ul li a&#39;).hover(function() { //mouse in $(this).animate({ marginLeft: &#39;12px&#39; }, 400); }, function() { //mouse out $(this).animate({ marginLeft: 0 }, 400); }); }); </script><!-- end LinkNudging --><!-- end LinkNudging -->

5. Kemudian cari kode : <div style='clear: both;'/> <!-- clear for photos floats --></div>
6. Selanjutnya kopi paste kode dibawanh ini tepat diatas kode no. 5

<br/> <b:if cond='data:blog.pageType == "item"'><b>Share it to your friends..!</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 = "http://joens-tutorial.googlecode.com/files/membuat-kotak-share-keren.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='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share to Facebook' src='http://2.bp.blogspot.com/-Bjxivdx4Azg/TsneN3ItsTI/AAAAAAAAAMI/ygYBWbfORxI/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='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;amp;url=&quot; + data:post.url ' rel='nofollow' target='_blank'><img alt='Share this post on twitter' src='http://4.bp.blogspot.com/-gB18pm9OzGE/TsneK8uZtlI/AAAAAAAAALw/_Rnw2bHcpcY/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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Bookmark Delicious' src='http://2.bp.blogspot.com/-xZtyneGyu4s/TsneLtxn3hI/AAAAAAAAAL8/FIuGjncowpI/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='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This' src='http://2.bp.blogspot.com/-jrRw0qsa12Y/TsneM2mbsCI/AAAAAAAAAME/OGBU5r59U-M/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='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumbleupon' src='http://4.bp.blogspot.com/-DtdQdECw9z8/TsneKJjDJcI/AAAAAAAAALs/2Fc7sT6ZeXk/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='&quot; http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://2.bp.blogspot.com/-6NV19GxLpiQ/TsneJm8LY9I/AAAAAAAAALk/Tx0g38kRsUQ/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='&quot; http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Yahoo Bookmark' src='http://3.bp.blogspot.com/-6FEtH2vQ280/Tsnn-YMSTII/AAAAAAAAAM0/33gA7rF0FyE/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='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Furl-Diigo' src='http://3.bp.blogspot.com/-K6BEmvygn7o/Tsno3TTMdBI/AAAAAAAAAM8/XZi8ZaROhp0/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='&quot; http://www.google.com/bookmarks/mark?op=edit&amp;amp;output=popup&amp;amp;bkmk=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Google Bookmark' src='http://1.bp.blogspot.com/-EZGUZe7eo1o/TsnmvhkihKI/AAAAAAAAAMs/fF9jkv9gUbE/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='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/-oA0JsIPtAjM/Tsnk_1krq-I/AAAAAAAAAMk/0vVdloHf_xY/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='&quot; http://www.newsvine.com/_tools/seed&amp;amp;save?u=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Newsvine' src='http://4.bp.blogspot.com/-K9epinfY_UI/TsnsoQq9zAI/AAAAAAAAANM/JVK8ZmwRJeI/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='http://3.bp.blogspot.com/-O-6Kv8TfxS4/UCIcaSSXpqI/AAAAAAAAATY/j9Yt46RLm1M/s1600/blogger-peer.gif' style='border: 0px; margin: 0 0 5 0; padding: 0 0 0 0;'/></a></div> </td></tr> </table> </b:if>

Kemudian Simpan Template Anda dan lihat hasilnya dibawah postingan.

Alex Joen

Blogger pemula yang tidak banyak tau tentang dunia blogger, namun hoby yang membuat saya mengelola blog ini. Terimakasih banyak atas kunjungannya, salam silaturahim.

Share this post