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.
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.
For the dynamic version of this plugin you will need to have Feeds stored at feedburner.
- Go To Feedburner > Publicize > BuzzBoost
- 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.
- Click Save to activate the List of your recent posts.
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:
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: - Go to Blogger > Template
- Backup your template
- Click Edit HTML
- Search for </head> and just above it paste this:
<script type='text/javascript'>5. Optional: Skip this step if you have Jquery source link already added inside your template.
//<![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>
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.
7. Paste the following CSS Styles just above ]]></b:skin>
/*--------Floating Sticky bar by www.MyBloggerTricks.com --------------*/Customization:
#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;
}
[a] Change Colors
- To edit the border colors of the toggle button and container edit: #FC8D59
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;
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='"loading" + data:blog.mobileClass'>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:
After you have found the proper body tag simply paste the following code below it:
<input id='toggleButton' type='button' value='▲'/>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:
<div id='MBT-Sticky-container'>
<script src='http://feeds.feedburner.com/TntByStc?format=sigpro' type='text/javascript'></script>
</div><div class="sticky-gap"></div>
<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.
.PNG)
0 comments:
Post a Comment