How To Add Social Bookmark Buttons To The Top Of All Blogger Posts

You have probably noticed most blogs now have social bookmarking options above as well as below their posts.Here on Spice Up Your Blog we have almost 20 different sets of social bookmarking gadgets for below your posts so i think its about time i covered how to add a social bookmarking gadget above the posts.By above the posts the position i am referring to is directly below the post title and before the first line of text.Of course you could add any bookmarking gadget above the posts but in general it will look out of place, you want the bookmarking gadget above the posts to be compact and just include the main options.The gadget we have for you in this post is perfect, it wont take up too much room at the top of your posts, it look great and includes buttons for Twitter, Facebook, Digg, Stumble Upon as well as a Email This Post option.

Preview And Demo

Below you can see an image preview of the Top Bookmarking Gadget.



To see how the gadget works you can view a live Demo / Sample here - Demo Of Top Bookmarking Gadget

How To Add The Top Bookmarking Gadget To Your Blog

Step 1. In your dashboard click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.

Step 2. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Paste The Following Code Directly Above ]]></b:skin>

.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 .social_button.tm { margin: 0px 0 0 32px; padding-top: 4px;}
.social .social_button.fb { margin: 0 0 0 15px; padding-top:3px;}
.social .social_button.su { margin: 0px 0 0 35px; padding-top: 2px;}
.social .social_button.em { margin: 0 0 0 35px; padding-top: 3px;}
.social .social_button.em a{background:#eee url(http://img180.imageshack.us/img180/1989/emailj.gif) 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(http://img180.imageshack.us/img180/1989/emailj.gif) 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;}
.clear{clear:both;}

Step 4. Find the following piece of code in your blogs Html :
(Click Ctrl and F for a search bar to help find the code - More Info)

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

Step 5. Paste The Following Code Directly Below <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2kQvSkN_wlQFDpbPuYf9e7bm-53xJwZV5kRKRUoPOrpK6WSxZ7fZvTIKL9nx2y28a3damYJq21nbQ22FQTbRKcYthPEJLuBNmZHwsytsOU-drKmOGPy1mz057BP2ot35sTQjBxt-7-HX/s1600/best+blogger+tips.png'/></a><div class='social'>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<script type='text/javascript'>
tweetmeme_style = &quot;compact&quot;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
<div class='social_button fb'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button em'>
<a expr:href='&quot;mailto:?subject=Sharing:&quot; + data:post.title + &quot;&amp;body=Hi ! I Saw This Cool Post And Thought Of You.Check It Out :%0A%0A&quot; + data:post.url' target='_blank' title='Email This'>Email This</a>
</div>
</div>
<div class='clear'/>
</b:if>

Step 6. Save Your Template

Once your template is saved the new bookmarking buttons should be added to the top of your posts.

You can find lots more Social Bookmarking information, tips and gadgets here - Spice Up Your Blog Social Bookmarking

Feedback

Drop A Comment Below To Let Us Know What You Think Or If You Need More Help !