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)

]]>

Step 3. Paste The Following Code Directly Above ]]>

.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)

Step 5. Paste The Following Code Directly Below

Abonnement Publier les commentaires [Atom]

<< Accueil