How to display title of latest posts with auto scrolling and sticky effect in Blogger

Share This:

Share Tweet Pin

Displaying the latest post in Blogger is most important for engagement of the reader because they can easily find that what you have posted recently in your blog. Blogger latest post widget can solve you problem which displays the recent post of your blog.

But, in this tutorial I am going to explains that how you can add auto scrolling recent posts widget on top of your blogger blog that looks good on your blog. So lets see that how to display the title of Blogger Pots as the breaking news with scrolling and sticky effect.

This Blogger latest post widget is similar to the recent post widget in your blogger sidebar, but this widget will display and scroll the title of posts Horizontally on the top of your Blog which is sticky on scrolling down.

Follow the steps below exactly to add this widget in your blogger blog :-

• Step 1 : Log-In into your Blogger account and go to Template, now click Edit Html button

• Step 2 : Add this code after closing head tag i.e. after </head>

<div id='breakingnews'><span class='breakhead'>Latest Post: </span>
<div id='adbreakingnews'>Loading...</div></div>

• Step 3 : Add this code before closing body tag i.e. before </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://improving-knowledge.blogspot.com",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

After adding the above code, replace https://improving-knowledge.blogspot.com with address of your blog.

• Step 4 : Add this code before </head>

<style type='text/css'>
/* CSS Breaking News */
#breakingnews{margin:0px 0 0;height:40px;line-height:29px;overflow:hidden;border-bottom:2px solid #fc4f3f;border-top:3px solid #9AFE2E;}
#breakingnews .breakhead{position:absolute;background:none repeat scroll 0 0 #fc4f3f;color:#fff;display:block;float:left;font-family:&#39;Consolas&#39;;font-size:16px;text-transform:none;padding:6.5px 20px}
#adbreakingnews li a {font-size:18px;color:#fc4f3f;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#444;text-decoration:underline}
#adbreakingnews {float:left;margin-left:175px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

• Step 5 : Save the template.

• Step 6 : Now for making this sticky while scrolling down in your blog > Go to template layout >> Add a gadget >> Paste this code in the empty box and click on save button.

<script>
//<![CDATA[
bs_makeSticky("breakingnews"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

And it has been done 😊

Tips: # Whenever you edit the Blogger template's HTML, don’t forget to keep a Backup your existing blogger template, so that tf something goes wrong, you can Restore the template.

If you found this post useful, please share it because Sharing is Caring 😊.