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:

<style type='text/css'>

div.sexy-bookmarks {

height:54px;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yKsu6YctPOPYGjqrNUlW9jk3tGyIso3LFD-5D7Ob_3HKJ1p8ewIzgd6S_LfVMJq5uaoT2OOITEnMfr4GDvpUE3PGxQGuI3ILzfN59XFlKji3m41eQLbSeooAevvEY1E2qVxKty1o29Ma/') no-repeat left bottom;

position:relative;

width:540px;

}

div.sexy-bookmarks span.sexy-rightside {

width:17px;

height:54px;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yKsu6YctPOPYGjqrNUlW9jk3tGyIso3LFD-5D7Ob_3HKJ1p8ewIzgd6S_LfVMJq5uaoT2OOITEnMfr4GDvpUE3PGxQGuI3ILzfN59XFlKji3m41eQLbSeooAevvEY1E2qVxKty1o29Ma/') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja-GTS-BR1vn5vcEoGsjwju1WoqmCKbU_6tsszXUEhptiIZg1I1HDiHc81jcE0fAQEYH14tXdpnCxJpM6T5oqcX5hdc7ZD3W2Q-AeTpl70jcKSvkIA8pGGTYCN7qBEHW63FEUs4pfIBGds/') 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>

STEP #2

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

<data:post.body/>

And immediately BELOW/AFTER it, paste this code:

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='"http://del.icio.us/post?url="+ data:post.url + "&title=" + 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='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + 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='"http://reddit.com/submit?url="+ data:post.url + "&title=" + 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='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + 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='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + 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='"http://www.mixx.com/submit?page_url=" + 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 + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + 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='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + 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='"http://technorati.com/faves?add="+ data:post.url + "&title=" + 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='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + 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='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + 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='"http://friendfeed.com/?url=" + data:post.url + "&title=" + 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='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + 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.

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:

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

just before it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<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/>

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

<b:if cond='data:blog.pageType == "item"'>

<div class='share-icons'>



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



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



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



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



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



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



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



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



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



<a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Designfloat' src='http://icon URL'/></a>



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



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



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



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



<a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Furl' src='http://icon URL'/></a>



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



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



<a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Blogmarks' src='http://icon URL'/></a>



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

<a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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/>

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5fgUj_ngXiriVKjfZpmY1pK2zV4kZJbB959rpmmKxpkTN_28eegDJmLdWd8qtrehr0LLJIcf4VHBNT5xEOOItI24FyqV97opTudsND1slY6eQxE_grfW1L2TFOMe0OZhK9KCSV5aVwSw/' width='16'/></td>
<td height='24'><a expr:href='"http://www.facebook.com/sharer.php?&u=" + data:post.url' target='_blank'>Share on Facebook</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYFNKe5eIshISjBtaO-S2YI8eEJwmB_3fHO99tUuuRSKKq6tLmaPjZ9BxWem8hKJbQXbttTbA8VIX8jh4n9gKx9tCYYQw4tlGRMmbiLspm7Fm6YZD-r3HTDj0To7zZFCM4Vod28YSVYk/'/></td>
<td height='24'><a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'>Share on Twitter</a>
</td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3s4C2v4dVADudQ7wUOaWWJJT783f0DsKvzYaAM34Lo4XhCKIVBSA6RJ2AqYRwcNO63Q8oYToYHBHkOrc8k3TwFN7_SLaxQi7yy3VqF0uIcUs6-sqo6i1YV_nRPUmViQlru52z4cmCQA/' width='16'/></td>
<td height='24'><a expr:href='"http://www.stumbleupon.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on StumbleUpon</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIX3KoUtCfzNCZTZ6YRoYNKAouYvbvebRi0jzHGowjZk9ZfZrgnfPhqlUZEyFaFFzIH-H4opc_yvQjS90ou1UAY0KaVLNlSDQi_VZjwKlX1g3TWuq-BmcOuL3eZdL4fUtYeLx6SM3xBfA/' width='16'/></td>
<td height='24'><a expr:href='"http://del.icio.us/post?v=4&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Delicious</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZM_gK8xb6ckTweYKdDs6v73daH71rsYR5Ikeuz2Mt-X7WyPweyGYF6bkw2GV8kRa_PSRVO1blB-vU8ZOHzlBJciqsRkrwkluxB_RJ9WZbTjhfQ1kl0v6Kr8a4zL2ikFS4ogn1lC3RF3s/' width='16'/></td>
<td height='24'><a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzV3UrWiRrmsrgpk98dgDx6_c65h1Bqj2iZ7CRflDi3QXqk9ros2p5-RXuhBBmHRinJPhTlnOq_mXG2stGnn6EzY9nu5zgZYS0tnPDwvvEnHLYdLYvJp2mPu_qb8YSvjDWMuhrPPv4r0/' width='16'/></td>
<td height='24'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Share on Digg</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqGXsnYMgEYDO5nZmZBYb_G5cXHDKV06gP03p65YLtMaZBuFaJJDA1HcOpzOa0seFQsq2EIaLKK53FYqa2BDvJqOxFSi8y2YXzcEGNiTdp9ITYrGXVPI-cYyipkUef60mwF9_JMDtqjAk/' width='16'/></td>
<td height='24'><a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url' rel='nofollow' target='_blank'>Share on simpy</a></td>
</tr>
<tr>
<td height='24'><img border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhf-mHmjdnwiys3ppA8Nt-2YdENnD0ADl67fIEyu2ZRy-xObtNluFA-JqEKhWn9g5pw0vDYdNzvOEAkxYIWoYKNOa3d55r6cV58gH_WQqLT1M3btv4qMYlNeJVgGFKn8B6xoj3FVjCpg/' width='16'/></td>
<td height='24'><a expr:href='"http://technorati.com/signup/?f=favorites&Url=" + 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT9Iyf93sQ4iKNbAbvSo5HMXAim1sSABZ68Vw1xq6PTJl-c_UGiXrz1-EMAwML_4tlD6Jg7SWg6ycv7GatuEX4zEH7OLdC3e9m_885XahjJrigB-MawVVp2Dp1snFjXwwElbYemFPkPb8/' width='16'/></td>
<td height='24'><a expr:href='"http://www.furl.net/storeIt.jsp?&u=" + 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjxtTy4_oToBZWh-0TFWwvX3oRZW761PI8MROQpYqISRSPcLcV6-72y98FbvEbjMlzUuD0bRMyrdXDc6GDmYM7xIi9AaxhK1eOgXKFfq97rOPCTBoYrglP1tVXSIz9Gj8xrLRR3Xvcvg/' 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:

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:

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 = 'YOUR-TWITTER-USERNAME-HERE';

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

Now again scroll down to where you see below code:

<data:post.body/>

And immediately after it, paste this code:

<div id='jsb'>

<div class='jsbc'>

<a class='jsi' expr:href='"http://del.icio.us/post?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVYIi6nJUF-4aljKla36-RrQOG4yQBXAp5Vo7wkngzeFwBqp6ounWPsKhGTeVVscwpC9CRlB80kW4cOaLoP6Y5-KE_jj9Ap3BGqS2hEZnHZ_v3XRzKImYNKs9x4XZsdTEBUAMn5voFJJ5z/'/></a>

<a class='jsi' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoilrM-XRCmQdPgRvFvxANLZkB7QB9840BgOSD475Dtlej3Bjy309ou_ahofUFJIqByIQoGJLY47-x9uLUeVyxhgRdnuZg5glpUc_D70MkO_IZx_tJvU6k4dz-gveS_Ane1QA5mSzHWhU/'/></a>

<a class='jsi' expr:href='"http://www.facebook.com/share.php?u=" + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIQ1fUHhuyHem5oXu8uEHK-ThMFKBFMcvoJDVr9p-f_urMV9CFHzApmc6z7iGB4udpX0Ao2ZbRhRPUBGyO50eVs7ga-SMOQ82Qx7jbceMUUtkVRd5QLrMXdq7YIp0bwhR62_SU7JnYnqD/'/></a>

<a class='jsi' expr:href='"http://digg.com/submit?phase=2&url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFEV2IQRVqgVjq_6aew4d76pOLzWhzJpnpGRNHS3bHTn9ztDT1j_b3ZgOBVm-CZIUCYLF_rYiCOWa7Npl6y16esFdbr6Pvpc781QChyphenhyphenUl6alwhiKFYEVGmj3NdNrL8pXYl7BCr8sudcQmL/'/></a>

<a class='jsi' expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCy1nv-b6g5hhUqJYUWTbSVgGEtMRQQWFWj28fcgQ4CQApcKVqnjJR6GF84ZZCW2Ppx13Y0eYXC_BI18QV7VflWw-aQ19EUo8TfAN0GmQfwpoFe0Ca8v8Fwk3ga0SxM8qlhhndtXUQ7N3K/'/></a>

<a class='jsi' expr:href='"http://technorati.com/faves?add=" + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF2IOUebbn9AXOdE1vN063K1_T6t4UJDBGCMKa3UiF_156Rl2N9sLSV5xJHdGkKCDO-ogzXyVKiVQ8boVzS3rHe4JYLPaOrcyocaFwAk3HL6wARfBOS7gJx1PqZJmdgCJeV7V2CYSrdr-i/'/></a>

<a class='jsi' expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><span>RSS</span><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitUVh-JWJAcV-HhZpyomObu1mX3KXZ3aQW5ESzotI6_r-H5iURHnJvAKm2JtIZsBd73VfYDFizEZQCJoKMDirTKwdFNenoy8ruEsIDsbBP-hfPc73OgGrIaQizywYXgoFv2AZ-GUtL7VEh/'/></a>

</div>

</div>

<script type='text/javascript'>

jQuery(document).ready(

function()

{

jQuery('#jsb').Fisheye(

{

maxWidth: 48,

items: 'a',

itemsText: 'span',

container: '.jsbc',

itemWidth: 64,

proximity: 80,

alignment : 'left',

valign: 'bottom',

halign : 'center'

}

)

}

);

</script>

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:

<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='"sbtxt"+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("sbtxt" + "<data:post.id/>",0)</script></td><td><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",19);"' rel='nofollow' target='_blank'><img alt='StumpleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizuXxxrNTrwLaxhQ7hgRYXZb2FDiG-A6An8eT57U5qXs51l18CehV-tkErcpus1iirsXKrAHM0py7i8jS8iwnXYMq9r2AAlI2ob8jrZ7hzv1Q2_MbgjX83NxeNtfqd2716O6Ntjdze7mU/?imgmax=800'/></a> <a expr:href='"http://digg.com/submit?phase=3&url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' rel='nofollow' target='_blank'><img alt='DiggIt!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA0j7MwKrS8nOII_O38UUJF_nZ26NCydCNshpyOQfz0vl2WHSx6W5CWv2AI0Jnb3D46DA7wkqLyy2PB_4its4dPZ8I03dGkoUh_rajW8MGXEz4cRD-kZrKs2aBWewgNaAXUTC3y_CJcIA/?imgmax=800'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' rel='nofollow' target='_blank'><img alt='Del.icio.us' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XGr0_XFdgZrXd6dO7Z8_qd53JZDiOfTjZgIv2b4AsA-Sd_b1My1N-2HMT1gdf_khIQiou3Fp4vRXL2XFk5cagMVBFvWSC3v6IqEXXfFU4O-pLthhb4kWVyqLBS9vidIDwJefukqEw00/?imgmax=800'/></a> <a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&Title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' rel='nofollow' target='_blank'><img alt='Blinklist' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cIsYCxFAHuocJS7erJjk0gzP_UM85NbLclFIuHqGJnKY0nWHJLFZWs6zovsFXUk3SA9inIunHkka9M9hf5WBuHkJPc0-wVtojLzIRMGwjEcRz0tNjW2YiusH3afXDqFkOl6vZchR-Ss/?imgmax=800'/></a> <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' rel='nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKzy39V3WEtFUPADlHpwQZzR0swuX2yOqIjoYA-FqSyFgAMgcnMVoReH7lull9cXx_F_3GhgvoqlyLQahrRexxta663xXI06kAx56ZzBvVQRSg6ASlakVFICshHCMJ6aLfiOghoGf4DY/?imgmax=800'/></a> <a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' rel='nofollow' target='_blank'><img alt='Furl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJguRm8CTp_6KHNgYPnttYISvLFqojUbfXRBusdHTqinNobXD__UKLmr4SmgO0o-ELS30vd_NLjSUdc4jKdJZ4yLTbcVNXS5R-bek1rpQUgIVlYo_SPIsmwErJRXxvGEa0PkkEuGk8bzE/?imgmax=800'/></a> <a expr:href='"http://www.technorati.com/cosmos/search.html?url=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",9);"' rel='nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZEtfeE4plmZCOGgGaOljgr4tDVWO4LmBFpdXVWEdN8hDSDDAsEYgcnb-WrdusNtL3tnTWIjrs2oesiaHiWXMumzNVvpYi9NdaYt5u7oaZPHYKIopX8Ro5e86z4ymfQ0ER2fTYP4lfLI/?imgmax=800'/></a> <a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' rel='nofollow' target='_blank'><img alt='Simpy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgclwwiwLnUZOtoE7JN2hTLJWr81c9tZTHUxr8LeGKm5KhczYRzCbJglNOZrQ8YcLCY7nKHZCbk41kv9F7EJWklJSrN9bWueg_8WJuiySyPork5WFBZXeQi-eEVcp76JgmL_CqudGzNTz0/?imgmax=800'/></a> <a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' rel='nofollow' target='_blank'><img alt='Spurl' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_FN5Qme6tGH6Hs0NVKlKQqhPESLO1f5pY8-wB3ezn7tg-mClv-VY6FISOvm3wQF3YFiNQ4-gcYEhz_PysnGaIU14OwuOP26eFHzHoBFhcTGK6nxtctckjnwvVEgZbcrNggQOvb_Jbpv4/?imgmax=800'/></a> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",17);"' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynaf8-4zV-kr2dvl9I4k0GcUTx5rd5ygzS_6jNfZfMB49PF-go3Jeig4JMjCjRzlm90UIzzIIvQInlHA_cuN4U4bOpSgdfFJwgcZs6tIWj2mwOF9USmEDmtetQy_rcFzKENJyF3U38qA/?imgmax=800'/></a> <a expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",20);"' rel='nofollow' target='_blank'><img alt='Google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmJ3SmTNGffS3lrwfIwDrlZ7u1Sx8q-lDE3aDX0rADc0HOvtsZSGVmGZQGLnDSxPnPG6mMstpfgFsminSobPMR1FVZ22zP0ZqgL_Ac9XhZofxnsZP77E6CRoWTpEAx-aC_zbrITD_7xGU/?imgmax=800'/></a>

<script charset='utf-8' src='http://bit.ly/javascript-api.js?version=latest&login=tweettrackjs&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='"http://twitter.com/?status=" + data:post.title + " ~ "+data:post.url' expr:onclick='"return TweetAndTrack.open(this, \"" + data:post.url + "\");"' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",21);"' rel='nofollow' target='_blank'><span style='display:none;'>I'm reading: <data:post.title/> ~</span>

<img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiigBqKo0jzasEQqZPU55Tjyp48vSwfrSyKwf6s7WDrkHKTA2RLCPfW9obDWdCVuzrPryrh1ScrZlHJR1MTXxB9liJrpCOmHbILFzuJg4rltzf3YVlqxs_yQj8eWSnjYfdSlg8ssKJHAKE/?imgmax=800'/></a> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",22);"' rel='nofollow' target='_blank'><img alt='FaceBook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQah-mOE3vZvDAl-WmuL4-D8B1nSxcm9vOYcYCThCR7vt970xbeo5zzIfMaN51igXDhDQ3Vy3atDPFPeAumtNmtA2vahjQQpWOWFv_fe8orQaqRoK-2aZjHfkPx1S9ORa0MSJy6_YMVp8/s400/fbicon.png'/></a>

</td>

</tr>

</table><br/>

</span>

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.

Demo

Download

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>

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

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

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

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

<data:post.body/>

And immediately BELOW/AFTER it, paste this code:

<br/>

<b:if cond='data:blog.pageType == "item"'>

<center>

<ul id='nav-shadow'>

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

<li class='button-color-2'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='button-color-3'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='button-color-4'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='button-color-5'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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>

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:

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

<data:post.body/>

And immediately after it, paste this code:

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:

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

<data:post.body/>

And immediately after it, paste this code:

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

<div class='fisheye-container2'>
<a class='fisheye-item2' expr:href='"http://del.icio.us/post?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Delicious</span><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6DlPFKBPHr4rIH9w6z18ZgF0C5xh5zFcVofh_5zW8CmJCrB0_hUHAnGGfDzBPjoGG7dyIWHph2UwNCn7fRDOpTlStglfxq8ShcmhMEgyALbsEb84nOKol4bgzf85jruqA3ZyQy9nuYFM/s400/101466-red-white-pearl-icon-social-media-logos-delicious.png'/></a>
<a class='fisheye-item2' expr:href='"http://digg.com/submit?phase=2&url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Digg</span><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqdcJWnb4H8nl_nK9k0Ejj-lAL8dfvS2zqRVwvZLihF-iEJK-FBOJVgDL_cVvNS4i_kWGJAdUoJghBnScp6l9gAaF9NtZmamtU7LxhVKaL0RsXbpGDeB9HFa8_Ui34KqINLcDfNPWko7I/s400/101473-red-white-pearl-icon-social-media-logos-digg.png'/></a>
<a class='fisheye-item2' expr:href='"http://www.facebook.com/share.php?u=" + data:blog.url' target='_blank'><span>Facebook</span><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRR_PtVuuD7jDMfbtPtMkFMy7sVPGoJ_0qPuNpd-oSTeJ9-uVx_fC8ByeGyrRgmTzqQ1CWYGc1Si9-dY-mUJ1yf590wizcuLMMxad3SYR7FQP2pTP0a_GJCTHqLDoZjlCBVIyG6OLS5wM/s400/101484-red-white-pearl-icon-social-media-logos-facebook-logo.png'/></a>
<a class='fisheye-item2' expr:href='data:blog.homepageUrl + "feeds/posts/default"' target='_blank'><span>RSS</span><img alt='RSS' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOS70gL1S2oXmafJBgb_U_S2ZqG5ndejxkkfsBNLcKJaqRIrFP84vIGlTEf_HjiK9C8uqPvoigzqUBSF_jjgpdw4nI00v5W3PPSryFzhFuw5hAuhJ59bGzICa1s5Wn4NiaxkXWoPOIUpo/s400/101532-red-white-pearl-icon-social-media-logos-rss-basic.png'/></a>
<a class='fisheye-item2' expr:href='"http://www.stumbleupon.com/submit?url=" + data:blog.url + "&title=" + data:blog.title' target='_blank'><span>Stumbleupon</span><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSnMzZx-tv1gb0oL6MCIBcqqEub-vxYCWOrdVRgqVXHWnvcxUaz0pZEiGKd9ZaDxfgeKNefCwGybSyOu-zGtMT5fACy6XZxe8HGOM3AS_-PxyYxHZLAU5cRa1tpctMrQHMhI39y_kEeA/s400/101544-red-white-pearl-icon-social-media-logos-stumbleupon.png'/></a>
<a class='fisheye-item2' expr:href='"http://technorati.com/faves?add=" + data:blog.url' target='_blank'><span>Technorati</span><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvI2vtAQD8aJeCzLyYgfRNczDxu1JrrCiMEoylzOjVWQpHevQhA3l7KeHoQu6xpUeQ0Ohtw6AZDDMe9rdkX0YL27C0FOwIYWXD3wt_H-IV_vCw_JAOIyuZ2ShNd1K90qRVx8zTu90zCog/s400/101550-red-white-pearl-icon-social-media-logos-technorati-logo2.png'/></a>
<a class='fisheye-item2' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><span>Twitter</span><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHgzZ7C5qQ5FEEhrUHx7Vzj1fosrKIpIAp9D9lMu8k5VAJ-2d_10OnmhAyZ_pKmzB3UJC773jQQnoZ0LR8gwlzKSlKRYewarhW9IRGAYQca0VBYs5jVxr3nNnsHJUMGr4BTgdMvSK6Ysw/s400/101556-red-white-pearl-icon-social-media-logos-twitter.png'/></a>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(
function()
{
jQuery('#fisheye2').Fisheye(
{
maxWidth: 64,
items: 'a',
itemsText: 'span',
container: '.fisheye-container2',
itemWidth: 60,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
</b:if>

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 == "item"'>

Share This:

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

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

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

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

<a expr:href='"http://twitter.com/home?status=Check this Out: " + data:post.url + " | " + 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 == "item"'>

Share This:

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

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

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

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

<a expr:href='"http://twitter.com/home?status=Check this Out: " + data:post.url + " | " + 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

Search This Blog

Seputar Ilmu

17+ social bookmarking widgets for blogger And Customize

Customization

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Halaman Login Hotspot Berbeda pada 1 Mikrotik

UltraISO Premium Edition v9.5.3

Arti OSAKMJ