{"id":1448,"date":"2012-04-07T23:24:40","date_gmt":"2012-04-08T06:24:40","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=1448"},"modified":"2012-04-07T23:24:40","modified_gmt":"2012-04-08T06:24:40","slug":"add-floating-icons-on-wordpress-blog","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/add-floating-icons-on-wordpress-blog.html","title":{"rendered":"Add Floating Icons On WordPress Blog"},"content":{"rendered":"

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. <\/em><\/p>\n

Add these lines in our theme style.css.<\/em><\/p>\n

\n

<\/em>\/*side column*\/
\n#return_top a { position:absolute; position:fixed; left:0; bottom:15px;
\ndisplay:block; height:138px; width:38px; background:url(images\/return-top.png) no-repeat left top; }\/* retun-top.png is in the images folder*\/
\n#return_top a:hover { background:url(images\/return-top.png) no-repeat right top; text-decoration:none; }
\n#fixed_icons {
\nbackground: transparent;
\npadding:5px 5px 5px 2px;
\nwidth: 36px; \/*the width of the icon images*\/
\nposition: fixed;
\nbottom: 25%; \/*this position from the bottom of the page up*\/
\nleft: 0.20%;
\nborder-radius:5px;
\n-moz-border-radius:5px;
\n-webkit-border-radius:5px;
\n}<\/p>\n

#fixed_icons a {
\ndisplay: block;
\ntext-indent: 24px;
\nheight: 32px; \/*height of icon max*\/
\npadding-bottom:3px;
\ntext-decoration: none;
\n}<\/p>\n

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

And these lines in the footer.php<\/em><\/p>\n

\n

<\/em><div id=”fixed_icons”>
\n<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*\/
\n<g:plusone annotation=”none”><\/g:plusone> \/*this icon will be supplied by Google*\/
\n<span class=’st_twitter_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’TWEETTWEET’><\/span>\/*these icons are from sharethis plugins*\/
\n<span class=’st_linkedin_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’LINKEDIN’><\/span>
\n<span class=’st_digg_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’DIGG’><\/span>
\n<span class=’st_stumbleupon_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’share’><\/span>
\n<span class=’st_email_large’ st_title='<?php the_title(); ?>’ st_url='<?php the_permalink(); ?>’ displayText=’EMAIL’><\/span>
\n<\/div>
\n<div id=”return_top”> \/*this icon is from theme*\/
\n<a href=”#header”>&nbsp;<\/a>\/*return to header beginning*\/
\n<\/div><\/p>\n<\/blockquote>\n

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.<\/em><\/p>\n

<\/em>\"sharethis<\/p>\n

\"sharethis<\/p>\n

That’s it.<\/em><\/p>\n

<\/em>