How to add Sticky Bar similar to Shoutmeloud on BlogSpot & WordPress?

I’ve been receiving quite a lot of emails wherein people asked for the codes that is used to run the sticky bar on Shoutmeloud. If you are wondering what a sticky bar is, then scroll to the top of this page and look out for a red bar with blinking text. That’s called a sticky bar which is used to display useful information to the user – widely used to display the most popular article or to maximize the sales using affiliate links.Though even if you have not noticed this alert box at ShoutMeLoud, you might have heard amazing stuff about Hellobar. This tutorial will help you to get Hellobar on your blog for free, though you might not get a dashboard or option features offered by Hellobar, but at the cost of $0, this seems to be a perfect way to get started. I also consulted Harsh, and he informed me that this Alertbox helps a lot to give more exposure to any article. In this article, you’ll be learning to add one such sticky bar on your blogspot blog.

sticky-bar

1. Navigate to “Design>>Edit HTML” and make a backup of your template by clicking on the “Download full template” link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Paste the following piece of code just above the line mentioned in step 1.

#headline{
background:red url('http://www.shoutmeloud.com/wp-content/uploads/2011/08/headline-bg.png') repeat-x;
color:#eee;
margin:0 auto;
text-align:center;
text-shadow:1px 1px 1px #000;
padding:7px 0;
font-size:9px;
letter-spacing:1px;
}
#headline a{
font-weight:700;
text-decoration:blink;
color:#fe0;
border-bottom:1px dashed;
}
#headline li.widget, #headline li.widget p{margin:0; list-style:none;}

Note: WordPress Users may add the above CSS to their custom.css file and upload the same to their host servers.

If your sticky bar is not extending its width to the entire page span/width, then you need to specify the width in the CSS defined in the first line and adjust the margin accordingly. I’ll be able to assist you with the same provided you share your blog URL via comments.

3. Place the following HTML just after/below the <body> tag in your template – the same applies to WordPress Users as well.

<div id='headline'>
<li class='widget'>
<div style='width: 965px; margin: 0pt auto; height: 16px;'>
<div style='width: 700px; float: left;'>
<p><a href='LINK' target='_blank'>LINK-NAME</a></p>
</div>
</div>
</li>
</div>

4. Replace LINK with the link you wish to point to and LINK-NAME with the name/title of your link. Well, that’s it! Save your template/theme.

I guess this is a very simple tutorial when compared to those I posted earlier on Shoutmeloud – would have been Greek and Latin to those newbie bloggers out there. However, I hope this tutorial is a very simple one for them as well to get going. Do share your opinions and clarify your doubts using the comment section below:)

Subscribe on Youtube

Article By
I'm Mukund, the founder of Everything About Blogging. I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2008 and I'm currently a guest blogger on Shoutmeloud & Blogging With Success.

COMMENTs ( 13 )

    • Mukund says

      Sure! Why not? You need to change the color codes mentioned in the css part. For example, change color:#fe0; to color:#ddd; and you can find the change! Refer to the HTML chart for different color codes!

  1. kunal says

    hey nice work done to share the code of adding a sticky bar…. it highlights the main and popular articles of the blog.

  2. Mukund says

    @Shan ali: Just ensure you are using a browser that supports CSS3. If yes, then make sure you have the following code in your CSS – text-decoration:blink;

  3. Bhaveek says

    Today i came to know that its called sticky bar, i was looking for this tutorial for long time. Thanks Mukund for sharing this.. :)

  4. shan ali says

    Mukund, i m not able to make the text blink in the sticky bar. Please tell me how to make the text blink in the sticky bar as it is blinking in this website

  5. shan ali says

    Once again Mukund, Thanks a ton….
    implemented it successfully on my blog…. u r doing a gr8 job man…..

  6. Mukund says

    Well, let me know what you want? I’ll try to work out the codes and possibly share the same with other readers as well:)

  7. rakesh says

    It is a simple trick mukund, still useful for newbies. I want little bit more so that we can add links from our wordpress dashboard.

ADD COMMENT