Selamat datang di Blog Nora'Creativity™; .Com

Cara Mudah Membuat Tombol Sharing Is Sexy Keren Dengan J-query

Senin, 10 September 20120 komentar

Ketemu lagi di blog Sederhana ini. Dan pada kesempatan kali ini saya akan membagikan cara membuat tombol sharing is sexy menggunakan j-query, sebelumnya saya sudah membuat postingan yang juga menggunakan J-query yaitu cara membuat Cara Mudah Tooltip dengan jQuery namun kali ini perbedaanya adalah, kita akan membuat Tombol Sharing Is Sexy Keren Dengan J-query dimana pada tombol share/Situs Bookmarknya itu jauh lebih banyak, namun yang nampak/terlihat hanya baris teratas/pertama jadi tidak terlalu memakan tempat, nah disinilah fungsi J-query yang akan menyembunyikan sebagian tombol dan akan terlihat setelah kursor diarahkan ke tombol tersebut.


Untuk mebuatnya, Silahkan ikuti langkah-langkah dibawah ini.

1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
3. Centang Expand Template Widget
4. Cari Kode </head>
5. Copy kode di bawah lalu paste di Bawah/Sesudah kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/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. Kemudian untuk menepatkannya di bawah postingan cari kode <data:post.body/>
7. Copy-Paste kode HTML di bawah ini tepat Sebelum/di bawah kode <data:post.body/>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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='&quot;http://compose.mail.yahoo.com/?Subject= &quot; + data:post.title + &quot;&amp;body=Link:&quot;+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
       </li>
       <li class='sexy-gmail'>
       <a class='external' expr:href='&quot;https://mail.google.com/mail/?ui=2&amp;view=cm&amp;fs=1&amp;tf=1&amp;su=&quot; + data:post.title + &quot;&amp;body=Link:&quot; + data:post.url' rel='nofollow' title='Email this via Gmail'/>
       </li>
       <li class='sexy-twitter'>
       <a class='external' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'/>
       </li>
       <li class='sexy-facebook'>
       <a class='external' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'/>
       </li>
       <li class='sexy-linkedin'>
       <a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'/>
       </li>
       <li class='sexy-googlebuzz'>
       <a class='external' expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'/>
       </li>
       <li class='sexy-yahoobuzz'>
       <a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url + &quot;&amp;submitHeadline=&quot; + data:post.title + &quot;&amp;submitSummary=&amp;submitCategory=science&amp;submitAssetType=text&quot;' rel='nofollow' title='Buzz up!'/>
       </li>
       <li class='sexy-blogger'>
       <a class='external' expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=1&quot;' rel='nofollow' title='Blog this on Blogger'/>
       </li>
       <li class='sexy-googlebookmarks'>
       <a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to Google Bookmarks'/>
       </li>
       <li class='sexy-googlereader'>
       <a class='external' expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcUrl=&quot; + data:post.url + &quot;&amp;srcTitle=&quot; + data:post.title + &quot;&amp;snippet=&quot;' rel='nofollow' title='Add this to Google Reader'/>
       </li>
       <li class='sexy-stumbleupon'>
       <a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'/>
       </li>
       <li class='sexy-delicious'>
       <a class='external' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/>
       </li>
       <li class='sexy-digg'>
       <a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'/>
       </li>
       <li class='sexy-comfeed'>
       <a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/&quot; + data:post.id + &quot;/comments/default?alt=rss&quot;' rel='nofollow' title='Subscribe to the comments for this post?'/>
       </li>
       <li class='sexy-orkut'>
       <a class='external' expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;tt=&quot; + data:post.title + &quot;&amp;du=&quot; + data:post.url + &quot;&amp;cn=&quot;' rel='nofollow' title='Promote this on Orkut'/>
       </li>
       <li class='sexy-designbump'>
       <a class='external' expr:href='&quot;http://designbump.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Bump this on DesignBump'/>
       </li>
       <li class='sexy-reddit'>
       <a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'/>
       </li>
       <li class='sexy-designfloat'>
       <a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to DesignFloat'/>
       </li>
       <li class='sexy-friendfeed'>
       <a class='external' expr:href='&quot;http://www.friendfeed.com/share?title=&quot; + data:post.title + &quot;&amp;link=&quot; + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/>
       </li>
       <li class='sexy-zabox'>
       <a class='external' expr:href='&quot;http://www.zabox.net/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Box this on Zabox'/>
       </li>
       <li class='sexy-dzone'>
       <a class='external' expr:href='&quot;http://www.dzone.com/links/add.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;description=&quot;' rel='nofollow' title='Add this to DZone'/>
       </li>
       <li class='sexy-webblend'>
       <a class='external' expr:href='&quot;http://thewebblend.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Blend this!'/>
       </li>
       <li class='sexy-propeller'>
       <a class='external' expr:href='&quot;http://www.propeller.com/submit/?url=&quot; + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/>
       </li>
       <li class='sexy-tumblr'>
       <a class='external' expr:href='&quot;http://www.tumblr.com/share?v=3&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Share this on Tumblr'/>
       </li>
       <li class='sexy-squidoo'>
       <a class='external' expr:href='&quot;http://www.squidoo.com/lensmaster/bookmark?&quot; + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/>
       </li>
       <li class='sexy-posterous'>
       <a class='external' expr:href='&quot;http://posterous.com/share?linkto=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;selection=&quot;' rel='nofollow' title='Post this to Posterous'/>
       </li>
       <li class='sexy-technorati'>
       <a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'/>
       </li>
       <li class='sexy-hotmail'>
       <a class='external' expr:href='&quot;http://mail.live.com/?rru=compose?subject=&quot; + data:post.title + &quot;&amp;body=Link: &quot; + data:post.url ' rel='nofollow' title='Email this via Hotmail'/>
       </li>
       <li class='sexy-bebo'>
       <a class='external' expr:href='&quot;http://www.bebo.com/c/share?Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title ' rel='nofollow' title='Share this on Bebo'/>
       </li>
       <li class='sexy-bitacoras'>
       <a class='external' expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url ' rel='nofollow' title='Submit this to Bitacoras'/>
       </li>
       <li class='sexy-blinklist'>
       <a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title ' rel='nofollow' title='Share this on Blinklist'/>
       </li>
       <li class='sexy-100zakladok'>
       <a class='external' expr:href='&quot;http://www.100zakladok.ru/save/?bmurl=&quot; + data:post.url + &quot;&amp;bmtitle=&quot; + data:post.title ' rel='nofollow' title='Add this to 100 bookmarks'/>
       </li>
       <li class='sexy-blogengage'>
       <a class='external' expr:href='&quot;http://www.blogengage.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Engage with this article!'/>
       </li>
       <li class='sexy-blogmarks'>
       <a class='external' expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/>
       </li>
       <li class='sexy-bobrdobr'>
       <a class='external' expr:href='&quot;http://bobrdobr.ru/addext.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on BobrDobr'/>
       </li>
       <li class='sexy-bonzobox'>
       <a class='external' expr:href='&quot;http://bonzobox.com/toolbar/add?pop=1&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title + &quot;&amp;d=&quot;' rel='nofollow' title='Add this to BonzoBox'/>
       </li>
       <li class='sexy-boxnet'>
       <a class='external' expr:href='&quot;https://www.box.net/api/1.0/import?url=&quot; + data:post.url + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&amp;import_as=link&quot;' rel='nofollow' title='Add this link to Box.net'/>
       </li>
       <li class='sexy-current'>
       <a class='external' expr:href='&quot;http://current.com/clipper.htm?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Post this to Current'/>
       </li>
       <li class='sexy-diigo'>
       <a class='external' expr:href='&quot;http://www.diigo.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;desc=&quot;' rel='nofollow' title='Post this on Diigo'/>
       </li>
       <li class='sexy-ekudos'>
       <a class='external' expr:href='&quot;http://www.ekudos.nl/artikel/nieuw?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;desc=&quot;' rel='nofollow' title='Submit this to eKudos'/>
       </li>
       <li class='sexy-evernote'>
       <a class='external' expr:href='&quot;http://www.evernote.com/clip.action?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Clip this to Evernote'/>
       </li>
       <li class='sexy-faqpal'>
       <a class='external' expr:href='&quot;http://www.faqpal.com/submit?url=&quot; + data:post.url ' rel='nofollow' title='Submit this to FAQpal'/>
       </li>
       <li class='sexy-fwisp'>
       <a class='external' expr:href='&quot;http://fwisp.com/submit?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Fwisp'/>
       </li>
       <li class='sexy-globalgrind'>
       <a class='external' expr:href='&quot;http://globalgrind.com/submission/submit.aspx?url=&quot; + data:post.url + &quot;&amp;type=Article&amp;title=&quot; + data:post.title ' rel='nofollow' title='Grind this! on Global Grind'/>
       </li>
       <li class='sexy-hackernews'>
       <a class='external' expr:href='&quot;http://news.ycombinator.com/submitlink?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/>
       </li>
       <li class='sexy-hatena'>
       <a class='external' expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Bookmarks this on Hatena Bookmarks'/>
       </li>
       <li class='sexy-hyves'>
       <a class='external' expr:href='&quot;http://www.hyves.nl/profilemanage/add/tips/?name=&quot; + data:post.title + &quot;&amp;text=Text about this site+-+&quot; + data:post.url + &quot;&amp;rating=5&quot;' rel='nofollow' title='Share this on Hyves'/>
       </li>
       <li class='sexy-identica'>
       <a class='external' expr:href='&quot;http://identi.ca//index.php?action=newnotice&amp;status_textarea=Reading:&quot; + data:post.title + &quot;+-+from+&quot; + data:post.url ' rel='nofollow' title='Post this to Identica'/>
       </li>
       <li class='sexy-izeby'>
       <a class='external' expr:href='&quot;http://izeby.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Add this to Izeby'/>
       </li>
       <li class='sexy-jumptags'>
       <a class='external' expr:href='&quot;http://www.jumptags.com/add/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/>
       </li>
       <li class='sexy-kaevur'>
       <a class='external' expr:href='&quot;http://kaevur.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Kaevur'/>
       </li>
       <li class='sexy-mail'>
       <a class='external' expr:href='&quot;mailto:?subject=%22&quot; + data:post.title + &quot;%22&amp;body=Link: &quot; + data:post.url + &quot; (sent via Way2blogging) &quot;' rel='nofollow' title='Email this to a friend?'/>
       </li>
       <li class='sexy-memoryru'>
       <a class='external' expr:href='&quot;http://memori.ru/link/?sm=1&amp;u_data[url]=&quot; + data:post.url + &quot;&amp;u_data[name]=&quot; + data:post.title ' rel='nofollow' title='Add this to Memory.ru'/>
       </li>
       <li class='sexy-meneame'>
       <a class='external' expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Meneame'/>
       </li>
       <li class='sexy-misterwong'>
       <a class='external' expr:href='&quot;http://www.mister-wong.com/addurl/?bm_url=&quot; + data:post.url + &quot;&amp;bm_description=&quot; + data:post.title + &quot;&amp;plugin=sexybookmarks&quot;' rel='nofollow' title='Add this to Mister Wong'/>
       </li>
       <li class='sexy-moemesto'>
       <a class='external' expr:href='&quot;http://moemesto.ru/post.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to MyPlace'/>
       </li>
       <li class='sexy-mylinkvault'>
       <a class='external' expr:href='&quot;http://www.mylinkvault.com/link-page.php?u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/>
       </li>
       <li class='sexy-myspace'>
       <a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' title='Post this to MySpace'/>
       </li>
       <li class='sexy-n4g'>
       <a class='external' expr:href='&quot;http://www.n4g.com/tips.aspx?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit tip to N4G'/>
       </li>
       <li class='sexy-netvibes'>
       <a class='external' expr:href='&quot;http://www.netvibes.com/share?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/>
       </li>
       <li class='sexy-netvouz'>
       <a class='external' expr:href='&quot;http://www.netvouz.com/action/submitBookmark?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;popup=no&quot;' rel='nofollow' title='Submit this to Netvouz'/>
       </li>
       <li class='sexy-newsvine'>
       <a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot; + data:post.url + &quot;&amp;h=&quot; + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/>
       </li>
       <li class='sexy-ning'>
       <a class='external' expr:href='&quot;http://bookmarks.ning.com/addItem.php?url=&quot; + data:post.url + &quot;&amp;T=&quot; + data:post.title ' rel='nofollow' title='Add this to Ning'/>
       </li>
       <li class='sexy-nujij'>
       <a class='external' expr:href='&quot;http://nujij.nl/jij.lynkx?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url + &quot;&amp;b=&quot;' rel='nofollow' title='Submit this to NUjij'/>
       </li>
       <li class='sexy-oknotizie'>
       <a class='external' expr:href='&quot;http://oknotizie.virgilio.it/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on OkNotizie'/>
       </li>
       <li class='sexy-pfbuzz'>
       <a class='external' expr:href='&quot;http://pfbuzz.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on PFBuzz'/>
       </li>
       <li class='sexy-pingfm'>
       <a class='external' expr:href='&quot;http://ping.fm/ref/?link=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;body=&quot;' rel='nofollow' title='Ping this on Ping.fm'/>
       </li>
       <li class='sexy-plaxo'>
       <a class='external' expr:href='&quot;http://www.plaxo.com/?share_link=&quot; + data:post.url ' rel='nofollow' title='Share this on Plaxo'/>
       </li>
       <li class='sexy-plurk'>
       <a class='external' expr:href='&quot;http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+&quot; + data:post.url + &quot;&amp;qualifier=shares&quot;' rel='nofollow' title='Share this on Plurk'/>
       </li>
       <li class='sexy-printfriendly'>
       <a class='external' expr:href='&quot;http://www.printfriendly.com/print?url=&quot; + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/>
       </li>
       <li class='sexy-pusha'>
       <a class='external' expr:href='&quot;http://www.pusha.se/posta?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Push this on Pusha'/>
       </li>
       <li class='sexy-scriptstyle'>
       <a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to Script &amp; Style'/>
       </li>
       <li class='sexy-slashdot'>
       <a class='external' expr:href='&quot;http://slashdot.org/bookmark.pl?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/>
       </li>
       <li class='sexy-sphinn'>
       <a class='external' expr:href='&quot;http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=&quot; + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/>
       </li>
       <li class='sexy-springpad'>
       <a class='external' expr:href='&quot;http://springpadit.com/clip.action?body=&amp;url=&quot; + data:post.url + &quot;&amp;format=microclip&amp;title=&quot; + data:post.title + &quot;&amp;isselected=true&quot;' rel='nofollow' title='Spring this on SpringPad'/>
       </li>
       <li class='sexy-strands'>
       <a class='external' expr:href='&quot;http://www.strands.com/tools/share/webpage?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url ' rel='nofollow' title='Submit this to Strands'/>
       </li>
       <li class='sexy-stumpedia'>
       <a class='external' expr:href='&quot;http://www.stumpedia.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to Stumpedia'/>
       </li>
       <li class='sexy-techmeme'>
       <a class='external' expr:href='&quot;http://twitter.com/home/?status=Tip+@Techmeme+&quot; + data:post.url + &quot;--&quot; + data:post.title + &quot;&amp;source=Way2blogging&quot;' rel='nofollow' title='Tip this to TechMeme'/>
       </li>
       <li class='sexy-tipd'>
       <a class='external' expr:href='&quot;http://tipd.com/submit.php?url=&quot; + data:post.url ' rel='nofollow' title='Share this on Tipd'/>
       </li>
       <li class='sexy-tomuse'>
       <a class='external' expr:href='&quot;mailto:tips@tomuse.com?subject=&quot; + data:post.title + &quot;&amp;body=Link: &quot; + data:post.url ' rel='nofollow' title='Suggest this article to ToMuse'/>
       </li>
       <li class='sexy-twittley'>
       <a class='external' expr:href='&quot;http://twittley.com/submit/?title=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;desc=&amp;pcat=Technology&amp;tags=&quot;' rel='nofollow' title='Submit this to Twittley'/>
       </li>
       <li class='sexy-viadeo'>
       <a class='external' expr:href='&quot;http://www.viadeo.com/shareit/share/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;urlaffiliate=31138&quot;' rel='nofollow' title='Share this on Viadeo'/>
       </li>
       <li class='sexy-virb'>
       <a class='external' expr:href='&quot;http://virb.com/share?external&amp;v=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Virb'/>
       </li>
       <li class='sexy-wikio'>
       <a class='external' expr:href='&quot;http://www.wikio.com/sharethis?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Wikio'/>
       </li>
       <li class='sexy-wykop'>
       <a class='external' expr:href='&quot;http://www.wykop.pl/dodaj?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Add this to Wykop!'/>
       </li>
       <li class='sexy-xerpi'>
       <a class='external' expr:href='&quot;http://www.xerpi.com/block/add_link_from_extension?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Save this to Xerpi'/>
       </li>
       <li class='sexy-yandex'>
       <a class='external' expr:href='&quot;http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&amp;lurl=&quot; + data:post.url + &quot;&amp;lname=&quot; + data:post.title ' rel='nofollow' title='Add this to Yandex.Bookmarks'/>
       </li>
       <li class='sexy-way2blogging'>
       <a class='external' href='http://acer-c4yber.blogspot.com' rel='follow' title='Grab this Widget'></a>
       </li>
      </ul>
      <div class='sexy-link'>
      </div>
     </div>
    </div>
    </b:if>

8. Save Dan Lihat Hasilnya 

Catatan :
Untuk mengubah gambar / tulisan yang berada di atas tombol, atau merubah ukurannya agar sesuai pada template blog anda, cukup mengganti kode yang saya tandai berwarna Merah pada bagian Kode HTML di atas contoh :

     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='post-width-w2b' style='width:600px;'>
     <div class='sexy-bookmarks-bg-caring  sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '>

Beberapa Pilihan  :

sexy-bookmarks-bg-sexy

sexy-bookmarks-bg-enjoy


sexy-bookmarks-bg-caring-old


sexy-bookmarks-bg-love


sexy-bookmarks-bg-wealth

sexy-bookmarks-bg-caring




Sekian Dulu Dari Saya tentang Cara Mudah Membuat Tombol Sharing Is Sexy Keren Dengan J-query
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Mudah2n Apa Yang Saya Bagikan Bisa Bermanfaat Buat Sahabat
Terima Kasih.
Share this article :

Posting Komentar

 
Support : JokoRowoTlogoRejo | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2011. Nora'Creativity™ - All Rights Reserved
Template Created by Creating Website Modify by ! Bakalan-Tlogorejo-City
Proudly powered by Blogger