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

IN Uncategorized

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.


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.


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

background:red url('') repeat-x;
margin:0 auto;
text-shadow:1px 1px 1px #000;
padding:7px 0;
#headline a{
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>

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:)

Click to activate Offer & visit site Discount added automatically

Ultimate Blogging Strategies

Sign Up Today For Free

join our site and get free content delivered automatically each time we publish

100% privacy. we will never spam you

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 23 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

Send Us Inquiry


    • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>