Sebelum Saya tuliskan panduan tentang "Bagaimana Cara Pasang Sexy Bookmark V3 with Jquery Auto-Hide", Saya ingin memberi tahukan bahwa Tutorial ini saya ambil dari sini , dan kemudian saya tulis ulang dengan gaya atau style Saya sendiri ^_^, jika sobat ingin membaca sumbernya langsung silakan kunjungi (Way2blogging) Add Sexy Auto Hide Social Bookmarking Widget (V3), siapa tahu ingin membaca dari sumbernya langsung. Oke langsung saja abad ini, tahun ini, bulan ini,minggu ini, hari ini, jam ini, menit ini, detik ini .... (Kumat nih si ADMIN) HaHaHa ~Tutorial Pasang Sexy Social Bookmarking Auto Hide (V3) With Jquery Untuk Semua Website :
1. Login ke Akun Blog sobat --> Klik Menu Rancangan / Design
2. Klik Menu "Edit HTML"
3. Klik tulisan / menu Lanjutkan
4. Beri Centang Pada Bagian Expand Template Widget (Jangan Sampai Lupa)
5. Silakan cari kode </head> Kemudian masukkan kode berikut tepat di atasnya :
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js
type=text/javascript />
<link href=http://bloggerblogwidgets.googlecode.com/svn/trunk/auto-hide-social-bookmarking-way2blogging.css
rel=stylesheet type=text/css />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(.sexy-bookmarks a.external).attr("target", "_blank");
var sexyBaseHeight = jQuery(.sexy-bookmarks).height();
var sexyFullHeight = jQuery(.sexy-bookmarks ul.socials).height();
if (sexyFullHeight > sexyBaseHeight) {
jQuery(.sexy-bookmarks-expand).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight + 15 + px
}, {
duration: 800,
queue: false
});
}, function() {
jQuery(this).animate({
height: sexyBaseHeight + px
}, {
duration: 800,
queue: false
});
});
}
if (jQuery(.sexy-bookmarks-center)) {
var sexyFullWidth = jQuery(.sexy-bookmarks).width();
var sexyBookmarkWidth = jQuery(.sexy-bookmarks:first ul.socials li).width();
var sexyBookmarkCount = jQuery(.sexy-bookmarks:first ul.socials li).length;
var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
jQuery(.sexy-bookmarks-center).css(margin-left, sexyLeftMargin + px);
}
});
</script>6. Setelah itu cari kode <data:post.body/> atau <div class=post-footer> Kemudian pasang kode berikut tepat dibawahnya :
<b:if cond=data:blog.pageType == "item">
<div id=post-width-w2b style=width:600px;>
<div class=sexy-bookmarks-bg-caring sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center >
<ul class=socials>
<li class=sexy-yahoomail>
<a class=external expr_href="http://compose.mail.yahoo.com/?Subject= " + data:post.title + "&body=Link:"+ data:post.url rel=nofollow title=Email this via Yahoo! Mail/>
</li>
<li class=sexy-gmail>
<a class=external expr_href="https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&su=" + data:post.title + "&body=Link:" + data:post.url rel=nofollow title=Email this via Gmail/>
</li>
<li class=sexy-twitter>
<a class=external expr_href="http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url rel=nofollow title=Tweet This!/>
</li>
<li class=sexy-facebook>
<a class=external expr_href="http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title onclick=window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false; rel=nofollow title=Share this on Facebook/>
</li>
<li class=sexy-linkedin>
<a class=external expr_href="http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source=" rel=nofollow title=Share this on LinkedIn/>
</li>
<li class=sexy-googlebuzz>
<a class=external expr_href="http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl=" rel=nofollow title=Post on Google Buzz/>
</li>
<li class=sexy-yahoobuzz>
<a class=external expr_href="http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url + "&submitHeadline=" + data:post.title + "&submitSummary=&submitCategory=science&submitAssetType=text" rel=nofollow title=Buzz up!/>
</li>
<li class=sexy-blogger>
<a class=external expr_href="http://www.blogger.com/blog_this.pyra?t&u=" + data:post.url + "&n=" + data:post.title + "&pli=1" rel=nofollow title=Blog this on Blogger/>
</li>
<li class=sexy-googlebookmarks>
<a class=external expr_href="http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Add this to Google Bookmarks/>
</li>
<li class=sexy-googlereader>
<a class=external expr_href="http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcUrl=" + data:post.url + "&srcTitle=" + data:post.title + "&snippet=" rel=nofollow title=Add this to Google Reader/>
</li>
<li class=sexy-stumbleupon>
<a class=external expr_href="http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Stumble upon something good? Share it on StumbleUpon/>
</li>
<li class=sexy-delicious>
<a class=external expr_href="http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Share this on del.icio.us/>
</li>
<li class=sexy-digg>
<a class=external expr_href="http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Digg this!/>
</li>
<li class=sexy-comfeed>
<a class=external expr_href=data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default?alt=rss" rel=nofollow title=Subscribe to the comments for this post?/>
</li>
<li class=sexy-orkut>
<a class=external expr_href="http://promote.orkut.com/preview?nt=orkut.com&tt=" + data:post.title + "&du=" + data:post.url + "&cn=" rel=nofollow title=Promote this on Orkut/>
</li>
<li class=sexy-designbump>
<a class=external expr_href="http://designbump.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body=" rel=nofollow title=Bump this on DesignBump/>
</li>
<li class=sexy-reddit>
<a class=external expr_href="http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Share this on Reddit/>
</li>
<li class=sexy-designfloat>
<a class=external expr_href="http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Submit this to DesignFloat/>
</li>
<li class=sexy-friendfeed>
<a class=external expr_href="http://www.friendfeed.com/share?title=" + data:post.title + "&link=" + data:post.url rel=nofollow title=Share this on FriendFeed/>
</li>
<li class=sexy-zabox>
<a class=external expr_href="http://www.zabox.net/submit.php?url=" + data:post.url rel=nofollow title=Box this on Zabox/>
</li>
<li class=sexy-dzone>
<a class=external expr_href="http://www.dzone.com/links/add.html?url=" + data:post.url + "&title=" + data:post.title + "&description=" rel=nofollow title=Add this to DZone/>
</li>
<li class=sexy-webblend>
<a class=external expr_href="http://thewebblend.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body=" rel=nofollow title=Blend this!/>
</li>
<li class=sexy-propeller>
<a class=external expr_href="http://www.propeller.com/submit/?url=" + data:post.url rel=nofollow title=Submit this story to Propeller/>
</li>
<li class=sexy-tumblr>
<a class=external expr_href="http://www.tumblr.com/share?v=3&u=" + data:post.url + "&t=" + data:post.title rel=nofollow title=Share this on Tumblr/>
</li>
<li class=sexy-squidoo>
<a class=external expr_href="http://www.squidoo.com/lensmaster/bookmark?" + data:post.url rel=nofollow title=Add to a lense on Squidoo/>
</li>
<li class=sexy-posterous>
<a class=external expr_href="http://posterous.com/share?linkto=" + data:post.url + "&title=" + data:post.title + "&selection=" rel=nofollow title=Post this to Posterous/>
</li>
<li class=sexy-technorati>
<a class=external expr_href="http://technorati.com/faves?add=" + data:post.url rel=nofollow title=Share this on Technorati/>
</li>
<li class=sexy-hotmail>
<a class=external expr_href="http://mail.live.com/?rru=compose?subject=" + data:post.title + "&body=Link: " + data:post.url rel=nofollow title=Email this via Hotmail/>
</li>
<li class=sexy-bebo>
<a class=external expr_href="http://www.bebo.com/c/share?Url=" + data:post.url + "&Title=" + data:post.title rel=nofollow title=Share this on Bebo/>
</li>
<li class=sexy-bitacoras>
<a class=external expr_href="http://bitacoras.com/anotaciones/" + data:post.url rel=nofollow title=Submit this to Bitacoras/>
</li>
<li class=sexy-blinklist>
<a class=external expr_href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title rel=nofollow title=Share this on Blinklist/>
</li>
<li class=sexy-100zakladok>
<a class=external expr_href="http://www.100zakladok.ru/save/?bmurl=" + data:post.url + "&bmtitle=" + data:post.title rel=nofollow title=Add this to 100 bookmarks/>
</li>
<li class=sexy-blogengage>
<a class=external expr_href="http://www.blogengage.com/submit.php?url=" + data:post.url rel=nofollow title=Engage with this article!/>
</li>
<li class=sexy-blogmarks>
<a class=external expr_href="http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Mark this on BlogMarks/>
</li>
<li class=sexy-bobrdobr>
<a class=external expr_href="http://bobrdobr.ru/addext.html?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Share this on BobrDobr/>
</li>
<li class=sexy-bonzobox>
<a class=external expr_href="http://bonzobox.com/toolbar/add?pop=1&u=" + data:post.url + "&t=" + data:post.title + "&d=" rel=nofollow title=Add this to BonzoBox/>
</li>
<li class=sexy-boxnet>
<a class=external expr_href="https://www.box.net/api/1.0/import?url=" + data:post.url + "&name=" + data:post.title + "&description=&import_as=link" rel=nofollow title=Add this link to Box.net/>
</li>
<li class=sexy-current>
<a class=external expr_href="http://current.com/clipper.htm?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Post this to Current/>
</li>
<li class=sexy-diigo>
<a class=external expr_href="http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title + "&desc=" rel=nofollow title=Post this on Diigo/>
</li>
<li class=sexy-ekudos>
<a class=external expr_href="http://www.ekudos.nl/artikel/nieuw?url=" + data:post.url + "&title=" + data:post.title + "&desc=" rel=nofollow title=Submit this to eKudos/>
</li>
<li class=sexy-evernote>
<a class=external expr_href="http://www.evernote.com/clip.action?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Clip this to Evernote/>
</li>
<li class=sexy-faqpal>
<a class=external expr_href="http://www.faqpal.com/submit?url=" + data:post.url rel=nofollow title=Submit this to FAQpal/>
</li>
<li class=sexy-fwisp>
<a class=external expr_href="http://fwisp.com/submit?url=" + data:post.url rel=nofollow title=Share this on Fwisp/>
</li>
<li class=sexy-globalgrind>
<a class=external expr_href="http://globalgrind.com/submission/submit.aspx?url=" + data:post.url + "&type=Article&title=" + data:post.title rel=nofollow title=Grind this! on Global Grind/>
</li>
<li class=sexy-hackernews>
<a class=external expr_href="http://news.ycombinator.com/submitlink?u=" + data:post.url + "&t=" + data:post.title rel=nofollow title=Submit this to Hacker News/>
</li>
<li class=sexy-hatena>
<a class=external expr_href="http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Bookmarks this on Hatena Bookmarks/>
</li>
<li class=sexy-hyves>
<a class=external expr_href="http://www.hyves.nl/profilemanage/add/tips/?name=" + data:post.title + "&text=Text about this site+-+" + data:post.url + "&rating=5" rel=nofollow title=Share this on Hyves/>
</li>
<li class=sexy-identica>
<a class=external expr_href="http://identi.ca//index.php?action=newnotice&status_textarea=Reading:" + data:post.title + "+-+from+" + data:post.url rel=nofollow title=Post this to Identica/>
</li>
<li class=sexy-izeby>
<a class=external expr_href="http://izeby.com/submit.php?url=" + data:post.url rel=nofollow title=Add this to Izeby/>
</li>
<li class=sexy-jumptags>
<a class=external expr_href="http://www.jumptags.com/add/?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Submit this link to JumpTags/>
</li>
<li class=sexy-kaevur>
<a class=external expr_href="http://kaevur.com/submit.php?url=" + data:post.url rel=nofollow title=Share this on Kaevur/>
</li>
<li class=sexy-mail>
<a class=external expr_href="mailto:?subject=%22" + data:post.title + "%22&body=Link: " + data:post.url + " (sent via Way2blogging) " rel=nofollow title=Email this to a friend?/>
</li>
<li class=sexy-memoryru>
<a class=external expr_href="http://memori.ru/link/?sm=1&u_data[url]=" + data:post.url + "&u_data[name]=" + data:post.title rel=nofollow title=Add this to Memory.ru/>
</li>
<li class=sexy-meneame>
<a class=external expr_href="http://meneame.net/submit.php?url=" + data:post.url rel=nofollow title=Submit this to Meneame/>
</li>
<li class=sexy-misterwong>
<a class=external expr_href="http://www.mister-wong.com/addurl/?bm_url=" + data:post.url + "&bm_description=" + data:post.title + "&plugin=sexybookmarks" rel=nofollow title=Add this to Mister Wong/>
</li>
<li class=sexy-moemesto>
<a class=external expr_href="http://moemesto.ru/post.php?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Add this to MyPlace/>
</li>
<li class=sexy-mylinkvault>
<a class=external expr_href="http://www.mylinkvault.com/link-page.php?u=" + data:post.url + "&n=" + data:post.title rel=nofollow title=Store this link on MyLinkVault/>
</li>
<li class=sexy-myspace>
<a class=external expr_href="http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title rel=nofollow title=Post this to MySpace/>
</li>
<li class=sexy-n4g>
<a class=external expr_href="http://www.n4g.com/tips.aspx?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Submit tip to N4G/>
</li>
<li class=sexy-netvibes>
<a class=external expr_href="http://www.netvibes.com/share?title=" + data:post.title + "&url=" + data:post.url rel=nofollow title=Submit this to Netvibes/>
</li>
<li class=sexy-netvouz>
<a class=external expr_href="http://www.netvouz.com/action/submitBookmark?url=" + data:post.url + "&title=" + data:post.title + "&popup=no" rel=nofollow title=Submit this to Netvouz/>
</li>
<li class=sexy-newsvine>
<a class=external expr_href="http://www.newsvine.com/_tools/seed&save?u=" + data:post.url + "&h=" + data:post.title rel=nofollow title=Seed this on Newsvine/>
</li>
<li class=sexy-ning>
<a class=external expr_href="http://bookmarks.ning.com/addItem.php?url=" + data:post.url + "&T=" + data:post.title rel=nofollow title=Add this to Ning/>
</li>
<li class=sexy-nujij>
<a class=external expr_href="http://nujij.nl/jij.lynkx?t=" + data:post.title + "&u=" + data:post.url + "&b=" rel=nofollow title=Submit this to NUjij/>
</li>
<li class=sexy-oknotizie>
<a class=external expr_href="http://oknotizie.virgilio.it/post?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Share this on OkNotizie/>
</li>
<li class=sexy-pfbuzz>
<a class=external expr_href="http://pfbuzz.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Share this on PFBuzz/>
</li>
<li class=sexy-pingfm>
<a class=external expr_href="http://ping.fm/ref/?link=" + data:post.url + "&title=" + data:post.title + "&body=" rel=nofollow title=Ping this on Ping.fm/>
</li>
<li class=sexy-plaxo>
<a class=external expr_href="http://www.plaxo.com/?share_link=" + data:post.url rel=nofollow title=Share this on Plaxo/>
</li>
<li class=sexy-plurk>
<a class=external expr_href="http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+" + data:post.url + "&qualifier=shares" rel=nofollow title=Share this on Plurk/>
</li>
<li class=sexy-printfriendly>
<a class=external expr_href="http://www.printfriendly.com/print?url=" + data:post.url rel=nofollow title=Send this page to Print Friendly/>
</li>
<li class=sexy-pusha>
<a class=external expr_href="http://www.pusha.se/posta?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Push this on Pusha/>
</li>
<li class=sexy-scriptstyle>
<a class=external expr_href="http://scriptandstyle.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Submit this to Script & Style/>
</li>
<li class=sexy-slashdot>
<a class=external expr_href="http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Submit this to SlashDot/>
</li>
<li class=sexy-sphinn>
<a class=external expr_href="http://sphinn.com/index.php?c=post&m=submit&link=" + data:post.url rel=nofollow title=Sphinn this on Sphinn/>
</li>
<li class=sexy-springpad>
<a class=external expr_href="http://springpadit.com/clip.action?body=&url=" + data:post.url + "&format=microclip&title=" + data:post.title + "&isselected=true" rel=nofollow title=Spring this on SpringPad/>
</li>
<li class=sexy-strands>
<a class=external expr_href="http://www.strands.com/tools/share/webpage?title=" + data:post.title + "&url=" + data:post.url rel=nofollow title=Submit this to Strands/>
</li>
<li class=sexy-stumpedia>
<a class=external expr_href="http://www.stumpedia.com/submit?url=" + data:post.url + "&title=" + data:post.title rel=nofollow title=Add this to Stumpedia/>
</li>
<li class=sexy-techmeme>
<a class=external expr_href="http://twitter.com/home/?status=Tip+@Techmeme+" + data:post.url + "--" + data:post.title + "&source=Way2blogging" rel=nofollow title=Tip this to TechMeme/>
</li>
<li class=sexy-tipd>
<a class=external expr_href="http://tipd.com/submit.php?url=" + data:post.url rel=nofollow title=Share this on Tipd/>
</li>
<li class=sexy-tomuse>
<a class=external expr_href="mailto:tips@tomuse.com?subject=" + data:post.title + "&body=Link: " + data:post.url rel=nofollow title=Suggest this article to ToMuse/>
</li>
<li class=sexy-twittley>
<a class=external expr_href="http://twittley.com/submit/?title=" + data:post.title + "&url=" + data:post.url + "&desc=&pcat=Technology&tags=" rel=nofollow title=Submit this to Twittley/>
<