Membuat sosial Bookmark dengan Jequery

Membuat sosial Bookmark dengan Jequery
untuk tahap pertama loagin ke blog masuk ke EDIT HTML kemudian jangan lupa centang EXPAND WIDGED letakkan kode berikut sebelum code </head> sobat bisa gunakan Fine dengan menekan CTRL+F untuk memudahkan pencarian

<style type="text/css">
    /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
    ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }
    ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
    ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
    ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr231zZ0vrVAw4ihr0U1BehVuYv0xBfoyKKvJj7O3wtEdnkEwFndGpFje-gBkszYwfw_Hftxt1BJ7i_heeojevAr7ngBnLb08IW2VksAyIPazmH2mDoB1N-gae_euj-HGGGiHbuW0Ejwtb/s1600/way2blogging-facebook.png"); }
    ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmdFcsrtVVdu6Xs7805rNd_xxPEpJhg_V1TpXPpmeRlmMO_ZpgBr3XXDEovXUOPRPmOJ4pfvC8GqKSSaZ-DIAk02I243T2XVW4RGjfMgRjAO6_fgZ4feQvdBUiGoCrUIqG6q2fXJLO-nx/s1600/way2blogging-twitter.png"); }
    ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSjmrRMCDehFo46IC3cad9H7JPYonyQplVIiBH1P4tIweF6Iw0j7U8EG_XtfD0kY-LVgKD5Jm1JVn8yhTSAcegObGOuycB8-yWsDmt14LHYqFIQ9E1DyRsur68oc5VkvRnurXj5Q3kpZbX/s1600/way2blogging-googlebuzz.png"); }
    ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpPIj1cRA0Iv1UtKri0E_sLN2iaO5L0KOVroxOfJlOwKu8KxXXAs66EPmvKGMVTh-d7E_-hRBH4MFJL1_z7m3wX6E3_yfHgXU5nYv9NTQjWEvptL3gjhc2jazC3Fz5ktX4_E_8mdWx-E9K/s1600/way2blogging-stumbleupon.png"); }
    ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2UCk7KbvcqfySbXE_5nPfr20f4f6HJUCvh5iXHJhGW0B_oiYa5ygfKAOCzC-SZQW5CVIhOGhC2CYjTMMh0NROinFA5_tvFYpj4LsC3AeDfLCZJUWUufgwH465LHEAruw-ZyX9MeV_7eOY/s1600/way2blogging-digg.png"); }
    ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19B46zEQbfCPJXHpGvWOKLNNyCntWaGBXQ-iT2URshiNezgR_fXJdJIhXeWJiof1w0Cvh6CPRMUpXQs-HkTfk6wiq_UOm8rOzK1lKd_V48YEBlLHkmMVU2jtUSGl4qEY8ARBiPmVg2x2-/s1600/way2blogging-delicious.png"); }
    ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqe3cFZBxujXRIg25sghNskln9Y6CIwTE8TpdfGsRfisv7pr9WdUj8nwnD44Pnb8M-tdtiLkSXi8PoogreR_4OVln2J7BT35qBxa5KXKNOuCssmJR43R4v7xGLr_vM-2WH4aBTt_Tx2ti/s1600/way2blogging-linkedin.png"); }
    ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMlYV-tZIud3xmXYXSDQO772GS_BWcyCadBApNrGSzQ8gP9afZBOVgDGhoZFY8xKuQ0W5rBs-hqwXo2AGjCvjIfo3pHVPxX6U05S6FbIeEY8PGK_wPcbt99p3r2ALUwlvsYuuoDhGPY2VW/s1600/way2blogging-reddit.png"); }
    ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpi4mW4FZlrI0vqXkXq19PRm_35qitS4RlL_PMz7RHoLqxr7bnK6SgP_BbzCdtTH8nhzmC8HSU9_B0vfQwA6w-ONzBXKCCzPkVMAcEJ1IsRSCQUIbtJMk3b2v4Ibu1wrnSbLP17XW29Rop/s1600/way2blogging-technorati.png"); }
    /* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org
    $(document).ready(function () {
    $("#way2blogging-jqueryanime li").each(function () {
    $("a strong", this).css("opacity", "0");
    });
    $("#way2blogging-jqueryanime li").hover(function () {
    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);
    $("a strong", this).stop().animate({
    opacity: 1,
    top: "-10px"
    }, 300);
    }, function () {
    $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);
    $("a strong", this).stop().animate({
    opacity: 0,
    top: "-1px"
    }, 300);
    });
    });
    // Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org
    </script> 

Setelah itucari code berikut <data:post.body/>
jika sudah ketemu tambahkan kode berikut setelah code diatas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='way2blogging-social' id='way2blogging-cssanime'>
    <li class='way2blogging-facebook'>
    <a 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'><strong>Facebook</strong></a>
    </li>
    <li class='way2blogging-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
    </li>
    <li class='way2blogging-googlebuzz'>
    <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
    </li>
    <li class='way2blogging-stumbleupon'>
    <a 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'><strong>StumbleUpon</strong></a>
    </li>
    <li class='way2blogging-digg'>
    <a 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!'><strong>Digg</strong></a>
    </li>
    <li class='way2blogging-delicious'>
    <a 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'><strong>Delicious</strong></a>
    </li>
    <li class='way2blogging-linkedin'>
    <a 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'><strong>LinkedIn</strong></a>
    </li>
    <li class='way2blogging-reddit'>
    <a 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'><strong>Reddit</strong></a>
    </li>
    <li class='way2blogging-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
    </li>
    </ul>
    </b:if> 

dan SAVE template lihat hasilnya..!

semoga postingan ini bermanfaat!
BUKU TAMU DISINI

Share on Google Plus

About Budi Setiawan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.