ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu

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

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

  • Author Bio

  • Latest Post

Article by Mukund

Mukund has written 26 articles.

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


{ 13 comments… add one }

  • Krupesh

    Mukund Please Tell me how to place to at bottom of the screen rather than ToP

    Reply
  • Yousuf Khan Jee

    Hi Mukund, can to tell how to change the background and text colors?

    Reply
    • Mukund

      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!

      Reply
  • kunal

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

    Reply
  • Mukund

    @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;

    Reply
  • Bhaveek

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

    Reply
  • shan ali

    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

    Reply
  • shan ali

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

    Reply
  • Bharath Mandava

    Nice trick for newbies mukund…coming to wordpress we can use ViperBar plugin directly… :)

    Reply
  • Sagar

    Thanks for the tutorial Mukund, I’ve been waiting for this :D

    Reply
  • Mukund

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

    Reply
  • rakesh

    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.

    Reply
  • Sudeep Acharya

    Nice man it will be great to add this……..

    Reply

Leave a Comment