Welcome visitor! Please wait till I load my blog page...

.......

17+ social bookmarking widgets for blogger And Customize


People like to bookmark your blog posts to different social bookmarking sites if they find something interesting content and find the easy bookmarking widget installed in your blog.None of your readers will visit digg or reddit to bookmark your blog there.They will bookmark only when they find social bookmarking widget installed in your blog post footer or other easy place.They will be more interested if they find something interesting with the social bookmarking widget.

  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial




  • Add AutoHiding Social Bookmarking [Sharing is Sexy/Caring] Widget To Your Blog 

    You must have noticed Sharing is sexy/caring social bookmarking autohide widget on many blogs and websites. This widget is very different than other available social bookmarking buttons. The graphics looks very stylish and different. The button of this widget has autohide effect when hover on it. All that makes it a must have widget for any blog. Here in this post, i will explain how you can add Sharing is sexy widget to Blogger blog after every post.



    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"




    STEP #2
    Now find (CTRL+F) this code in the template:

    </head>

    And immediately before it, paste this code:

    <!--HIDDEN-BOOKMARKS-STARTS-->



    <style type='text/css'>

    div.sexy-bookmarks {

    height:54px;

    background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png&#39;) no-repeat left bottom;

    position:relative;

    width:540px;

    }



    div.sexy-bookmarks span.sexy-rightside {

    width:17px;

    height:54px;

    background:url(&#39;http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png&#39;) no-repeat right bottom;

    position:absolute;

    right:-17px;

    }



    div.sexy-bookmarks ul.socials {

    margin:0 !important;

    padding:0 !important;

    position:absolute;

    bottom:0;

    left:10px;

    }



    div.sexy-bookmarks ul.socials li {

    display:inline-block !important;

    float:left !important;

    list-style-type:none !important;

    margin:0 !important;

    height:29px !important;

    width:48px !important;

    cursor:pointer !important;

    padding:0 !important;

    }



    div.sexy-bookmarks ul.socials a {

    display:block !important;

    width:48px !important;

    height:29px !important;

    font-size:0 !important;

    color:transparent !important;



    }



    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo: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-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {

    background:url(&#39;http://1.bp.blogspot.com/_4HKUHirY_2U/SxTyqWVZBZI/AAAAAAAAAcM/FEdBsycXjkU/Sexysprite.png&#39;) no-repeat !important;

    }



    .sexy-furl {

    background-position:-300px top !important;

    }

    .sexy-furl:hover {

    background-position:-300px bottom !important;

    }

    .sexy-digg {

    background-position:-500px top !important;

    }

    .sexy-digg:hover {

    background-position:-500px bottom !important;

    }

    .sexy-reddit {

    background-position:-100px top !important;

    }

    .sexy-reddit:hover {

    background-position:-100px bottom !important;

    }

    .sexy-stumble {

    background-position:-50px top !important;

    }

    .sexy-stumble:hover {

    background-position:-50px bottom !important;

    }

    .sexy-delicious {

    background-position:left top !important;

    }

    .sexy-delicious:hover {

    background-position:left bottom !important;

    }

    .sexy-yahoo {

    background-position:-650px top !important;

    }

    .sexy-yahoo:hover {

    background-position:-650px bottom !important;

    }

    .sexy-blinklist {

    background-position:-600px top !important;

    }

    .sexy-blinklist:hover {

    background-position:-600px bottom !important;

    }

    .sexy-technorati {

    background-position:-700px top !important;

    }

    .sexy-technorati:hover {

    background-position:-700px bottom !important;

    }

    .sexy-myspace {

    background-position:-200px top !important;

    }

    .sexy-myspace:hover {

    background-position:-200px bottom !important;

    }

    .sexy-twitter {

    background-position:-350px top !important;

    }

    .sexy-twitter:hover {

    background-position:-350px bottom !important;

    }

    .sexy-facebook {

    background-position:-450px top !important;

    }

    .sexy-facebook:hover {

    background-position:-450px bottom !important;

    }

    .sexy-mixx {

    background-position:-250px top !important;

    }

    .sexy-mixx:hover {

    background-position:-250px bottom !important;

    }

    .sexy-script-style {

    background-position:-400px top !important;

    }

    .sexy-script-style:hover {

    background-position:-400px bottom !important;

    }

    .sexy-designfloat {

    background-position:-550px top !important;

    }

    .sexy-designfloat:hover {

    background-position:-550px bottom !important;

    }

    .sexy-syndicate {

    background-position:-150px top !important;

    }

    .sexy-syndicate:hover {

    background-position:-150px bottom !important;

    }

    .sexy-email {

    background-position:-753px top !important;

    }

    .sexy-email:hover {

    background-position:-753px bottom !important;

    }



    </style>





    <!--HIDDEN-BOOKMARKS-STOPS-http://bdlab.blogspot.com-->


    STEP #2

    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately BELOW/AFTER it, paste this code:

    <div class='sexy-bookmarks'>

    <ul class='socials'>

    <li class='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-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='sexy-syndicate'><a href='http://24works.blogspot.com/feeds/posts/default' title='Subscribe to RSS'/></li>



    <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>



    </ul>

    <span class='sexy-rightside'/></div>


    You may of course remove any button code, if you do not want to show it.


    Now Click Save Template







    SEXYBOOKMARKS V2 FOR BLOGGER 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"




    STEP #2
    Now find (CTRL+F) this code in the template:

    </head>

    And immediately before it, paste this code:


    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery(document).ready(function() {
    // xhtml 1.0 strict way of using target _blank
    jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
    // this block sets the auto vertical expand when there are more than
    // one row of bookmarks.
    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+'px'
    }, {duration: 400, queue: false});
    },
    function() {
    jQuery(this).animate({
    height: sexyBaseHeight+'px'
    }, {duration: 400, queue: false});
    }
    );
    }
    // autocentering
    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>



    And this one too,





    <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('http://img31.imageshack.us/img31/176/sexytrans.png') !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:100% !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('http://img231.imageshack.us/img231/3006/sexyspritenew.png') 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>




    STEP #3
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <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>
    </div>
    <div class='sexy-link'> Widget by <a href='http://24works.blogspot.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Blogspot Tutorial</a></div>



    Now Click Save Template






    OS X Styled Sharing Dock Widget, New sharing Widget For Blogger 



    STEP #1
    Log in to Blogger, go to Design ->





    Add a Gadget of HTML/JavaScript type.




    <style type="text/css">
    #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
    #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
    .dock-container { position: relative; background:url(http://i40.tinypic.com/inv7nt.png) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; }
    .dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
    .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
    .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; }
    </style>

    <div id="sharedock">
    <div id="dock">
    <div class="dock-container">

    <div class="addthis_toolbox">

    <div class="custom_images">

    <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
    <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
    <a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
    <a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
    <a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
    <a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
    <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
    </div>
    </div>
    </div>
    </div>
    </div>

    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>
    <script type="text/javascript">
    $(function () {
    // Dock initialize
    $('#dock').Fisheye(
    {
    maxWidth: 30,
    items: 'a',
    itemsText: 'span',
    container: '.dock-container',
    itemWidth: 50,
    proximity: 60,
    alignment : 'left',
    valign: 'bottom',
    halign : 'center'
    }
    );
    });
    </script>


    Now click Save






    How to Install Floating Social Bookmark on Blogger 



    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    ]]></b:skin>

    And immediately before it, paste this code:

    #divStayTopLeft {left:5px;position:absolute;top:15px;}



    .sidetab {}



    .sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}



    .sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}



    .sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}



    .sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}



    .sidetab a:hover {border: none;background: #e8e8e8;}



    .sidetab .button a {background:none;height: 25px; width: 25px;}



    STEP #3:
    Now find this code in the template:

    </body>

    And immediately before it, paste this code:

    <DIV id='divStayTopLeft'>



    <div class='sidetab'>



    <ul class='navlist'>







    <li class='button'><a href='http://bdlab.blogspot.com/feeds/posts/default'><img height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS feed' width='25'/></a></li>



    <a class='addthis_button_facebook'><img alt='Facebook' height='25' src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>



    <a class='addthis_button_delicious'><img alt='Delicious' height='25' src='http://upic.me/i/k6/delicious.png' width='25'/></a>



    <a class='addthis_button_email'><img alt='Email' height='25' src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>



    <a class='addthis_button_favorites'><img alt='Favorites' height='25' src='http://upic.me/i/ij/favorites.png' width='25'/></a>



    <a class='addthis_button_twitter'><img alt='Twitter' height='25' src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>



    <a class='addthis_button_google'><img alt='Google' height='25' src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>



    <a class='addthis_button_digg'><img alt='Digg' height='25' src='http://upic.me/i/0v/mdigg.png' width='25'/></a>



    <a class='addthis_button_more'><img alt='More' height='25' src='http://upic.me/i/5e/wmore.png' width='25'/></a>



    </ul>



    </div>



    </DIV>



    <script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>



    <script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>


    Now Click Save Template



    Note: Replace the YOUR-BLOG-ADDRESS-HERE with your Feed Link if the run ends blogspot domain. If they run their own domains replace the YOUR-BLOG-ADDRESS-HERE / feeds / posts / default in your Feed link.





    Add Floating Share Buttons Like Mashable to Blogger 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    ]]></b:skin>

    And immediately before it, paste this code:

    #sharebox {
    background-color:#FFFFFF;
    border-color:#C1CDCD;
    border-style:solid;
    border-width:1px;
    left:103px;
    bottom:40px;
    margin-top:10px;
    position:fixed;
    width:64px;
    }

    #sharebox .float {margin:7px}
    .FBConnectButton_Text
    {
    font-size: 8px;
    padding:2px 4px 3px !important;
    }


    Step #3
    Now find the bellow code

    <div class='post-header-line-1'/>

    just before it, paste this code:


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='sharebox'>
    <div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
    <div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
    <div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
    <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
    <div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
    </div>

    </b:if>


    Now Click Save Template


    Thats it and remember, the floating widget is visible only for blog post, so this widget won’t be visible on your blog homepage.






    Social bookmarking widget for Blogger with auto scrolling function 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    ]]></b:skin>

    And immediately before it, paste this code:



    #share_scroller {

    left:0;

    position:fixed;

    top:700px;

    }

    #share_button {

    left:0;

    position:fixed;

    top:700px;

    width:80px;

    }

    #shares {

    -moz-border-radius-bottomleft:3px;

    -moz-border-radius-topleft:3px;

    background-color:#CCCCFF;

    border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;

    border-style:solid;

    border-width:1px;

    bottom:100px;

    margin-top:10px;

    position:fixed;

    width:63px;

    }

    #shares .SMVote {margin:7px}

    div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}

    /* FB button (shrink width) */

    .fb_share_count_top {width:48px!important}

    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}

    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}

    Step #3
    Now find the bellow code

    <body>

    and replace it with the bellow code


    <body>

    <div id='share_scroller'>

    <div id='share_button'>

    <div id='shares'>

    <div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>

    <div class='SMGap'/>

    <div class='SMVote'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>

    <div class='SMGap'/>

    <div class='SMVote'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>

    <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>

    <div class='SMGap'/>

    <div class='SMVote'><a class='DiggThisButton'/><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

    <div class='SMGap'/>

    <div class='SMVote'><script src='http://www.reddit.com/button.js?t=2' type='text/javascript'/></div>

    <div class='SMGap'/>

    <div class='SMVote'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><script src='http://nirav07.110mb.com/blogger.php' type='text/javascript'/></div>

    </div>

    </div>



    Now Click Save Template





    How to Add Social Bookmarking Icons in Blogger 




    Adding social bookmarking icons or buttons in blogger let's your readers to bookmark your posts which ever he likes to. It's not only a Web 2.0 feature but also a great way to get social. I have seen that there are many times when I get traffic from social networking sites.

    Now you may also like to get social by adding bookmarking buttons, so I have updated this tutorial with 18 bookmarking sites and a feed icon.


    Adding Social Bookmarking Icons Below Blogger Posts

    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    or

    <div class='post-footer-line post-footer-line-3'>

    Just bellow any one of the sections mentioned above, add the bookmarking codes:


    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div class='share-icons'>

    <!-- Stumbleupon -->

    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Stumble' src='http://icon URL'/></a>

    <!-- Delicious -->

    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Delicious' src='http://icon URL'/></a>

    <!-- Google Buzz -->

    <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google Buzz' src='http://icon URL'/></a>

    <!-- Facebook -->

    <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' src='http://icon URL'/></a>

    <!-- Reddit -->

    <a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Reddit' src='http://icon URL'/></a>

    <!-- Technorati -->

    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'><img alt='Technorati' src='http://icon URL'/></a>

    <!-- Yahoo Buzz -->

    <a expr:href='&quot;http://buzz.yahoo.com/buzz?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Buzz it' src='http://icon URL'/></a>

    <!-- Twitthis -->

    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' target='_blank'><img alt='Twitter' src='http://icon URL'/></a>

    <!-- Digg -->

    <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg it' src='http://icon URL'/></a>

    <!-- 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'><img alt='Designfloat' src='http://icon URL'/></a>

    <!-- Diigo -->

    <a expr:href='&quot;http://www.diigo.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Diigo' src='http://icon URL'/></a>

    <!-- Mixx -->

    <a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Mixx' src='http://icon URL'/></a>

    <!-- Google Bookmarks -->

    <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google Bookmarks' src='http://icon URL'/></a>

    <!-- Meneame -->

    <a expr:href='&quot;http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Meneame' src='http://icon URL'/></a>

    <!-- 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'><img alt='Furl' src='http://icon URL'/></a>

    <!-- Magnolia -->

    <a expr:href='&quot;http://ma.gnolia.com/beta/bookmarklet/add?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Magnolia' src='http://icon URL'/></a>

    <!-- Blinklist -->

    <a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Blinklist' src='http://icon URL'/></a>

    <!-- Blogmarks -->

    <a 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' target='_blank'><img alt='Blogmarks' src='http://icon URL'/></a>

    <!-- RSS -->

    <a href="http://feeds.feedburner.com/om-simplebloggertutorials" title='Subscribe to Feeds'><img alt='Subscribe to RSS' src='http://icon URL'/></a>

    </div>

    </b:if>


    Note the conditional tags marked in red. These are used to hide the bookmarking icons from appearing below every posts on homepage.

    As I'm providing too many bookmarking codes, I was unable to get matching icons for all of them, so change “src=http://icon URL” with the icons you want to use as social bookmarking buttons and “YOUR FEED ADDRESS” with the feed address of your blog.

    If you don't want to add any specific bookmark, then delete it. For example, if you don't want to include Furl, then delete:


    <!-- 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'><img alt='Furl' src='http://icon URL'/></a>


    STEP #3
    Now find (CTRL+F) this code in the template:

    ]]></b:skin>

    And immediately before it, paste this code:

    .share-icons {display: block; margin: 5px 0;}

    .share-icons img {padding: 2px; border: none;}


    Adding Addthis or Addtoany Bookmarks to Blogger

    Visit AddThis or AddToAny, which ever you like, select the style you want to use and get the script code that they will provide. 



    Now for adding the bookmarking scripts, Find:

    <data:post.body/>

    or

    <div class='post-footer-line post-footer-line-3'>


    And paste script beneath any one of the codes.


    Now Click Save Template



    If you also want these bookmarks to not to appear on homepage, then use the conditional tags as mentioned above. Now wait for some one to come across your posts and click the bookmarking icons to add it to their favorite Bookmarks.

    If you like this post then don't forget to add it to your favorite social bookmarks by clicking the bookmarking buttons.








    How To Add Share This Post Social Button to Blogger 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <b>Share this post :</b><br/>
    <div class='spacer' style='border-top:solid 0px #DEDEDE;'/>
    <table bgcolor='#ffffff' border='0' cellpadding='0' cellspacing='0' width='100%'>
    <tr>
    <td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
    <tr>
    <td height='24' width='24'><img border='0' height='16' src='http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMldgnvuI/AAAAAAAAAv4/FhIAkFW-ZTw/facebook.png' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://www.facebook.com/sharer.php?&amp;u=&quot; + data:post.url' target='_blank'>Share on Facebook</a>
    </td>
    </tr>
    <tr>
    <td height='24'><img border='0' src='http://2.bp.blogspot.com/_ar9PeTUrwMY/SnmM69WzUkI/AAAAAAAAAww/6b8npnF677I/twitter.png'/></td>
    <td height='24'><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>Share on Twitter</a>
    </td>
    </tr>
    <tr>
    <td height='24'><img border='0' height='16' src='http://3.bp.blogspot.com/_ar9PeTUrwMY/SnmM0Ze235I/AAAAAAAAAwg/jMLPYyDdCSs/stumble.png' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://www.stumbleupon.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on StumbleUpon</a></td>
    </tr>
    <tr>
    <td height='24'><img border='0' height='16' src='http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMf-cBJuI/AAAAAAAAAvo/WFFPRRl9dcg/delicious.png' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://del.icio.us/post?v=4&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a></td>
    </tr>
    <tr>
    <td height='24'><img border='0' height='16' src=' http://2.bp.blogspot.com/_ar9PeTUrwMY/SnmMxLWOeMI/AAAAAAAAAwY/ca4HSlHFtZ0/reddit.png' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Share on Reddit</a>
    </td>
    </tr>
    </table></td>
    <td valign='top' width='50%'><table border='0' cellpadding='0' cellspacing='0' width='222'>
    <tr>
    <td height='24' width='24'><img border='0' height='16' src='http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMitkOefI/AAAAAAAAAvw/mQdgqyJVhvY/digg.png' width='16'/></td>
    <td height='24'><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' target='_blank'>Share on Digg</a></td>
    </tr>
    <tr>
    <td height='24'><img border='0' height='16' src='http://4.bp.blogspot.com/_ar9PeTUrwMY/SnmMrmsi0LI/AAAAAAAAAwI/XMLDq5_baKE/icon_sb_sim22.gif' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on simpy</a></td>
    </tr>
    <tr>
    <td height='24'><img border='0' height='16' src='http://1.bp.blogspot.com/_ar9PeTUrwMY/SnmM30PqK4I/AAAAAAAAAwo/R1FhGrjnPas/technorati.png' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://technorati.com/signup/?f=favorites&amp;Url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Technorati</a></td>
    </tr>
    <tr>
    <td height='24'><img alt='furl' border='0' height='16' src='http://3.bp.blogspot.com/_ar9PeTUrwMY/SnmMuTMm4BI/AAAAAAAAAwQ/_gbDQBFQtN4/images2.jpg' width='16'/></td>
    <td height='24'><a expr:href='&quot;http://www.furl.net/storeIt.jsp?&amp;u=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on furl</a>
    </td>
    </tr>
    <tr>
    <td height='24'><img alt='Feeds RSS' border='0' height='16' src='http://1.bp.blogspot.com/_ar9PeTUrwMY/SnmMoqVfTiI/AAAAAAAAAwA/Yfpcn-FPGaU/feed.png' width='16'/></td>
    <td height='24'><a href='http://feeds2.feedburner.com/blogspot/WyNa' target='_blank'>Subscribe to Feeds RSS</a>
    </td>
    </tr>
    </table></td>
    </tr>
    </table>



    Now Click Save Template





    How To Add Heart Social Bookmark Icons to Blogger Post 





    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <div style='clear:both; '>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCxndGKQoI/AAAAAAAAAfM/zQE4e5oGJLI/stumble.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxR6IdwFI/AAAAAAAAAe0/P-WUkgBTawI/delicious.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxqwEFIuI/AAAAAAAAAfU/QRi439zo_Xc/technorati.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCxulbFRoI/AAAAAAAAAfc/CKJPLxIwP5M/twitter.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCyGNznjII/AAAAAAAAAf0/ESzv0oL2AEQ/facebook.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='http://1.bp.blogspot.com/_4HKUHirY_2U/SyCxeo18s_I/AAAAAAAAAe8/0gAb9Ya6B78/yahoo.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCx081oRKI/AAAAAAAAAfk/pTxLusQo0Gc/reddit.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxioR-4tI/AAAAAAAAAfE/LkLtTqd6wIA/rss.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    </div>



    Now Click Save Template






    Leaves Fall Social Bookmark Button For Blogger Post 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <div style='clear:both; '>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyEC0tRe5AI/AAAAAAAAAhc/ciTNFYbdI6c/StumbleUpon.com.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECZRarefI/AAAAAAAAAgU/e9uAMhzzntI/del.icio.us.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyEC3Z8WPTI/AAAAAAAAAhk/jPoVuoRZkfY/Technorati.com.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyEC5xCTZzI/AAAAAAAAAhs/mGoEuPNumYY/Twitter.com.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <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' target='_blank'><img alt='Digg' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECgX6zBRI/AAAAAAAAAgk/h74cmytw61U/Digg.com.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECjY9DWwI/AAAAAAAAAgs/jfJ840a7a4U/Facebook.com.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://1.bp.blogspot.com/_4HKUHirY_2U/SyECostHsxI/AAAAAAAAAg8/2fuBDMI8_YI/Reddit.com.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    <div style='width:65px; float:left;'>
    <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyECu07nS9I/AAAAAAAAAhM/Lnd4RvAbcCc/RSS.png' style='padding:0;margin:0;border:none;'/></a>
    </div>
    </div>



    Now Click Save Template







    Install Digg, Retweet, Facebook Share & Yahoo! Buzz Sharing Buttons in Blog Posts 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <div style='float: right;'>

    <table>

    <tr><td>

    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

    </td><td>

    <script type='text/javascript'>

    tweetmeme_source = &#39;YOUR-TWITTER-USERNAME-HERE&#39;;

    </script>

    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>


    </td></tr>

    <tr><td>

    <a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

    </td><td>

    <script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'>ARTICLEURL</script>

    </td></tr>

    </table>

    </div>





    Now Click Save Template




    You'll see these 4 buttons in your all blog posts at top right position.

    Customization

    Digg button is in Blue code
    Twitter button is in Red code (Replace YOUR-TWITTER-USERNAME-HERE with your twitter user name without @)
    Facebook Share button is in Green code
    Yahoo! Buzz button is in Pink code
    To move the place of the button, change the "right" (bold), to "left" or "center" to place buttons accordingly.
    You can add as many bookmarking buttons as you want if you know the codes of them.







    JQuery Social Bookmark Icons For Bloggers with MouseOver 



    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"

    STEP #2
    Now find (CTRL+F) this code in the template:

    </head>

    And immediately before it, paste this code:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>





    <script type='text/javascript'>

    //<![CDATA[



    /*

    * Interface elements for jQuery - http://interface.eyecon.ro

    *

    * Copyright (c) 2006 Stefan Petre

    * Dual licensed under the MIT (MIT-LICENSE.txt)

    * and GPL (GPL-LICENSE.txt) licenses.

    */

    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('6.15={3o:d(e){7 x=0;7 y=0;7 1Q=1A;7 A=e.L;8(6(e).H(\'Q\')==\'U\'){1E=A.1a;2y=A.O;A.1a=\'1F\';A.Q=\'1Y\';A.O=\'2e\';1Q=26}7 4=e;2P(4){x+=4.3B+(4.1I&&!6.3p.41?F(4.1I.2X)||0:0);y+=4.3x+(4.1I&&!6.3p.41?F(4.1I.2Z)||0:0);4=4.4e}4=e;2P(4&&4.4a&&4.4a.39()!=\'V\'){x-=4.1D||0;y-=4.1s||0;4=4.2x}8(1Q){A.Q=\'U\';A.O=2y;A.1a=1E}q{x:x,y:y}},4E:d(4){7 x=0,y=0;2P(4){x+=4.3B||0;y+=4.3x||0;4=4.4e}q{x:x,y:y}},35:d(e){7 w=6.H(e,\'1T\');7 h=6.H(e,\'36\');7 1e=0;7 1o=0;7 A=e.L;8(6(e).H(\'Q\')!=\'U\'){1e=e.1z;1o=e.2s}u{1E=A.1a;2y=A.O;A.1a=\'1F\';A.Q=\'1Y\';A.O=\'2e\';1e=e.1z;1o=e.2s;A.Q=\'U\';A.O=2y;A.1a=1E}q{w:w,h:h,1e:1e,1o:1o}},4P:d(4){q{1e:4.1z||0,1o:4.2s||0}},58:d(e){7 h,w,22;8(e){w=e.2a;h=e.29}u{22=D.Y;w=2z.3c||2N.3c||(22&&22.2a)||D.V.2a;h=2z.31||2N.31||(22&&22.29)||D.V.29}q{w:w,h:h}},3P:d(e){7 t,l,w,h,1J,1R;8(e&&e.2E.39()!=\'V\'){t=e.1s;l=e.1D;w=e.3j;h=e.3e;1J=0;1R=0}u{8(D.Y&&D.Y.1s){t=D.Y.1s;l=D.Y.1D;w=D.Y.3j;h=D.Y.3e}u 8(D.V){t=D.V.1s;l=D.V.1D;w=D.V.3j;h=D.V.3e}1J=2N.3c||D.Y.2a||D.V.2a||0;1R=2N.31||D.Y.29||D.V.29||0}q{t:t,l:l,w:w,h:h,1J:1J,1R:1R}},3L:d(e,1U){7 4=6(e);7 t=4.H(\'2j\')||\'\';7 r=4.H(\'2k\')||\'\';7 b=4.H(\'2n\')||\'\';7 l=4.H(\'2l\')||\'\';8(1U)q{t:F(t)||0,r:F(r)||0,b:F(b)||0,l:F(l)};u q{t:t,r:r,b:b,l:l}},56:d(e,1U){7 4=6(e);7 t=4.H(\'3w\')||\'\';7 r=4.H(\'3u\')||\'\';7 b=4.H(\'3s\')||\'\';7 l=4.H(\'3t\')||\'\';8(1U)q{t:F(t)||0,r:F(r)||0,b:F(b)||0,l:F(l)};u q{t:t,r:r,b:b,l:l}},4Z:d(e,1U){7 4=6(e);7 t=4.H(\'2Z\')||\'\';7 r=4.H(\'3G\')||\'\';7 b=4.H(\'3y\')||\'\';7 l=4.H(\'2X\')||\'\';8(1U)q{t:F(t)||0,r:F(r)||0,b:F(b)||0,l:F(l)||0};u q{t:t,r:r,b:b,l:l}},3T:d(2i){7 x=2i.53||(2i.52+(D.Y.1D||D.V.1D))||0;7 y=2i.51||(2i.54+(D.Y.1s||D.V.1s))||0;q{x:x,y:y}},3h:d(12,3g){3g(12);12=12.3F;2P(12){6.15.3h(12,3g);12=12.5a}},59:d(12){6.15.3h(12,d(4){S(7 1j 1q 4){8(2R 4[1j]===\'d\'){4[1j]=20}}})},57:d(4,27){7 1b=$.15.3P();7 3l=$.15.35(4);8(!27||27==\'4Y\')$(4).H({X:1b.t+((1i.3S(1b.h,1b.1R)-1b.t-3l.1o)/2)+\'K\'});8(!27||27==\'4Q\')$(4).H({N:1b.l+((1i.3S(1b.w,1b.1J)-1b.l-3l.1e)/2)+\'K\'})},4O:d(4,3U){7 3V=$(\'3q[@2u*="2w"]\',4||D),2w;3V.1V(d(){2w=k.2u;k.2u=3U;k.L.4M="4N:4R.4S.4W(2u=\'"+2w+"\')"})}};[].4i||(4V.4U.4i=d(v,n){n=(n==20)?0:n;7 m=k.1m;S(7 i=n;i<m;i++)8(k[i]==v)q i;q-1});6.3A=d(e){8(/^4T$|^4L$|^5b$|^5c$|^5t$|^5s$|^5r$|^5q$|^5u$|^V$|^5v$|^5z$|^5y$|^5x$|^5w$|^5p$|^5o$/i.2q(e.2E))q 1A;u q 26};6.E.5h=d(e,1p){7 c=e.3F;7 1d=c.L;1d.O=1p.O;1d.2j=1p.18.t;1d.2l=1p.18.l;1d.2n=1p.18.b;1d.2k=1p.18.r;1d.X=1p.X+\'K\';1d.N=1p.N+\'K\';e.2x.4f(c,e);e.2x.5g(e)};6.E.5f=d(e){8(!6.3A(e))q 1A;7 t=6(e);7 A=e.L;7 1Q=1A;7 J={};J.O=t.H(\'O\');8(t.H(\'Q\')==\'U\'){1E=t.H(\'1a\');A.1a=\'1F\';A.Q=\'\';1Q=26}J.32=6.15.35(e);J.18=6.15.3L(e);7 2Y=e.1I?e.1I.4g:t.H(\'5d\');J.X=F(t.H(\'X\'))||0;J.N=F(t.H(\'N\'))||0;7 3J=\'5e\'+F(1i.5i()*4p);7 1x=D.5j(/^3q$|^5n$|^5m$|^5l$|^5k$|^5A$|^2V$|^4u$|^4y$|^4z$|^4x$|^4v$|^4s$|^4H$/i.2q(e.2E)?\'4J\':e.2E);6.1j(1x,\'4F\',3J);1x.3X=\'4B\';7 R=1x.L;7 X=0;7 N=0;8(J.O==\'33\'||J.O==\'2e\'){X=J.X;N=J.N}R.Q=\'U\';R.X=X+\'K\';R.N=N+\'K\';R.O=J.O!=\'33\'&&J.O!=\'2e\'?\'33\':J.O;R.2K=\'1F\';R.36=J.32.1o+\'K\';R.1T=J.32.1e+\'K\';R.2j=J.18.t;R.2k=J.18.r;R.2n=J.18.b;R.2l=J.18.l;8(6.3p.4G){R.4g=2Y}u{R.4D=2Y}e.2x.4f(1x,e);A.2j=\'1M\';A.2k=\'1M\';A.2n=\'1M\';A.2l=\'1M\';A.O=\'2e\';A.4C=\'U\';A.X=\'1M\';A.N=\'1M\';8(1Q){A.Q=\'U\';A.1a=1E}1x.4A(e);R.Q=\'1Y\';q{J:J,4I:6(1x)}};6.E.2f={4K:[0,B,B],4r:[3E,B,B],4w:[4l,4l,4t],4X:[0,0,0],60:[0,0,B],6P:[3H,42,42],6O:[0,B,B],6N:[0,0,1L],6L:[0,1L,1L],6M:[3b,3b,3b],6Q:[0,6R,0],6W:[6V,6U,4k],6S:[1L,0,1L],6T:[6K,4k,47],6J:[B,3I,0],6B:[6A,50,6z],6x:[1L,0,0],6Y:[6C,6D,6I],6H:[6G,0,2U],6E:[B,0,B],6F:[B,6X,0],7a:[0,1v,0],7j:[75,0,7i],7f:[3E,3v,3I],7e:[7h,7l,3v],7g:[3r,B,B],7c:[4c,7d,4c],72:[2U,2U,2U],71:[B,70,74],76:[B,B,3r],7b:[0,B,0],79:[B,0,B],77:[1v,0,0],78:[0,0,1v],6Z:[1v,1v,0],73:[B,3H,0],7k:[B,2I,6y],6v:[1v,0,1v],5V:[B,0,0],5U:[2I,2I,2I],5T:[B,B,B],5R:[B,B,0]};6.E.1w=d(16,3z){8(6.E.2f[16])q{r:6.E.2f[16][0],g:6.E.2f[16][1],b:6.E.2f[16][2]};u 8(M=/^1N\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*\\)$/.2A(16))q{r:F(M[1]),g:F(M[2]),b:F(M[3])};u 8(M=/1N\\(\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*,\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*,\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*\\)$/.2A(16))q{r:Z(M[1])*2.55,g:Z(M[2])*2.55,b:Z(M[3])*2.55};u 8(M=/^#([a-1H-1B-9])([a-1H-1B-9])([a-1H-1B-9])$/.2A(16))q{r:F("1C"+M[1]+M[1]),g:F("1C"+M[2]+M[2]),b:F("1C"+M[3]+M[3])};u 8(M=/^#([a-1H-1B-9]{2})([a-1H-1B-9]{2})([a-1H-1B-9]{2})$/.2A(16))q{r:F("1C"+M[1]),g:F("1C"+M[2]),b:F("1C"+M[3])};u q 3z==26?1A:{r:B,g:B,b:B}};6.E.4n={3y:1,2X:1,3G:1,2Z:1,5S:1,5B:1,36:1,N:1,5W:1,5X:1,2n:1,2l:1,2k:1,2j:1,62:1,2T:1,61:1,6w:1,1f:1,5Y:1,5Z:1,3s:1,3t:1,3u:1,3w:1,38:1,5Q:1,X:1,1T:1,2O:1};6.E.49={5P:1,5G:1,5H:1,5F:1,5E:1,16:1,5C:1};6.E.25=[\'5D\',\'5I\',\'5J\',\'5O\'];6.E.3k={\'3d\':[\'24\',\'3W\'],\'2B\':[\'24\',\'3f\'],\'2D\':[\'2D\',\'\'],\'2C\':[\'2C\',\'\']};6.3Q.4b({5N:d(1h,1G,P,2v){q k.2d(d(){7 2t=6.1G(1G,P,2v);7 e=28 6.4m(k,2t,1h)})},37:d(1G,2v){q k.2d(d(){7 2t=6.1G(1G,2v);7 e=28 6.37(k,2t)})},5M:d(14){q k.1V(d(){8(k.1n)6.3m(k,14)})},5K:d(14){q k.1V(d(){8(k.1n)6.3m(k,14);8(k.2d&&k.2d[\'E\'])k.2d.E=[]})}});6.4b({37:d(C,o){7 z=k,4o;z.14=d(){8(6.43(o.2M))o.2M.3Z(C)};z.2h=3O(d(){z.14()},o.1k);C.1n=z},P:{4q:d(p,n,4j,4d,1k){q((-1i.5L(p*1i.63)/2)+0.5)*4d+4j}},4m:d(C,o,1h){7 z=k,4o;7 y=C.L;7 44=6.H(C,"2K");7 1O=6.H(C,"Q");7 G={};z.2L=(28 46()).48();o.P=o.P&&6.P[o.P]?o.P:\'4q\';z.2Q=d(I,W){8(6.E.4n[I]){8(W==\'2H\'||W==\'2G\'||W==\'3N\'){8(!C.1r)C.1r={};7 r=Z(6.1y(C,I));C.1r[I]=r&&r>-4p?r:(Z(6.H(C,I))||0);W=W==\'3N\'?(1O==\'U\'?\'2H\':\'2G\'):W;o[W]=26;G[I]=W==\'2H\'?[0,C.1r[I]]:[C.1r[I],0];8(I!=\'1f\')y[I]=G[I][0]+(I!=\'2O\'&&I!=\'34\'?\'K\':\'\');u 6.1j(y,"1f",G[I][0])}u{G[I]=[Z(6.1y(C,I)),Z(W)||0]}}u 8(6.E.49[I])G[I]=[6.E.1w(6.1y(C,I)),6.E.1w(W)];u 8(/^2D$|2C$|24$|2B$|3d$/i.2q(I)){7 m=W.1t(/\\s+/g,\' \').1t(/1N\\s*\\(\\s*/g,\'1N(\').1t(/\\s*,\\s*/g,\',\').1t(/\\s*\\)/g,\')\').64(/([^\\s]+)/g);6n(I){2b\'2D\':2b\'2C\':2b\'3d\':2b\'2B\':m[3]=m[3]||m[1]||m[0];m[2]=m[2]||m[0];m[1]=m[1]||m[0];S(7 i=0;i<6.E.25.1m;i++){7 1l=6.E.3k[I][0]+6.E.25[i]+6.E.3k[I][1];G[1l]=I==\'2B\'?[6.E.1w(6.1y(C,1l)),6.E.1w(m[i])]:[Z(6.1y(C,1l)),Z(m[i])]}3R;2b\'24\':S(7 i=0;i<m.1m;i++){7 3n=Z(m[i]);7 2r=!6m(3n)?\'3W\':(!/6l|U|1F|6j|6k|6o|6p|6u|6t|6s|6q/i.2q(m[i])?\'3f\':1A);8(2r){S(7 j=0;j<6.E.25.1m;j++){1l=\'24\'+6.E.25[j]+2r;G[1l]=2r==\'3f\'?[6.E.1w(6.1y(C,1l)),6.E.1w(m[i])]:[Z(6.1y(C,1l)),3n]}}u{y[\'6r\']=m[i]}}3R}}u{y[I]=W}q 1A};S(p 1q 1h){8(p==\'L\'){7 1c=6.30(1h[p]);S(1P 1q 1c){k.2Q(1P,1c[1P])}}u 8(p==\'3X\'){8(D.2S)S(7 i=0;i<D.2S.1m;i++){7 1K=D.2S[i].1K||D.2S[i].6i||20;8(1K){S(7 j=0;j<1K.1m;j++){8(1K[j].6h==\'.\'+1h[p]){7 1X=28 69(\'\\.\'+1h[p]+\' {\');7 1g=1K[j].L.68;7 1c=6.30(1g.1t(1X,\'\').1t(/}/g,\'\'));S(1P 1q 1c){k.2Q(1P,1c[1P])}}}}}}u{k.2Q(p,1h[p])}}y.Q=1O==\'U\'?\'1Y\':1O;y.2K=\'1F\';z.14=d(){7 t=(28 46()).48();8(t>o.1k+z.2L){4h(z.2h);z.2h=20;S(p 1q G){8(p=="1f")6.1j(y,"1f",G[p][1]);u 8(2R G[p][1]==\'2V\')y[p]=\'1N(\'+G[p][1].r+\',\'+G[p][1].g+\',\'+G[p][1].b+\')\';u y[p]=G[p][1]+(p!=\'2O\'&&p!=\'34\'?\'K\':\'\')}8(o.2G||o.2H)S(7 p 1q C.1r)8(p=="1f")6.1j(y,p,C.1r[p]);u y[p]="";y.Q=o.2G?\'U\':(1O!=\'U\'?1O:\'1Y\');y.2K=44;C.1n=20;8(6.43(o.2M))o.2M.3Z(C)}u{7 n=t-k.2L;7 2c=n/o.1k;S(p 1q G){8(2R G[p][1]==\'2V\'){y[p]=\'1N(\'+F(6.P[o.P](2c,n,G[p][0].r,(G[p][1].r-G[p][0].r),o.1k))+\',\'+F(6.P[o.P](2c,n,G[p][0].g,(G[p][1].g-G[p][0].g),o.1k))+\',\'+F(6.P[o.P](2c,n,G[p][0].b,(G[p][1].b-G[p][0].b),o.1k))+\')\'}u{7 2W=6.P[o.P](2c,n,G[p][0],(G[p][1]-G[p][0]),o.1k);8(p=="1f")6.1j(y,"1f",2W);u y[p]=2W+(p!=\'2O\'&&p!=\'34\'?\'K\':\'\')}}}};z.2h=3O(d(){z.14()},13);C.1n=z},3m:d(C,14){8(14)C.1n.2L-=67;u{2z.4h(C.1n.2h);C.1n=20;6.65(C,"E")}}});6.30=d(1g){7 1c={};8(2R 1g==\'66\'){1g=1g.39().40(\';\');S(7 i=0;i<1g.1m;i++){1X=1g[i].40(\':\');8(1X.1m==2){1c[6.45(1X[0].1t(/\\-(\\w)/g,d(m,c){q c.6a()}))]=6.45(1X[1])}}}q 1c};6.1u={3K:d(o){q k.1V(d(){7 4=k;4.f={10:6(o.10,k),23:6(o.23,k),21:6.15.3o(k),T:o.T,2p:o.2p,1Z:o.1Z,3Y:o.3Y,17:o.17,2T:o.2T};6.1u.2J(4,0);6(2z).2F(\'6b\',d(){4.f.21=6.15.3o(4);6.1u.2J(4,0);6.1u.3i(4)});6.1u.3i(4);4.f.10.2F(\'6g\',d(){6(4.f.2p,k).1S(0).L.Q=\'1Y\'}).2F(\'6f\',d(){6(4.f.2p,k).1S(0).L.Q=\'U\'});6(D).2F(\'6e\',d(e){7 2g=6.15.3T(e);7 19=0;8(4.f.17&&4.f.17==\'3M\')7 2o=2g.x-4.f.21.x-(4.1z-4.f.T*4.f.10.1W())/2-4.f.T/2;u 8(4.f.17&&4.f.17==\'38\')7 2o=2g.x-4.f.21.x-4.1z+4.f.T*4.f.10.1W();u 7 2o=2g.x-4.f.21.x;7 3D=1i.3C(2g.y-4.f.21.y-4.2s/2,2);4.f.10.1V(d(2m){11=1i.6c(1i.3C(2o-2m*4.f.T,2)+3D);11-=4.f.T/2;11=11<0?0:11;11=11>4.f.1Z?4.f.1Z:11;11=4.f.1Z-11;3a=4.f.2T*11/4.f.1Z;k.L.1T=4.f.T+3a+\'K\';k.L.N=4.f.T*2m+19+\'K\';19+=3a});6.1u.2J(4,19)})})},2J:d(4,19){8(4.f.17)8(4.f.17==\'3M\')4.f.23.1S(0).L.N=(4.1z-4.f.T*4.f.10.1W())/2-19/2+\'K\';u 8(4.f.17==\'N\')4.f.23.1S(0).L.N=-19/4.f.10.1W()+\'K\';u 8(4.f.17==\'38\')4.f.23.1S(0).L.N=(4.1z-4.f.T*4.f.10.1W())-19/2+\'K\';4.f.23.1S(0).L.1T=4.f.T*4.f.10.1W()+19+\'K\'},3i:d(4){4.f.10.1V(d(2m){k.L.1T=4.f.T+\'K\';k.L.N=4.f.T*2m+\'K\'})}};6.3Q.6d=6.1u.3K;',62,456,'||||el||jQuery|var|if|||||function||fisheyeCfg|||||this||||options||return||||else||||||es|255|elem|document|fx|parseInt|props|css|tp|oldStyle|px|style|result|left|position|easing|display|wrs|for|itemWidth|none|body|vp|top|documentElement|parseFloat|items|distance|nodeEl||step|iUtil|color|halign|margins|toAdd|visibility|clientScroll|newStyles|cs|wb|opacity|styles|prop|Math|attr|duration|nmp|length|animationHandler|hb|old|in|orig|scrollTop|replace|iFisheye|128|parseColor|wr|curCSS|offsetWidth|false|F0|0x|scrollLeft|oldVisibility|hidden|speed|fA|currentStyle|iw|cssRules|139|0px|rgb|oldDisplay|np|restoreStyle|ih|get|width|toInteger|each|size|rule|block|proximity|null|pos|de|container|border|cssSides|true|axis|new|clientHeight|clientWidth|case|pr|queue|absolute|namedColors|pointer|timer|event|marginTop|marginRight|marginLeft|nr|marginBottom|posx|itemsText|test|sideEnd|offsetHeight|opt|src|callback|png|parentNode|oldPosition|window|exec|borderColor|padding|margin|nodeName|bind|hide|show|192|positionContainer|overflow|startTime|complete|self|zIndex|while|getValues|typeof|styleSheets|maxWidth|211|object|pValue|borderLeftWidth|oldFloat|borderTopWidth|parseStyle|innerHeight|sizes|relative|fontWeight|getSize|height|pause|right|toLowerCase|extraWidth|169|innerWidth|borderWidth|scrollHeight|Color|func|traverseDOM|positionItems|scrollWidth|cssSidesEnd|windowSize|stopAnim|floatVal|getPosition|browser|img|224|paddingBottom|paddingLeft|paddingRight|230|paddingTop|offsetTop|borderBottomWidth|notColor|fxCheckTag|offsetLeft|pow|posy|240|firstChild|borderRightWidth|165|140|wid|build|getMargins|center|toggle|setInterval|getScroll|fn|break|max|getPointer|emptyGIF|images|Width|className|valign|apply|split|opera||isFunction|oldOverflow|trim|Date||getTime|colorCssProps|tagName|extend|144|delta|offsetParent|insertBefore|styleFloat|clearInterval|indexOf|firstNum|107|245|fxe|cssProps|values|10000|linear|azure|dl|220|iframe|ul|beige|table|button|form|appendChild|fxWrapper|listStyle|cssFloat|getPositionLite|id|msie|ol|wrapper|div|aqua|td|filter|progid|fixPNG|getSizeLite|horizontally|DXImageTransform|Microsoft|tr|prototype|Array|AlphaImageLoader|black|vertically|getBorder||pageY|clientX|pageX|clientY||getPadding|centerEl|getClient|purgeEvents|nextSibling|tbody|caption|float|w_|buildWrapper|removeChild|destroyWrapper|random|createElement|select|hr|input|br|meta|optgroup|colgroup|col|tfoot|thead|th|header|option|frameset|frame|script|textarea|fontSize|outlineColor|Top|borderTopColor|borderRightColor|borderBottomColor|borderLeftColor|Right|Bottom|stopAll|cos|stop|animate|Left|backgroundColor|textIndent|yellow|bottom|white|silver|red|letterSpacing|lineHeight|outlineOffset|outlineWidth|blue|minHeight|maxHeight|PI|match|dequeue|string|100000000|cssText|RegExp|toUpperCase|resize|sqrt|Fisheye|mousemove|mouseout|mouseover|selectorText|rules|dotted|dashed|transparent|isNaN|switch|solid|double|outset|borderStyle|inset|ridge|groove|purple|minWidth|darkred|203|204|153|darkorchid|233|150|fuchsia|gold|148|darkviolet|122|darkorange|85|darkcyan|darkgrey|darkblue|cyan|brown|darkgreen|100|darkmagenta|darkolivegreen|183|189|darkkhaki|215|darksalmon|olive|182|lightpink|lightgrey|orange|193||lightyellow|maroon|navy|magenta|green|lime|lightgreen|238|lightblue|khaki|lightcyan|173|130|indigo|pink|216'.split('|'),0,{}))



    //]]>

    </script>



    <style type='text/css'>

    #jsb {

    width: 100%;

    position: relative;

    padding-bottom:30px;

    top:-20px;

    }

    .jsbc {

    position: absolute;

    height: 50px;

    padding-left: 20px;

    }

    a.jsi {

    display: block;

    font: bold 10px Arial, Helvetica, sans-serif;

    width: 32px;

    color: #000;

    top: 0;

    bottom: 0;

    position: absolute;

    text-align: center;

    text-decoration: none;

    }

    .jsi span {

    display: none;

    padding-left: 20px;

    }

    .jsi img {

    border: none;

    margin: 5px 10px 0px;

    width: 100%;

    }

    </style>


    Now again scroll down to where you see below code:

    <data:post.body/>

    And immediately after it, paste this code:


    <!--jQuery Social Bookmarking Widget Starts-->

    <div id='jsb'>



    <div class='jsbc'>

    <a class='jsi' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='http://1.bp.blogspot.com/_4HKUHirY_2U/S02m0HiNKsI/AAAAAAAAAnU/O-RTAnMAqGQ/delicious_64x64.png'/></a>

    <a class='jsi' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='http://4.bp.blogspot.com/_4HKUHirY_2U/S02nP6xRVqI/AAAAAAAAAoE/BqP1WImIU80/twitter_64x64.png'/></a>

    <a class='jsi' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='http://3.bp.blogspot.com/_4HKUHirY_2U/S02nDPGz8cI/AAAAAAAAAnk/yNOiIzWlszw/facebook_64x64.png'/></a>

    <a class='jsi' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='http://1.bp.blogspot.com/_4HKUHirY_2U/S02m66pe0wI/AAAAAAAAAnc/i_SxHpSLgyk/digg_64x64.png'/></a>

    <a class='jsi' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='http://2.bp.blogspot.com/_4HKUHirY_2U/S02nIwF3_9I/AAAAAAAAAn0/io-qL1cQ5y4/stumbleupon_64x64.png'/></a>

    <a class='jsi' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/S02nL60gt2I/AAAAAAAAAn8/q_Ez6laEWlA/technorati_64x64.png'/></a>

    <a class='jsi' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><span>RSS</span><img alt='RSS' src='http://1.bp.blogspot.com/_4HKUHirY_2U/S02nF5OyGVI/AAAAAAAAAns/qkYY6nHB5o8/rss_64x64.png'/></a>

    </div>

    </div>

    <script type='text/javascript'>

    jQuery(document).ready(

    function()

    {

    jQuery(&#39;#jsb&#39;).Fisheye(

    {

    maxWidth: 48,

    items: &#39;a&#39;,

    itemsText: &#39;span&#39;,

    container: &#39;.jsbc&#39;,

    itemWidth: 64,

    proximity: 80,

    alignment : &#39;left&#39;,

    valign: &#39;bottom&#39;,

    halign : &#39;center&#39;

    }

    )

    }

    );

    </script>

    <!--jQuery Social Bookmarking Widget Ends-->


    Note : Host above images yourself.


    Now Click Save Template





    How to Add Social Bookmarking Icons on Every Blogger Post 





    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <!-- Social Bookmarking Icons Start http://bdlab.blogspot.com-->

    <style type='text/css'>

    .bookmark img { border: 0;

    padding:0px; }

    .bookmark a:hover {

    position: relative;

    top: 1px;

    left: 1px; }

    </style><span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='30%'><div expr:id='&quot;sbtxt&quot;+data:post.id'>Bookmark this post:<span style='display:none'><a href='http://www.bloggerplugins.org'>blogger tutorials</a> <a href='http://www.bloggerplugins.org/2007/09/social-bookmarking-elements-after-each.html'>Social Bookmarking Blogger Widget</a></span></div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script></td><td><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,19);&quot;' rel='nofollow' target='_blank'><img alt='StumpleUpon' src='http://lh4.ggpht.com/_u4gySN2ZgqE/SnVFoJLmchI/AAAAAAAAAjg/-2mcU8UjohA/icon_sb_stumb.gif%5B4%5D.png?imgmax=800'/></a> <a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,1);&quot;' rel='nofollow' target='_blank'><img alt='DiggIt!' src='http://lh5.ggpht.com/_u4gySN2ZgqE/SnVFiI7X5sI/AAAAAAAAAjE/uoviRb4H0V8/icon_sb_dig%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,2);&quot;' rel='nofollow' target='_blank'><img alt='Del.icio.us' src='http://lh4.ggpht.com/_u4gySN2ZgqE/SnVFhIJeylI/AAAAAAAAAjA/efK7u8suKvs/icon_sb_del%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,3);&quot;' rel='nofollow' target='_blank'><img alt='Blinklist' src='http://lh5.ggpht.com/_u4gySN2ZgqE/SnVFgIXzFNI/AAAAAAAAAi8/Vgqkftp6mvk/icon_sb_bli%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,4);&quot;' rel='nofollow' target='_blank'><img alt='Yahoo' src='http://lh3.ggpht.com/_u4gySN2ZgqE/SnVFqxs6oCI/AAAAAAAAAjs/s3Gqfd7n0KQ/icon_sb_yah%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,8);&quot;' rel='nofollow' target='_blank'><img alt='Furl' src='http://lh6.ggpht.com/_u4gySN2ZgqE/SnVFiyVxsBI/AAAAAAAAAjI/Zwu2964qKmg/icon_sb_fur%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://www.technorati.com/cosmos/search.html?url=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,9);&quot;' rel='nofollow' target='_blank'><img alt='Technorati' src='http://lh3.ggpht.com/_u4gySN2ZgqE/SnVFpG5R_SI/AAAAAAAAAjk/-cFqb1ngIIA/icon_sb_tec%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,10);&quot;' rel='nofollow' target='_blank'><img alt='Simpy' src='http://lh6.ggpht.com/_u4gySN2ZgqE/SnVFmiSmYfI/AAAAAAAAAjY/oy9Mov0ttUA/icon_sb_sim%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,11);&quot;' rel='nofollow' target='_blank'><img alt='Spurl' src='http://lh6.ggpht.com/_u4gySN2ZgqE/SnVFnSDDHYI/AAAAAAAAAjc/rreFKKk8y84/icon_sb_spu%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,17);&quot;' rel='nofollow' target='_blank'><img alt='Reddit' src='http://lh4.ggpht.com/_u4gySN2ZgqE/SnVFlgfMydI/AAAAAAAAAjU/s6JQW7sjXGQ/icon_sb_red%5B4%5D.gif?imgmax=800'/></a> <a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot;+data:post.title' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,20);&quot;' rel='nofollow' target='_blank'><img alt='Google' src='http://lh4.ggpht.com/_u4gySN2ZgqE/SnVFj9KzF0I/AAAAAAAAAjM/JuLU-525wD8/icon_sb_goo%5B4%5D.gif?imgmax=800'/></a>

    <script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&amp;login=tweettrackjs&amp;apiKey=R_7e9987b2fd13d7e4e881f9cbb168f523' type='text/javascript'/>

    <script charset='utf-8' src='http://blogger-plugins.googlecode.com/files/bit.ly.js' type='text/javascript'/>

    <a expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; ~ &quot;+data:post.url' expr:onclick='&quot;return TweetAndTrack.open(this, \&quot;&quot; + data:post.url + &quot;\&quot;);&quot;' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,21);&quot;' rel='nofollow' target='_blank'><span style='display:none;'>I&#39;m reading: <data:post.title/> ~</span>

    <img alt='Twitter' src='http://lh5.ggpht.com/_u4gySN2ZgqE/SnVFp0q8DWI/AAAAAAAAAjo/ZajyLZ5HqSY/icon_sb_twitter%5B4%5D.png?imgmax=800'/></a> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:onmouseout='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,0);&quot;' expr:onmouseover='&quot;javascript:showsbtext(\&quot;sbtxt&quot; + data:post.id + &quot;\&quot;,22);&quot;' rel='nofollow' target='_blank'><img alt='FaceBook' src='http://3.bp.blogspot.com/_u4gySN2ZgqE/Snq8BsUw8pI/AAAAAAAAAnM/T1ggoBrv6tk/s400/fbicon.png'/></a>

    </td>

    </tr>

    </table><br/>

    </span>

    <!-- Social Bookmarking Icons End http://bdlab.blogspot.com-->



    Now Click Save Template







    Animated Sharing Bar With JQuery and CSS  



    This is a rotating or you can say animated sharing option by Tutorialzine that you can add to your blog. See the demo to have a basic idea about this sharing box. 


    To install this animated sharing box add this CSS file above ]]></b:skin> . Also don’t forget to check the expand widget templates box.

    /* The code for the share box starts here: */

    #share{

    /* The share box container */

    width:500px;

    background:#ececec;

    height:220px;

    margin:60px auto;

    overflow:hidden;

    -moz-border-radius:12px;

    -webkit-border-radius:12px;

    border-radius:12px;

    }

    #share-label{

    /* The image on the right */

    background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/share.png) no-repeat 50% 50%;

    float:left;

    height:220px;

    width:200px;

    }

    #stage{

    /* This is where the animation takes place */

    position:relative;

    border-right:1px solid #DDDDDD;

    width:290px;

    height:220px;

    background:white;

    float:left;

    border-bottom-left-radius:12px;

    border-top-left-radius:12px;

    -moz-border-radius-bottomleft:12px;

    -moz-border-radius-topleft:12px;

    -webkit-border-bottom-left-radius:12px;

    -webkit-border-top-left-radius:12px;

    }

    .btn{

    /* This class is assigned to every share button */

    background-color:white;

    height:90px;

    left:0;

    top:0;

    width:60px;

    position:relative;

    margin:20px 0 0 10px;

    float:left;

    }

    .bcontent{

    /* Positioned inside the .btn container */

    position:absolute;

    top:auto;

    bottom:20px;

    left:0;

    }

    /* Individual rules for every share button */

    .digg{ background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/digg_reflection.png) no-repeat -4px bottom;}

    .reddit{ background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/reddit_reflection.png) no-repeat -4px bottom;}

    .facebook{ background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/facebook_reflection.png) no-repeat bottom center;}

    .tweetmeme{ background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/twit_reflection.png) no-repeat -5px bottom;}

    .dzone{ background:url(http://demo.tutorialzine.com/2009/12/animated-share-buttons-jquery-css/img/dzone_reflection.png) no-repeat -7px bottom;}

    .thanksto{

    position:absolute;

    bottom:2px;

    right:110px;

    font-size:10px;

    }

    .thanksto a,.thanksto a:visited{

    color:#BBB;

    }

    /* Customizing the facebook share button */

    span.fb_share_no_count {

    display:block;

    }

    span.fb_share_count_top.fb_share_no_count {

    line-height:54px;

    }

    span.fb_share_count_nub_top.fb_share_no_count{

    display:none;

    }

    span.fb_share_no_count span.fb_share_count_inner {

    background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;

    display:block;

    }


    Install these jquery scripts above </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

    <script src='http://www.yourjavascript.com/5718110189/rotating%20social.js' type='text/javascript'/>


    Now to show the plugin below every post install this HTML below <data:post.body/>


    <div id="share">
    <div id="stage">

    <div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
    <div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
    <div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
    <div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
    <div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>
    </div>
    <div id="share-label">
    <!-- This is where the share some love image appears -->
    </div>
    </div>


    Now save your template and its done.









    Bounce & Share - Social Bookmarking Widget 



    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"

    STEP #2
    Now find (CTRL+F) this code in the template:

    </head>

    And immediately before it, paste this code:

    <!--BOUNCING-ICONS-START-->

    <link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css' media='all' rel='stylesheet' type='text/css'/>

    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

    <script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js' type='text/javascript'/>

    <!--BOUNCING-ICONS-STOP-Help-http://bdlab.blogspot.com-->


    STEP #3:
    Now find this code in the template:

    <data:post.body/>

    And immediately BELOW/AFTER it, paste this code:

    <!--SOCIAL-BOOKMARKING-BUTTONS--><br/>



    <b:if cond='data:blog.pageType == &quot;item&quot;'>



    <center>



    <ul id='nav-shadow'>



    <li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>



    <li class='button-color-2'><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='button-color-3'><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='button-color-4'><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='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></ul></center>



    <a href="http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>



    </b:if>



    <!--SOCIAL-BOOKMARKING-BUTTONS-http://bdlab.blogspot.com-->




    Now Click Save Template













    How to Add Fancy "Share This" Social Bookmarking Widget to blogger 


    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    ]]></b:skin>

    And immediately before it, paste this code:

    /* Fancy SocialBookmark*/

    #sharebox{
    height:48px;
    width:400px;
    margin:0;
    padding:5px 0;
    }

    ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
    ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;}
    ul.sharebox li a { margin:0 0 0 -24px; display:block;}
    ul.sharebox li a:hover { margin:0 0 0 -8px; }
    ul.sharebox li img { border:none;}


    STEP #3
    Now find (CTRL+F) this code in the template:

    </head>

    And immediately before it, paste this code:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

    <script type='text/javascript'>
    (function($){
    $.fn.sharebox = function(){
    var element = this;

    $(element).find(&quot;li&quot;).each(function(i){
    $(this).css(&quot;z-index&quot;, 12- i);
    if (i&gt;0)
    $(this).css(&quot;left&quot;, i * 24 + 100);
    });

    }
    })(jQuery);
    </script>
    <script type='text/javascript'>
    $(document).ready(function(){
    $(&quot;#sharebox&quot;).sharebox();
    });
    </script>

    STEP #4
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <ul class='sharebox' id='sharebox'>
    <li><img alt='Share this' src='http://lh3.ggpht.com/_gQTW6AzEt50/TAN-IItrhcI/AAAAAAAAAKg/6Ofb7QQmW5E/s400/sharethis.png'/></li>
    <li><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Digg' src='http://lh5.ggpht.com/_gQTW6AzEt50/TANwPDNFTqI/AAAAAAAAAJA/_iTBPexiQUc/s400/digg_48.png'/></a></li>
    <li><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to StumbleUpon' src='http://lh5.ggpht.com/_gQTW6AzEt50/TANwXH99KHI/AAAAAAAAAJY/1MhNYohLgKw/s400/sumbleupon_48.png'/></a></li>
    <li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Delicious' src='http://lh3.ggpht.com/_gQTW6AzEt50/TANwLsiJKaI/AAAAAAAAAI4/W-8Giiq1jdo/s400/delicious_48.png'/></a></li>
    <li><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Technorati' src='http://lh3.ggpht.com/_gQTW6AzEt50/TANwaKO3III/AAAAAAAAAJg/1GGHLlMnMVI/s400/technorati_48.png'/></a></li>
    <li><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Reddit' src='http://lh3.ggpht.com/_gQTW6AzEt50/TANwUrLlzcI/AAAAAAAAAJQ/4IumvWuAy3k/s400/reddit_48.png'/></a></li>
    <li><a expr:href='&quot; http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Mixx' src='http://lh5.ggpht.com/_gQTW6AzEt50/TANwRvsfp4I/AAAAAAAAAJI/GnhXzIG0Yus/s400/mixx_48.png'/></a></li>
    <li><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Sumbit to Twitter' src='http://lh4.ggpht.com/_gQTW6AzEt50/TAN0zpbiOBI/AAAAAAAAAKQ/ZrUXz3uWKIU/s400/twitter_boxed_48.png'/></a></li>
    <li><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Furl' src='http://lh5.ggpht.com/_gQTW6AzEt50/TAN0r1U2u1I/AAAAAAAAAJ4/sROtJssSojA/s400/furl_48.png'/></a></li>
    <li><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Design Float' src='http://lh4.ggpht.com/_gQTW6AzEt50/TAN0owol6GI/AAAAAAAAAJw/BkW7TAqnDcQ/s400/designfloat_48.png'/></a></li>
    <li><a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Blinklist' src='http://lh3.ggpht.com/_gQTW6AzEt50/TAN0mEMPlOI/AAAAAAAAAJo/-8XBeBFn-B0/s400/blinklist_48.png'/></a></li>
    <li><a expr:href='&quot;http://buzz.yahoo.com/article/&quot; + data:post.url' target='_blank'><img alt='Sumbit to Yahoo Buzz' src='http://lh5.ggpht.com/_gQTW6AzEt50/TAN02Tt0lCI/AAAAAAAAAKY/DJQhWo-EVQI/s400/yahoo_48.png'/></a></li>
    <li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Sumbit to Google Bookmarks' src='http://lh6.ggpht.com/_gQTW6AzEt50/TAN0uapFtxI/AAAAAAAAAKA/XSceCbQg5gU/s400/google_48.png'/></a></li>
    </ul>


    Now Click Save Template












    How to Add "Fisheye Effect" Social Bookmarking Widget to Blogger 





    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    ]]></b:skin>

    And immediately before it, paste this code:

    /* Social Bookmarking Widget */
    #fisheye2 {
    width: 100%;
    position: relative;
    padding-bottom:30px;
    top:-20px;
    }
    .fisheye-container2 {
    position: absolute;
    height: 50px;
    padding-left: 20px;
    }
    a.fisheye-item2 {
    display: block;
    font: bold 10px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    top: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    }
    .fisheye-item2 span {
    display: none;
    padding-left: 20px;
    }
    .fisheye-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
    }
    /* Social Bookmarking Widget Ends */

    STEP #3
    Now find (CTRL+F) this code in the template:

    <b:skin><![CDATA[

    And immediately before it, paste this code:

    <script src='https://sites.google.com/site/bloggerhacksnet/jquery1.3.2.js' type='text/javascript'/>
    <script src='https://sites.google.com/site/bloggerhacksnet/interface.js' type='text/javascript'/>


    STEP #4
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:

    <!--Social Bookmarking Widget Starts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <p style='font-size:85%; font-weight:bold;'>Bookmark &amp; Share:</p>
    <div class='fisheye' id='fisheye2'>

    <div class='fisheye-container2'>
    <a class='fisheye-item2' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='http://lh4.ggpht.com/_gQTW6AzEt50/TAixDfYiOII/AAAAAAAAALo/ewSh_vqpLbE/s400/101466-red-white-pearl-icon-social-media-logos-delicious.png'/></a>
    <a class='fisheye-item2' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='http://lh6.ggpht.com/_gQTW6AzEt50/TAixFPCBamI/AAAAAAAAALw/fPIxQ2E3wDQ/s400/101473-red-white-pearl-icon-social-media-logos-digg.png'/></a>
    <a class='fisheye-item2' expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='http://lh6.ggpht.com/_gQTW6AzEt50/TAixGwa2QyI/AAAAAAAAAL4/S7bTwexRBU0/s400/101484-red-white-pearl-icon-social-media-logos-facebook-logo.png'/></a>
    <a class='fisheye-item2' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank'><span>RSS</span><img alt='RSS' src='http://lh5.ggpht.com/_gQTW6AzEt50/TAixIYvPVsI/AAAAAAAAAMA/Jozdh_reQcY/s400/101532-red-white-pearl-icon-social-media-logos-rss-basic.png'/></a>
    <a class='fisheye-item2' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='http://lh3.ggpht.com/_gQTW6AzEt50/TAixJ6FDkNI/AAAAAAAAAMI/uMuTI_9gjJY/s400/101544-red-white-pearl-icon-social-media-logos-stumbleupon.png'/></a>
    <a class='fisheye-item2' expr:href='&quot;http://technorati.com/faves?add=&quot; + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='http://lh5.ggpht.com/_gQTW6AzEt50/TAixLarz8ZI/AAAAAAAAAMQ/g8huhtCqhbc/s400/101550-red-white-pearl-icon-social-media-logos-technorati-logo2.png'/></a>
    <a class='fisheye-item2' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='http://lh5.ggpht.com/_gQTW6AzEt50/TAixM4Txq6I/AAAAAAAAAMY/5BAA92q-CGs/s400/101556-red-white-pearl-icon-social-media-logos-twitter.png'/></a>
    </div>
    </div>
    <script type='text/javascript'>
    jQuery(document).ready(
    function()
    {
    jQuery(&#39;#fisheye2&#39;).Fisheye(
    {
    maxWidth: 64,
    items: &#39;a&#39;,
    itemsText: &#39;span&#39;,
    container: &#39;.fisheye-container2&#39;,
    itemWidth: 60,
    proximity: 80,
    alignment : &#39;left&#39;,
    valign: &#39;bottom&#39;,
    halign : &#39;center&#39;
    }
    )
    }
    );
    </script>
    </b:if>
    <!--Social Bookmarking Widget Ends-->



    Now Click Save Template











    ADD Woven Fabric SOCIAL NETWORK BUTTONS TO BLOGGER 




    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <div class='post-footer-line post-footer-line-0'>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    Share This:

    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://i42.tinypic.com/29bjz1g_th.png'/></a>



    <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' rel='external nofollow'><img alt='Digg' src='http://i43.tinypic.com/2h6g8hu_th.png' /></a>



    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://i40.tinypic.com/352m1xf_th.png'/></a>



    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://i43.tinypic.com/9gwqo3_th.png'/></a>



    <a expr:href='&quot;http://twitter.com/home?status=Check this Out: &quot; + data:post.url + &quot; | &quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://i43.tinypic.com/30v2bg7_th.png'/></a>

    </b:if>

    </div>




    Now Click Save Template






    Add Burnt Wood Social Network Buttons To Blogger 



    Instructions To Follow:
    STEP #1
    Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates"


    STEP #2
    Now find (CTRL+F) this code in the template:

    <data:post.body/>

    And immediately after it, paste this code:


    <div class='post-footer-line post-footer-line-0'>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    Share This:

    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://i39.tinypic.com/2dr71pj_th.png'/></a>



    <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' rel='external nofollow'><img alt='Digg' src='http://i44.tinypic.com/1g5fyv_th.png' /></a>



    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://i39.tinypic.com/11me0x5_th.png'/></a>



    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://i39.tinypic.com/35bwj0y_th.png'/></a>



    <a expr:href='&quot;http://twitter.com/home?status=Check this Out: &quot; + data:post.url + &quot; | &quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://i44.tinypic.com/k18iv_th.png'/></a>

    </b:if>

    </div>



    Now Click Save Template

    5 comments: