Fixed Social Icons on the Side of Whole Site - I Google'd it, I will admit it. I found the below link and made it work for my situatio

Clan Themes, We Make Clans Look Good!

Design Talk · Fixed Social Icons on the Side of Whole Site

Posted on Tuesday, June 29, 2010 @ 01:19 by admin

I Google'd it, I will admit it. I found the below link and made it work for my situation.

How to add fixed icons to the side of your Wordpress site (Thanks to Ron for the quick hack)

The Icons

You can find social icon list just about anywhere, but I finally chose this set 48x48. I added the above icons to the themes/yourtheme/images/icons folder. If you don't add an icons folder you need to change the path in the below CSS.

The CSS

themes/yourtheme/style/style.css

#fixed_icons {
    background: transparent;
    width: 48px;
    position: fixed;
    top: 15%;
    right: 0.20%;
}

#fixed_icons a {
    display: block;
    text-indent: 24px;
    height: 48px;
    padding-bottom:3px;
    text-decoration: none;
}

#fixed_icons #twitter { background: url("../images/icons/twitter.png") no-repeat; }
#fixed_icons #facebook { background: url("../images/icons/facebook.png") no-repeat; }
#fixed_icons #linkedin { background: url("../images/icons/linkedin.png") no-repeat; }
#fixed_icons #rss { background: url("../images/icons/feed.png") no-repeat; }

Tweak the positioning by editing

top: 15%;
right: 0.20%;

The HTML

Look in themes/yourtheme/

The file is going to differ, but in your theme.php or header.html you should be able to find the body tag and the below code goes right below it.1

Find

<body>

Add After

<div id="fixed_icons">
    <a href="http://twitter.com/vanweerd" id="twitter" title="Follow us on Twitter"></a>
    <a href="http://www.facebook.com/ronaldvanweerd" id="facebook" title="Facebook Profile"></a>
    <a href="http://nl.linkedin.com/in/vanweerd" id="linkedin" title="LinkedIn Profile"></a>
    <a href="http://feeds.feedburner.com/VanWeerd" id="rss" title="RSS feed"></a>
</div>

Final Result

Final result is exactly what you see on this site. I took away the LinkedIn icon, but you get the idea.

Random Products


	Snype writes ( Permalink ) I like it, Sure as hell looks better on the side than in a box lol nice work and i may implement this into my wordpress site then
	Tuesday, June 29, 2010 @ 06:24


	TWChad writes ( Permalink ) Very nice. I like it as well. Im going to book mark this and give it a go at some point in the near future. Thanks for sharing it.
	Wednesday, June 30, 2010 @ 04:32


	floppy writes ( Permalink ) Well, you can use it display any icon on the side of your site. Even if it is just a new section you want to show off. It is a great way to make sure everyone sees it.
	Wednesday, June 30, 2010 @ 08:37


	Snype writes ( Permalink ) You could add banners there lol 468x60 vertical that would bring in more revenue but suppose it could make sites look tacky :( I think this would look even more nice with the JS fade script so it fades in with colour on hover and fades to B&W when hover away
	Wednesday, June 30, 2010 @ 11:31


	melissapugs writes ( Permalink ) Thanks for this info. I see you also have like buttons embedded above the buttons for your TUT. Any chance you could share how you embedded those? Thanks for any help :)
	Sunday, September 11, 2011 @ 16:46

No Comments Allowed for Anonymous, please register