As you notice on many blog or website using a top or Header Bar on top of home page,which include Some important information or any hot topic.As you can see a top bar on my website to,its grab attention of your readers and give more exposure to your blog. By using top bar u can add any text or any link on top of your website or blog.
How To Add Top Bar Or Header Bar Without Any WordPress Plugin
1. ADD TOP BAR OR HEADER BAR IN TO YOUR THESIS THEME.
Just Follow Below Steps:-
1. If You are using Thesis OpenHook Plugin,on your blog then its really easy to insert code in to your blog,if don’t have OpenHook Plugin then simply Install and go to WP_Head.Just paste below code to your WP_Head,do change highlighted information with yours.
<div id="headline"> <p><a title="Let's Become a Royal Member" href="http://www.facebook.com/pages/Webtricksblog/200411133318164"target="_blank"> Let's Become a Royal Member</a></p></div>
2.Now open your Custom.css And paste below code in to css file.
/* Custom Header Styling */
#headline{background:#009933; repeat-x; color:#eee; margin:0 auto; text-align:center;
text-shadow:1px 1px 1px #000; padding:5px 0; font-size:15px; letter-spacing:3px;}
#headline a{font-weight:700; color:#fff; text-decoration:blink;border-bottom:1px solid;}
#headline li.widget, #headline li.widget p{margin:0;}
Well if you don’t want to install any plugin for Top Bar Or Header Bar,Just copy below thesis hook inside you custom_function.php.
function Blog_top_bar() { ?>
<div id="headline">
<p><a title="Click Here To Become Part Of Us" href="http://www.facebook.com/pages/Webtricksblog/200411133318164"
target="_blank">Click Here To Become Part Of Us</a></p>
</div>
<?php }
add_action('wp_head', 'Blog_top_bar');
2. ADD TOP BAR OR HEADER BAR IN TO OTHER WORDPRESS THEMES
1.Open your Header.php from dashboard–>Appearance–>Editor and paste below code just before </head>
<div id="headline"> <p><a title="Let's Become a Royal Member"href="http://www.facebook.com/pages/Webtricksblog/200411133318164" target="_blank"> Let's Become a Royal Member</a></p></div>
Don’t Forget To change Showing Informations with yours.
2.Now Open your Style.css and paste below code to anywhere in your file.
/* Custom Header Styling */
#headline{background:#FFFBCC; repeat-x; color:#eee; margin:0 auto; text-align:center; text-shadow:1px 1px 1px #000; padding:7px 0; font-size:15px; letter-spacing:1px;}
#headline a{font-weight:700; text-decoration:blink; color:#198DC9; border-bottom:1px dashed;}
#headline li.widget, #headline li.widget p{margin:0;}
Click Save Button,Now refresh your website and enjoy Top Bar Or Header Bar on your blog 
Do share it with your friends.
Share This Article