Show Random Headlines Inside Sticky Floating Bar

Floating sticky Bars
Ever wondered to create a Sticky Floating Bar to show Random headlines on your blog? We recently developed a small plugin in wordpress which we have implemented on our third blog hosted on wordpress and also on BlogSpot blogs of our existing clients. We introduced several versions of sticky bars for blogger blogs in 2012 but this one adds an extra functionality. It will show a random post on each page refresh! It uses Feedburner JavaScript snippet to fetch recent headlines from your Feeds and then displays a title randomly when user refreshes the webpage or navigates between pages. Also contains a toggle button to show and hide the headlines. You can customize it easily and change its location to top of page or at footer. Works best with fluid and responsive designs. The analytics for our newly launched blog has shown an amazing 30% increase in Pageviews just after we installed this plugin. I have developed both static and dynamic versions of it for both Blogger and Wordpress Genesis Framework.
Today's tutorial will guide you in installing this amazing plugin on your blogger blogs to multiply every unique visit. Lets get to work then!
 

Activate Recent Headlines on Feedburner?

Note: For Dynamic version only. If you wish to add a static/manual version of this plugin then skip this step.
For the dynamic version of this plugin you will need to have Feeds stored at feedburner.
  1. Go To Feedburner > Publicize > BuzzBoost
  2. Uncheck all the boxes. Keep number of items 15 or you can choose All to select all posts have your published so far. Make links open in same window.
  3. Click Save to activate the List of your recent posts.

buzzboost settings
   4. Feedburner will give you a JavaScript code that you will need to copy. Only copy the code starting with <script> and ending with </script> as shown below:
feedburner javascript snippet
  Save this code inside a notepad because we will need to use it later in this tutorial.

Show Random Headlines in blogger  - Dynamic

We managed to write a script with the help of CSSGlobe script which helps you to display content randomly and rotate content using Javasctipt and CSS. We modified it to generate a dynamic list instead of manual list through Feedbuner BuzzBoost Headlines. I guess instead of adding a manual list a random dynamically generated list would be much more useful. :)
You can add the sticky bar at your blog footer and also at the top of your blog. I will guide you with both the settings. Follow these simple tips:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for </head> and just above it paste this:
<script type='text/javascript'>
//<![CDATA[
this.randomizer = function(){
    var length = $(".feedburnerFeedBlock li").length; // this is where we put the id of the list
    var ran = Math.floor(Math.random()*length) + 1;
    $(".feedburnerFeedBlock li:nth-child(" + ran + ")").show();
};
$(document).ready(function(){  
    randomizer();
});

$(document).ready(function() {
$('#toggleButton').click(function() {
if ($('#MBT-Sticky-container').is(':visible')) {
$(this).val('▼');
} else {
$(this).val('▲');
}
$('#MBT-Sticky-container').slideToggle();
});
});
//]]>
</script>

 

5.  Optional: Skip this step if you have Jquery source link already added inside your template.
Next search for <head> and just below it paste the following JQuery library code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.7.2' type='text/javascript'/>

  

6. Search for </b:skin>.  Click the black arrow to expand the code.
compressed blogger stylesheet
   7.  Paste the following CSS Styles just above ]]></b:skin>

/*--------Floating Sticky bar by www.MyBloggerTricks.com --------------*/
#creditfooter{display:none;}
#MBT-Sticky-container {
   height: 55px;
background: #000;
border-top: 5px dashed #FC8D59;
border-bottom: 2px solid #FFFFFF;
position: fixed;
width: 100%;
z-index: 99999;
box-shadow: 1px 2px 9px #666;
top:0px; }
.feedburnerFeedBlock ul, .feedburnerFeedBlock ul li{
    margin:0;
    padding:0;
    list-style:none;
    }
   
    .feedburnerFeedBlock ul li a { color:#fff!important; text-decoration:none;}
        .feedburnerFeedBlock ul li a:hover {text-decoration:underline;}
.feedburnerFeedBlock ul{
    line-height:120%;
   
    }
.feedburnerFeedBlock ul li{
    padding:20px; text-align:center; font-family:georgia; font-size:17px; font-weight:bold;
   
    display:none; /* hide the items at first only to display one with javascript */
    }
#toggleButton {
position: fixed;
top: 19px;
right: 10px;
z-index: 999999999999;
border-radius: 100px;
padding: 5px 6px;
font-size: 10px;
border-width: 3px;
border: 3px solid #FC8D59;
background: #000;
color: #FFF;
cursor: pointer;
}
.sticky-gap {
height: 80px; clear:both;
}

Customization:
[a] Change Colors
  • To edit the border colors of the toggle button and container edit: #FC8D59
[b] Change Location/Position
By Default the sticky bar displays at the top of webpage but if you wish to show rotating random headlines at your website footer then make these changes:
  • Replace top:0px; with bottom:0px;
  • Replace top:19px; with bottom:19px;
[c] To increase or decrease the vertical gap between your content and the sticky bar edit  height: 80px;

8. Now finally search for the body tag which is <body>
Note: If you are using Official Blogger Templates then search for this tag instead:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

After you have found the proper body tag simply paste the following code below it:

<input id='toggleButton' type='button' value='▲'/>
<div id='MBT-Sticky-container'>
<script src='http://feeds.feedburner.com/TntByStc?format=sigpro' type='text/javascript'></script>
    </div><div class="sticky-gap"></div>

Replace the above bolded JavaScript code with the BuzzBoost code you copied in this step.
  9.  Save your template and you are all done!
Visit your blog to see an attractive attention grabber working just perfectly! :)

Show Random Headlines in Blogger - Manual

If you wish to display a selected list set of links then you can surely create your own list by making these simple changes.


1. Change the CSS Code:
Inside the CSS code shared above in step#7  replace all .feedburnerFeedBlock ul   with .feedburnerFeedBlock1


2. Change the HTML code
Instead of using the HTML code shared in step#8 kindly use the following one:

<input id='toggleButton' type='button' value='▲'/>
<div id='MBT-Sticky-container'>
<ul class='feedburnerFeedBlock1'>
  <li><a href='ADD URL HERE'>ADD TEXT 1 HERE</a></li>
<li><a href='ADD URL HERE'>ADD TEXT 2 HERE</a></li>
<li><a href='ADD URL HERE'>ADD TEXT 3 HERE</a></li>
<li><a href='ADD URL HERE'>ADD TEXT 4 HERE</a></li>
  
  </ul>
    </div><div class="sticky-gap"></div>

 

The above code will help you create 4 headlines. You can edit the text and URL address for each link. To create a new headline simply keep on adding the following line:

<li><a href='ADD URL HERE'>ADD TEXT  HERE</a></li>
That's it!

Need Help?

We will keep on updating this plugin and will add several new features to it. You can surely customize it and add anything inside the container like social sharing buttons for instance. In our next post we will share how to add this sticky bar to Genesis Framework. Till then let me know if you need any help. Would be a pleasure helping you out.
If you are looking for the stickybar we are using on MBT then read:
I just hope this new plugin adds a new life to your blog and also your advertising revenue because the extra pageviews mean cash! Peace and blessings buddies. :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

25 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Really Another Great Widget By MBT Thanks For Sharing Thumbs To MBT

    ReplyDelete
  2. great widget for audience, thank you for sharing this.

    ReplyDelete
  3. Amazing widget Special Thanks to Muhammad Mustafa Sir......

    ReplyDelete
  4. well great widget bro working fine, i tried it looking great.
    one thing i wana ask that the random post which are showing are changing after every refresh of page.
    if you can make it time based after every 2-3 sec posts automatically gets changed. if it is possible let me know.

    ReplyDelete
    Replies
    1. Dear Yaseen that is a brilliant idea. Let me try this out too :)

      Delete
    2. Dear Mohammad, really great plugin your teams develope. I'll too want to know if it can be randomized 10-20 seconds. =)

      Delete
  5. Great (y)

    Installed :D

    Kindly check the links in your article

    ReplyDelete
  6. Really cool widget Mohammad bro.
    You said that you create it for wordpress too. Can you please provide me this plugin for wordpress??

    ReplyDelete
  7. Hey Mustafa bro I must tell you that it's an awesome widget....and it's perfect for my blog, as it is based on tech news around the world....So I can use it to show the breaking news...the best part is you made it sticky...i loved it, and will be using it soon.....

    Bro I have a off topic question....please help me...I enabled share this button to my blog (techstake.org)....the problem is it is sharing the home page instead of post url....it is hampering my blog's growth.....Can you please look in to my blog's source code, and tell what am I doing wrong? Please....

    ReplyDelete
    Replies
    1. please use the sharing URLS given on this widget: http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html

      U need dynamic XML tags to mention item pages

      About the feedback, I loved it! :)

      Delete
  8. Awesome widget for blogger. Thanks for sharing... MBT is the Best... Thanks.......

    Regards,
    Dixit [Triposoft.com]

    ReplyDelete
  9. Thanks Pakistani buddy! keep it up. I have apply this in my blog. Im feeling very happy. take a look plz :-) bloggingstate.blogspot.com

    ReplyDelete
  10. Sallam
    i add Show Random Headlines in my blogger (pctracke.blogspot.com) but still not show headline and content plz help
    and i paste feed burner BuzzBoost html link

    ReplyDelete
  11. Can I Use Headline gadget in www.ctoptips.blogspot.com ?

    ReplyDelete
  12. Nice I liked the Manual method though . well done MBT ..
    regards from 8ruuux network

    ReplyDelete
  13. That's what I am searching for a couple of weeks. Thanks Mohammad, u provided another wonderful code for getting more hits on my blog.

    Further, can we make it in a way to show random posts only from a particular category?
    Like in my case of online MBA education blog, I want to show random posts only from the category of "higher education" only in the notification bar.

    ReplyDelete
  14. great :)
    http://www.blogolect.blogspot.com

    ReplyDelete
  15. how can i put a text message before the title of the post that appear on this sticky footer???
    like: "suggestion" "read this" etc etc

    ReplyDelete
  16. Worked Beautifully :) Thanks a lot

    ReplyDelete