Monday , 20 November 2017

Add Top Bar to Your Blogger or WordPress Blog

ETB Top Bar for Blogger and WordPress

Here it is my another widget which I named Top Bar and this is very special to get more visitors to specific posts. Actually it shows on the top of your blog with a close button. You can put links or type text in this bar like you can put links to your favourite articles or you can type any text as news or announcements for your blog visitors. And one more thing is that you can add this widget to your WordPress or Blogger blog, this widget works same in both platforms. Also read this article buy domain and web hosting with Payza (AlertPay) account if you don’t have PayPal account to purchase them.

How to Add Top Bar to Blogger Blog

1. Go to Blogger > Layout.
2. Click on Add a Gadget.
3. Then select HTML/JavaScript gadget and paste the following code in it:

<!-- Start - Top Bar by www.ExtremeTechBlog.com -->
<style>
#bar {
color: red;
background-color: white;
}
</style>
<script src='http://extremetechblog.googlecode.com/files/jquery-1.8.0.min.js'></script>
<script>
$(document).ready(function () {
$('#button').click(function () {
$('#bar').toggle(400);
});
});
</script>
<div id='bar' style='position: fixed; top: 0; right: 0; overflow: hidden; height: 30px'>
<strong>
Type your text here. <a href='#'>Type link text here</a> | <a style ='font-size: 9px;' href='http://www.extremetechblog.com/2012/08/etb-top-bar.html'>ETB</a>
</strong>
<img src='http://extremetechblog.googlecode.com/files/close_button.png' id='button' height='22'/>
</div>
<!-- End - Top Bar by www.ExtremeTechBlog.com -->
  • Replace red with any colour for the text.
  • Replace white with any colour for the background.
  • Replace Type your text here with your text that you want to show to your blog readers.
  • Repace # with your link and Type link text here with the link text and remember you add more links to this bar.
4. Now just click on Save button and it is done.

How to Add Top Bar to WordPress Blog

1. Go to your WordPress blog admin panel and login.
2. Click on Appearance in the sidebar.
3. Then click Widgets.
4. Under Available Widgets find the box that says Text and drag it into the sidebar box on the right.
5. Paste the following code in the selected widget:

<!-- Start - Top Bar by www.ExtremeTechBlog.com -->
<style>
#bar {
color: red;
background-color: white;
}
</style>
<script src='http://extremetechblog.googlecode.com/files/jquery-1.8.0.min.js'></script>
<script>
$(document).ready(function () {
$('#button').click(function () {
$('#bar').toggle(400);
});
});
</script>
<div id='bar' style='position: fixed; top: 0; right: 0; overflow: hidden; height: 30px'>
<strong>
Type your text here. <a href='#'>Type link text here</a> | <a style ='font-size: 9px;' href='http://www.extremetechblog.com/2012/08/etb-top-bar.html'>ETB</a>
</strong>
<img src='http://extremetechblog.googlecode.com/files/close_button.png' id='button' height='22'/>
</div>
<!-- End - Top Bar by www.ExtremeTechBlog.com -->
  • Replace red with any colour for the text.
  • Replace white with any colour for the background.
  • Replace Type your text here with your text that you want to show to your blog readers.
  • Repace # with your link and Type link text here with the link text and remember you add more links to this bar.
6. Click on Save and you are good to go.

Need Help?

If you need any help regarding this tutorial then comment or join Facebook group Extreme Tech Blog, there you can ask and help other users if you know something.

Leave a Reply