How to add Floating Social bookmarking icons in wordpress themes

Social bookmarking icons have been an essential widget for any wordpress blog to enable users to share the post in facebook,twitter and other social networking sites.So adding an floating social bookmarking icon in your wordpress theme either thesis or other wordpress theme.This tutorial is for thesis and it works well for other wordpress themes also.

How to add floating buttons for social bookmarking sites in your wordpress theme/thesis:

1.Paste the below code into the custom_functions.php file either via ftp or directly.The code has links for twitter,rss,facebook,youtube and contact us icons.You can add or remove codes according to the icons you want to be visible.

/***************************************************************/
/* FLOATING SOCIAL icons ON SIDE OF SITE  */

function floating_icons() { ?>
<div id="bookmarks">
<a href="http://twitter.com/sensehow" id="twitter" target="_blank" title="Follow @sensehow on Twitter">Follow @sensehow on Twitter</a>
<a href="http://feeds.feedburner.com/sensehow" id="rss" target="_blank" title="Subscribe to sensehow via RSS Email">Subscribe to sensehow via RSS Email</a>
<a href="http://www.sensehow.com/contact-us" id="email" title="Contact Us">Contact Us</a>
<a href="http://www.youtube.com/user/sensehow"" id="youtube" title="Subscribe to sensehow youtube channel" target="_blank">Subscribe to sensehow youtube Channel</a>
<a href="http://www.facebook.com/pages/SENSEHOWCOM/286004172401" id="facebook" title="Share on facebook" target="_blank">Share on facebook</a>
<br /><br />

</div>
<?php }

add_action('thesis_hook_before_header', 'floating_icons');

2.Now upload the images in the images folder and provide the link for the images in the below code in background url and paste it in the custom.css file and save it.

/* SAVE THIS IN CUSTOM.CSS FILE */
.custom #bookmarks {background: transparent; width: 3.1em; position: fixed; top: 35%; right: 0.55%;}
.custom #bookmarks a {display: block; text-indent: -9999px; height: 3.1em;}

.custom #bookmarks #twitter {background: url('http://fourblogger.com/wp-content/uploads/2009/12/Twitter1.png')}
.custom #bookmarks #rss {background: url('http://fourblogger.com/wp-content/uploads/2009/12/Feed1.png')}
.custom #bookmarks #email {background: url('http://fourblogger.com/wp-content/uploads/2009/12/fourblogger.png')}
.custom #bookmarks #youtube {background: url('http://fourblogger.com/wp-content/uploads/2009/12/Youtube-icon1.png')}
.custom #bookmarks #facebook {background: url('http://fourblogger.com/wp-content/uploads/2009/12/FaceBook1.png')}

you could place it in left or right and the distance from the top can be changed by editing top:35%.
Now you can see the floating social bookmarking icons for twitter,facebook,youtube,feedback in your wordpress theme or thesis.

CREDIT: FOURBLOGGER.COM

Related posts:

1. How to add social bookmarking icons in thesis and other wordpress themes
2. How to add floating follow me widget in wordpress themes
3. How to add author profile box below posts in wordpress themes
4. Thesis-how to place ads Above the post title in thesis wordpress theme
5. Adding author profile box in thesis wordpress theme

Tagged as: customizing thesis, free thesis customization, Thesis