Add Floating Icons On WordPress Blog

April 7, 2012 | 2,070 views |

I like floating Icons on the side page, move up/down with the scroll, cool. There are tons of tutorial about this, I just wrote this up to remind me how to do mine.

Add these lines in our theme style.css.

/*side column*/
#return_top a { position:absolute; position:fixed; left:0; bottom:15px;
display:block; height:138px; width:38px; background:url(images/return-top.png) no-repeat left top; }/* retun-top.png is in the images folder*/
#return_top a:hover { background:url(images/return-top.png) no-repeat right top; text-decoration:none; }
#fixed_icons {
background: transparent;
padding:5px 5px 5px 2px;
width: 36px; /*the width of the icon images*/
position: fixed;
bottom: 25%; /*this position from the bottom of the page up*/
left: 0.20%;

#fixed_icons a {
display: block;
text-indent: 24px;
height: 32px; /*height of icon max*/
text-decoration: none;

#fixed_icons #twitter { background: url(“images/icons/twitter_32.png”) no-repeat; }
#fixed_icons #facebook { background: url(“images/icons/facebook_32.png”) no-repeat; }/*theme icon images*/
#fixed_icons #linkedin { background: url(“images/icons/myspace_32.png”) no-repeat; }
#fixed_icons #rss { background: url(“images/icons/rss_32.png”) no-repeat; }
/*end sidecolumn*/

And these lines in the footer.php

<div id=”fixed_icons”>
<a href=”//<?php the_title(); ?><?php the_permalink(); ?>” id=”facebook” title=”Share On Facebook” target=”_blank”></a> /*this icon is from theme*/
<g:plusone annotation=”none”></g:plusone> /*this icon will be supplied by Google*/
<span class=’st_twitter_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’TWEETTWEET’></span>/*these icons are from sharethis plugins*/
<span class=’st_linkedin_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’LINKEDIN’></span>
<span class=’st_digg_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’DIGG’></span>
<span class=’st_stumbleupon_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’share’></span>
<span class=’st_email_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’EMAIL’></span>
<div id=”return_top”> /*this icon is from theme*/
<a href=”#header”>&nbsp;</a>/*return to header beginning*/

We’re using sharethis plugin to display these icons, but we have to NOT display them on each page and select big icons to display with the css sizes.

sharethis options

sharethis options

That’s it.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.