WordPress: Creating a Custom Social Top Bar for your Blog


I had a client who needed a custom made top bar for his blog that included social icons and branding. Now there is a WordPress plugin which will do the trick at http://wordpress.org/extend/plugins/wp-topbar/  Though it requires PAYMENT to fully utilize it. Rather than worrying about buying licenses I pulled together my own version that doesn’t require any extra plguins, or alot of hard coding. (Plus I can customize it better to my own specifications

The following works just using basic html and a few custom graphics
(the following examples are presented in 3 basic forms)

1- Open your “header.php” file and place the following code beneath yourtag

See below (the first coding is just a basic top bar you can add your own link to)

______________________________

</head>

<!– SECTION WHERE THE TOP BAR RESIDES //–>
<div id=”mytopbar”>
<p><a title=”Simpleinbound” href=”http://www.simpleinbound.com
target=”_blank”>Simpleinbound</a></p></div>
<!– END SECTION WHERE THE TOP BAR RESIDES //–>

______________________________________

This second version is for “TEXT only” BANNER

______________________________

</head>

<!– SECTION WHERE THE TOP BAR RESIDES //–>
<div id=”mytopbar”>
<p>Your Marketing Text goes here!!!!/p></div>
<!– END SECTION WHERE THE TOP BAR RESIDES //–>
</head>
_______________________

Or if you’d like to build a custom graphic top bar, you can incorporate either a table configuration or a custom background
This uses a basic table and some graphics with links
(Note – example only – please use your own graphics and links)

<!– SECTION WHERE THE TOP BAR RESIDES //–>
<div id=”mytopbar”>
<table width=”940″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”692″ height=”45″><a href=”http://horrornews.net/”><img src=”http://horrornews.net/adverts/topbar-1.jpg” alt=”HorrorNews.net – Horror Movies | Horror Trailers and Reviews” width=”692″ height=”45″ border=”0″></a></td>
<td width=”54″ height=”45″><a href=”http://feeds.feedburner.com/HorrorNewsnet” target=”_blank”><img src=”http://horrornews.net/adverts/topbar-2-rss.jpg” alt=”RSS Feed” width=”54″ height=”45″ border=”0″></a></td>
<td width=”50″ height=”45″><a href=”https://plus.google.com/114242595155980946695#114242595155980946695/posts” target=”_blank”><img src=”http://horrornews.net/adverts/topbar-3-gplus.jpg” alt=”Google+” width=”50″ height=”45″ border=”0″></a></td>
<td width=”50″ height=”45″><a href=”http://www.facebook.com/HorrorNews” target=”_blank”><img src=”http://horrornews.net/adverts/topbar-4-facebook.jpg” alt=”Facebook” width=”50″ height=”45″ border=”0″></a></td>
<td width=”94″ height=”45″><a href=”http://twitter.com/horrornewsnet” target=”_blank”><img src=”http://horrornews.net/adverts/topbar-5-twitter.jpg” alt=”Twitter” width=”94″ height=”45″ border=”0″></a></td>
</tr>
</table>
</div>
<!– END SECTION WHERE THE TOP BAR RESIDES //–>

_______________________________

2- Make sure to add the following CSS code to your “styles.css” file
(customize to your own settings)

/* mytopbar */
#mytopbar{
margin-left: -10px;
width:100%;
height:45px;
background:#2e2e2e;
position: fixed;
text-align:center;
color:#FFFFFF;
float: center;
width: 100%;
}

Note: you may have to also add some bottom margin to your header so that it isnt hidden behidnd the top bar on site load

The CSS code for the Twenty-10 Theme would be as such (adjust to your own preference)
locate code #wrapper and change to the code below

#wrapper {
margin: 0 auto;
width: 940px;
margin-bottom:40px;
}

Note: Re-adjust “margin-bottom:40px” to desired margin

That’s it, you bar will now stay in a fixed position as you scroll thru your blog!!!

Reference KeyWords:
– Creating a Top Social Bar for your Blog
– Adding a Custom top bar to your WordPress site
– Branding and Social Icons to your header
– Branding your WordPress header

WordPress: Creating a Custom Social Top Bar for your Blog

Related Posts Plugin for WordPress, Blogger...