Saturday

ADD FLOATING SOCIAL BOOKMARKS ON BLOGGER


In this i will tell you "How To Add Floating Social Bookmarking Buttons". You might have seen few buttons on right or left side of the browser while scrolling, these buttons are called floating social bookmarking buttons. As every blogger wants these buttons on their blog for better sharing and increasing traffic.


ADD FLOATING SOCIAL BOOKMARKS TO YOUR BLOG


1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.


3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>



4). Copy and Paste the followig code just BEFORE the code you have searched.



#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;}

5). Find the following piece of code in your blog HTML code.


</body>


6). Copy and Paste the followig code just BEFORE the code you have searched.


<DIV id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>

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

7). Save your template and Experience the change.

If you got a good experience than leave comments and Email Me for any assistance.

No comments:

Post a Comment