August 12, 2011

How To Add Best Social Bookmarking Widget For Blogger

How To Add Best Social Bookmarking Widget For Blogger

1.Login to your blogger dashboard--> desing- -> Edit HTML

2.Scroll down to where you see <div class='post-header-line-1'/> tag.

3.Copy below code and paste it just before the <div class='post-header-line-1'/> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social'>
<b class='si'>Spread it!</b>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='' type='text/javascript'/>
<div class='social_button tm'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
<script src='' type='text/javascript'/>
<div class='social_button fb'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='' type='text/javascript'/>
<div class='social_button su'>
<script src=''/>
<div class='social_button buzz'>
<a class='google-buzz-button' data-button-style='small-count' href='' title='Post to Google Buzz'/>
<script src='' type='text/javascript'/>
<div class='social_button em'>
<a expr:href='&quot;mailto:?subject=Sharing:&quot; + data:post.title + &quot;&amp;body=I wanted to share this with you. Thought you might enjoy it:%0A%0A&quot; + data:post.url' target='_blank' title='Email This'>Email This</a>
<div class='clear'/>

4.Scroll down to where you see ]]></b:skin> tag.

5.Now replace it with below code:

.social { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social .social_button {float: left; display: inline; overflow: hidden; height:22px; }.social .si { float:left;padding-top:3px;}
.social .social_button.dg { margin: 0px 0 0 30px ; padding-top: 2px;}
.social { margin: 0px 0 0 32px; padding-top: 4px;}
.social .social_button.fb { margin: 0 0 0 15px; padding-top:3px;}
.social { margin: 0px 0 0 25px; padding-top: 2px;}
.social .social_button.em { margin: 0 0 0 25px; padding-top: 3px;}
.social { margin-left:30px ; padding-top: 3px;}
.social .social_button.em a{background:#eee url( 3px 50% no-repeat; padding:2px 3px 2px 22px; font-size:10px; border:#ddd 1px solid; text-decoration:none; -moz-border-radius: 3px; -webkit-border-radius: 3px;}
.social .social_button.em a:hover {background:#ddd url( 3px 50% no-repeat}
.social .social_button a img { border: 0; padding: 0; }
.social strong { font-size: 11px; float: left; margin:2px 0 0 0; color:#555;}

6.Now clik on "Save template" you are done.


No comments:

Post a Comment