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%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}#fixed_icons a {
display: block;
text-indent: 24px;
height: 32px; /*height of icon max*/
padding-bottom:3px;
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=”//www.facebook.com/sharer.php?u=<?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>
<div id=”return_top”> /*this icon is from theme*/
<a href=”#header”> </a>/*return to header beginning*/
</div>
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.
That’s it.