Today's posts will guide you in installing these amazing dynamic sticky bars on our blogger blogs to show your every latest post in top your blogger blog. To add these plugins in your Blogger Blog or Wordpress Blog follow below steps.
How To Install Dynamic Sticky Bars in Blog?
- Go To Feedburner>>Publicize>>BuzzBoost
- Uncheck all the boxes
- You can choose number of post will shown in sticky bar. My Advise you can choose All to select all published posts so far
- Choose Make links open in same windows
- Click save to activate the lists of your recent posts. (if you are not understand about these steps don't worry look below image make your options like this image)
- After Click on Save button Feedburner will give you a JavaScript code that you will need to copy
- you will only copy the code starting with <script> and ending with </script> as below image.
- Save this code inside a notepad or text document because we will need to use it later in this tutorial
- Now let's hump to second part of this tutorial.
Add Dynamic Bar in Blogger
I will give this plugin from MBT blog its author are managed to write a script with the help of CSS script which help you to randomly display your blogger post and rotate posts using JS and CSS. We modify it to generate a dynamic view of this plugin.
You can add the dynamic sticky bar at your blog's top and also footer. I will guide you with both locations to add these sticky bar in your blogger blog follow below steps.
- Go to Blogger Dashboard>>Template>>Edit HTML
- before going to edit your template you can first download its backup
- after downloaded the backup. Find below tag
</head>
- Paste the following below code above/before </head>
<script type='text/javascript'>
//<![CDATA[
this.randomizer = function(){
var length = $(".feedburnerFeedBlock li").length;
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 ($('#NBT-Sticky-container').is(':visible')) {
$(this).val('▼');
} else {
$(this).val('▲');
}
$('#NBT-Sticky-container').slideToggle();
});
});
//]]>
</script>
- Find this below tag
<head>
- Paste the following below Jquery code after it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.7.2' type='text/javascript'/>
- If this jquery code alredy added in your blogger template so you no need to add the jquery code again.
- Find this below code. Click the arrow to expand the code
</b:skin>
- Paste the following below code above/before </b:skin> or ]]></b:skin>
/*--------Dynamic Sticky bar by www.NextBloggerTricks.blogspot.com --------------*/Customization:-
#creditfooter{display:none;}
#NBT-Sticky-container {
height: 55px;
background: #000;
border-top: 5px dashed #FB0303;
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: 20px;
right: 10px;
z-index: 999999999999;
border-radius: 100px;
padding: 5px 6px;
font-size: 10px;
border-width: 3px;
border: 3px solid #FB0303;
background: #000;
color: #FFF;
cursor: pointer;
}
.sticky-gap {
height: 80px; clear:both;
}
- To change its border color of the toggle up button and container replace #FB0303 with your color code
- To change the location and position of sticky bar by default setting the sticky bar displays at the top of your blogger blog if you want to change its location or position.
Replace top:0px with bottom:0px;
Replace top: 20px; with bottom:20px;
- To increase or decrease the vertical gap between your post title and the sticky bar edit height: 80px;
- Now this is the finally step search this below tag
<body>Note: If you are using default official blogger template then search the below code
<body expr:class='"loading" + data:blog.mobileClass'>
- After you have found the proper body tag then,
- Paste the following below code after <body>
<input id='toggleButton' type='button' value='▲'/>
<div id='NBT-Sticky-container'>
<script src="http://feeds.feedburner.com/NextBloggerTricks?format=sigpro" type="text/javascript" ></script>
</div><div class="sticky-gap"></div>
- Replce http://feeds.feedburner.com/NextBloggerTricks?format=sigpro with your BuzzBoost code you copied or saved on notepad in first part of this tutorial
- Click on Save Template
- Check your blog to see an attractive dynamic sticky bar working perfectly.
Final Words
I hope you're add this plugin perfectly if not? such you're facing problem or getting error during this process don't worry please leave a comment for your solution and don't forget to like our Facebook page.
Happy Blogging!
No Comment
Comment Policy
We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.