Update Terbaru
Loading...
Home » » Beautiful Social Bookmarks Untuk Blogger
Published On : Senin, 03 September 2012
23.33.00 | Admin | No Comments

Beautiful Social Bookmarks Untuk Blogger


Widget Social Bookmark adalah widget yang berbetuk tomol yang diletakkan pada halaman sebuah blog / site untuk mempermudah dalam membagi (share) ke situs Social seperti facebook, plurk, dan twitter.


Ada beberpa manfaat yang dapat kita dapatkan jika menggunakan social bookmarks , ini sudah kita bahas pada posti Manfaat Submit Situs atau Blog Page ke Social Bookmarking antara lain:
  1. Meningkatkan ranking pada SERP
  2. Meningkatkan Jumlah Pengunjung
  3. Mempercepat Pengindexan
  4. Meningkatkan PageRank
Sehubungan dengan social bookmarks, katakan-hey.com akan membagi satu buah widget social bookmarks yang tergolong keren. Widget ini dibuat oleh http://www.cssreflex.com/ dengan menggunakan jQuery sehingga widget ini dilengkapi dengan interface dan respon animasi yang keren. Contoh :
  • Tampilan sebelum ditunjuk oleh kursor


  • Tampilan saat widget ditunjuk oleh kursor
Cara membuatanya :
  1. Login pada blogger.com
  2. Pilih Rancangan >> Edit HTML
  3. Download Tempalate Lengkap terlebih dahulu
  4. Centang Expand Template Widget
  5. Cari kode </head>
  6. Copy dan pastekan kode berikut diatas kode </head> tersebut :

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery(document).ready(function() {
    // xhtml 1.0 strict way of using target _blank
    jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
    // this block sets the auto vertical expand when there are more than
    // one row of bookmarks.
    var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
    var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
    if (sexyFullHeight&gt;sexyBaseHeight) {
    jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
    function() {
    jQuery(this).animate({
    height: sexyFullHeight+&#39;px&#39;
    }, {duration: 400, queue: false});
    },
    function() {
    jQuery(this).animate({
    height: sexyBaseHeight+&#39;px&#39;
    }, {duration: 400, queue: false});
    }
    );
    }
    // autocentering
    if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
    var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
    var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
    var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
    var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
    var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
    var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
    jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
    }
    });
    </script>

    <style type='text/css'>
    div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
    div.sexy-bookmarks-expand{height:29px; overflow:hidden}
    .sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1FdicM-FjcTvQlFeFbm1gnp4WmBy0l7YZzblLLUX4Bbc3XurA_WR101F5AcVMFOdF_NVHgpxzhlV-eHaHmPbFlc1ijsQLSIMe6C2K-lczF9geDG0GLkF_t57lO0ZBJKcdncxF6-E7hSf4/&#39;) !important; background-repeat:no-repeat}
    div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
    div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
    div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
    div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
    div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
    div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
    .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url(&#39;http://bnote.googlecode.com/files/sexy-sprite-new.png&#39;) no-repeat !important;border: 0;outline: none;}
    .sexy-digg{background-position:-980px bottom !important}
    .sexy-digg:hover{background-position:-980px top !important}
    .sexy-reddit{background-position:-700px bottom !important}
    .sexy-reddit:hover{background-position:-700px top !important}
    .sexy-stumbleupon{background-position:-630px bottom !important}
    .sexy-stumbleupon:hover{background-position:-630px top !important}
    .sexy-delicious{background-position:-1190px bottom !important}
    .sexy-delicious:hover{background-position:-1190px top !important}
    .sexy-yahoobuzz{background-position:-1120px bottom !important}
    .sexy-yahoobuzz:hover{background-position:-1120px top !important}
    .sexy-blinklist{background-position:-1260px bottom !important}
    .sexy-blinklist:hover{background-position:-1260px top !important}
    .sexy-technorati{background-position:-560px bottom !important}
    .sexy-technorati:hover{background-position:-560px top !important}
    .sexy-myspace{background-position:-770px bottom !important}
    .sexy-myspace:hover{background-position:-770px top !important}
    .sexy-twitter{background-position:-490px bottom !important}
    .sexy-twitter:hover{background-position:-490px top !important}
    .sexy-facebook{background-position:-1330px bottom !important}
    .sexy-facebook:hover{background-position:-1330px top !important}
    .sexy-mixx{background-position:-840px bottom !important}
    .sexy-mixx:hover{background-position:-840px top !important}
    .sexy-scriptstyle{background-position:-280px bottom !important}
    .sexy-scriptstyle:hover{background-position:-280px top !important}
    .sexy-designfloat{background-position:-1050px bottom !important}
    .sexy-designfloat:hover{background-position:-1050px top !important}
    .sexy-newsvine{background-position:left bottom !important}
    .sexy-newsvine:hover{background-position:left top !important}
    .sexy-google{background-position:-210px bottom !important}
    .sexy-google:hover{background-position:-210px top !important}
    .sexy-comfeed{background-position:-420px bottom !important}
    .sexy-comfeed:hover{background-position:-420px top !important}
    .sexy-linkedin{background-position:-70px bottom !important}
    .sexy-linkedin:hover{background-position:-70px top !important}
    .sexy-friendfeed{background-position:-1750px bottom !important}
    .sexy-friendfeed:hover{background-position:-1750px top !important}
    .sexy-link{ margin-left:25px; float:left}
    .sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>
  7. Setelah itu cari kode <data:post.body/>
  8. Perlu diperhatikan, jika blog Perlu diperhatikan bahwa jika blog Anda menggunakan readmore otomatis berarti ada 2 <data:post.body/> pilih <data:post.body/> yang kedua
  9. Patekan kode berikut ini Tepat setelah <data:post.body/> 

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
    <ul class='socials'>
    <li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></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!'>Digg this!</a></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'>Stumble upon something good? Share it on StumbleUpon</a></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'>Share this on Reddit</a></li>
    <li class='sexy-google'><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'>Add this to Google Bookmarks</a></li>
    <li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
    <li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
    <li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
    <li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
    <li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></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' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></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'>Submit this to DesignFloat</a></li>
    <li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></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'>Submit this to Script &amp; Style</a></li>
    <li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></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'>Share this on Blinklist</a></li>
    <li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></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;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
    </ul>
    <div style='clear:both;'/>
    </div>
    </b:if>
  10. Simpan Template dan Lihat Hasilnya 

SUMBER


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top