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>
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() {
$('a.nudge, .#Label2 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 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='" 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='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='"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='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='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + 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='" http://digg.com/submit?url=" + data:post.url + "&amp;title=" + 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='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + 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='" http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + 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='" 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='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='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + 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='" 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='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='" http://technorati.com/faves?add=" + data:post.url + "&amp;title=" + 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='" 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='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.
How To Change Blogger Background
ReplyDeleteBest Free Seo Tools to Optimize Your Blog
Profitable for your business - Guest Blogging
What Function Margin at Your CSS / Tips For Beginner
How to Host Jquery Script in Blogger / Blogspot
How to Earn Money with Chatika, Clicksor & Adhitz Learn in Urdu
How to Reduce site/blog Loading Speed Time?
Social Media & Email Subscription Box For Blogger
SiteMap
How to Make / Install Back To Top Button With
NoFollow | Understanding tag (rel = "nofollow") Attribute
Change Blog's Background Color Automatically with JavaScript
How to Make a Box Convert / Parse HTML and Functions
how to increase visitors easily to 2000
How to Make 2 Column Element in Lower Post
How To Add Message Box Like Wordpress With Close Button
RSS Feed Directories List
Mantap gan... udah ane coba.. work 100 %
ReplyDeleteVisit my Blog
http://yadi000.blogspot.com/
Ok Gan Thank Atas kunjungannya, happy blogging aja sob
Delete