How to add Floating Social bookmarking icons in wordpress themes

Post image for 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. How to add image hover effects in thesis and other wordpress themes,blogger
  5. How to highlight author comments in thesis wordpress theme with background and logo
  6. How to add floating back to top button in thesis wordpress theme
  7. Thesis-how to place ads Above the post title in thesis wordpress theme
  8. Adding author profile box in thesis wordpress theme
  9. How to add clickable header banner in thesis wordpress theme
  10. How to add featured posts in custom feature box in thesis wordpress theme

{ 3 comments… read them below or add one }

1 ray ban store February 5, 2010 at 9:05 am

I enjoyed the article and thanks recompense posting such valuable poop seeking all of us to skim, I begin it both profitable and communicative and I method to examine it as again as I can.

Reply

2 Christopher J. March 12, 2010 at 1:33 am

i won’t get this ad work!

Reply

3 durian May 20, 2010 at 4:36 am

why dont u show reader how its gonna be look like?

Reply

Leave a Comment

{ 1 trackback }

Previous post:

Next post: