Script Social Bookmarking Auto Hide V3 Untuk Blogger

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memperlihatkan trik dan panduan ihwal cara menciptakan script social bookmarking pada blogspot.

Contohnya ibarat dibawah ini :

Cara Membuat Social Bookmarking pada Blogspot :

Login pada Blogger
Masuk mode Rancangan lalu Edit HTML
Centang Expand Template Widget
Cari isyarat </head>
Masukan isyarat berikut diatas isyarat tadi

<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>

Setelah itu cari isyarat <data:post body/> atau <div class='post-footer'> lalu pasang script berikut dibawahnya

<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;' rel='follow' title='Grab this Widget'></a>
  </div>
 </div>
</div>
</b:if>

</script>

Keterangan :

Silakan sesuaikan lebar sexy bookmark widget ini sama template kau dengan cara merubah angka pada bagian 600px
Kamu juga boleh mengganti kode sexy-bookmarks-bg-caring dengan kode-kode berikut