Home >>

Add Best Social Bookmark Widget to Blogger Template


How to add a Sexy social Bookmark button on my Blogger template?
Social bookmarking is a method to organize, store, manage and search for bookmarks of resources online. Users save links to web pages that they want to remember and/or share.

Most of the best share and social bookmarking sites like del.icio.us, digg.com, technorati.com, stumbleupon.com, reddit.com, furl.net, facebook.com, twitter.com service provide web feeds for their lists of bookmarks, including lists organized by tags. This allows subscribers to become aware of new bookmarks as they are saved, shared, and tagged by other users.

If you want to bookmark and share your blog posts to these famous social bookmark sites like on this blog, simply add Social Bookmark Widget to your Blogger Template. 



Follow these steps to add social bookmark button to your template:
  1. Log into your Blogger account and from Dashboard go to Design > Edit HTML.

  2. Click the Expand Widget Templates check box.
  3. Copy and paste this code between HEAD tag:
    code:
    div.beauty-bookmarks{height:54px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ss1yi-UcCwAYTvZLaXKYQ7YT1ySYjsfVrxVHynUF14XjoNs3RH5rRROulqa70IjJxStjLYG6KJ3xu3rqSfiFgx_zDKW2JHricxRcioWsAVItpmIRF2oPXan4Hqb5g6ve8y3jgsYqACo/s1600/sexy.gif) no-repeat left bottom;position:relative;width:540px}
    div.beauty-bookmarks span.beauty-rightside{width:17px;height:54px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ss1yi-UcCwAYTvZLaXKYQ7YT1ySYjsfVrxVHynUF14XjoNs3RH5rRROulqa70IjJxStjLYG6KJ3xu3rqSfiFgx_zDKW2JHricxRcioWsAVItpmIRF2oPXan4Hqb5g6ve8y3jgsYqACo/s1600/sexy.gif) no-repeat right bottom;position:absolute;right:-17px}
    div.beauty-bookmarks ul.socials{position:absolute;bottom:0;left:10px;margin:0!important;padding:0!important}
    div.beauty-bookmarks ul.socials li{display:inline-block!important;float:left!important;list-style-type:none!important;height:29px!important;width:48px!important;cursor:pointer!important;margin:0!important;padding:0!important}
    div.beauty-bookmarks ul.socials a{display:block!important;width:48px!important;height:29px!important;font-size:0!important;color:transparent!important}
    .beauty-furl,.beauty-furl:hover,.beauty-digg,.beauty-digg:hover,.beauty-reddit,.beauty-reddit:hover,.beauty-stumble,.beauty-stumble:hover,.beauty-delicious,.beauty-delicious:hover,.beauty-yahoo,.beauty-yahoo:hover,.beauty-blinklist,.beauty-blinklist:hover,.beauty-technorati,.beauty-technorati:hover,.beauty-facebook,.beauty-facebook:hover,.beauty-twitter,.beauty-twitter:hover,.beauty-myspace,.beauty-myspace:hover,.beauty-mixx,.beauty-mixx:hover,.beauty-script-style,.beauty-script-style:hover,.beauty-designfloat,.beauty-designfloat:hover,.beauty-syndicate,.beauty-syndicate:hover,.beauty-email,.beauty-email:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKhJGBo8T-9shAqZ4-ZKx3Egfbq6dErr45rKr_nPu-jLY0At7QOjwfrf8hgscGMoFITXxh0rYbGgR2ufvyZt5RW6Js3mS5KvEQrpTFHgztERv8Xvxj0ii_fHJCgz38ACXIEbYEFf1kW-o/s1600/icon.png) no-repeat!important}.beauty-furl{background-position:-300px top!important}
    .beauty-furl:hover{background-position:-300px bottom!important}
    .beauty-digg{background-position:-500px top!important}
    .beauty-digg:hover{background-position:-500px bottom!important}
    .beauty-reddit{background-position:-100px top!important}
    .beauty-reddit:hover{background-position:-100px bottom!important}
    .beauty-stumble{background-position:-50px top!important}
    .beauty-stumble:hover{background-position:-50px bottom!important}
    .beauty-delicious{background-position:left top!important}
    .beauty-delicious:hover{background-position:left bottom!important}
    .beauty-yahoo{background-position:-650px top!important}
    .beauty-yahoo:hover{background-position:-650px bottom!important}
    .beauty-blinklist{background-position:-600px top!important}
    .beauty-blinklist:hover{background-position:-600px bottom!important}
    .beauty-technorati{background-position:-700px top!important}
    .beauty-technorati:hover{background-position:-700px bottom!important}
    .beauty-myspace{background-position:-200px top!important}
    .beauty-myspace:hover{background-position:-200px bottom!important}
    .beauty-twitter{background-position:-350px top!important}
    .beauty-twitter:hover{background-position:-350px bottom!important}
    .beauty-facebook{background-position:-450px top!important}
    .beauty-facebook:hover{background-position:-450px bottom!important}
    .beauty-mixx{background-position:-250px top!important}
    .beauty-mixx:hover{background-position:-250px bottom!important}
    .beauty-script-style{background-position:-400px top!important}
    .beauty-script-style:hover{background-position:-400px bottom!important}
    .beauty-designfloat{background-position:-550px top!important}
    .beauty-designfloat:hover{background-position:-550px bottom!important}
    .beauty-syndicate{background-position:-150px top!important}
    .beauty-syndicate:hover{background-position:-150px bottom!important}
    .beauty-email{background-position:-753px top!important}
    .beauty-email:hover{background-position:-753px bottom!important}

    <HEAD>
    paste code here
    </HEAD>
  4. Copy this second code and paste after post body tag:
    code:
    <b:if cond='data:blog.pageType == "item"'>
    <div align='center' class='beauty-bookmarks'><ul class='socials'>
    <li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    <li class='beauty-syndicate'><a href='http://feeds.feedburner.com/GoogleHotTrendsSearch' title='Subscribe to RSS'/></li>
    
    <li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    
    </ul>
    <span class='beauty-rightside'/>
       </div></b:if>

    Use Ctrl+F to find this code:
    <div class='post-body'>
    paste code here

    or

    <data:post.body/>
    paste code here