Installing a Recent Post Widget on Blogger

Installing a Recent Post Widget on Blogger

Installing a Recent Post Widget on Blogger

This time Kabul Tech will share How to Install Recent Post Widgets on Blogger.

Recent posts widget or can be called the latest article is one way to reduce the bounce rate of the blog by providing information for the latest posts on the reader.

That way it will be more helpful for the reader to find out the most recent posts on the blog without having to switch to the front page or the homepage.

Besides being simple, this recent posts widget has a fairly light loading,

so there's no need to worry about adding loading loads to your blog.

Installing a Recent Post Widget on Blogger

If you want to try it on your blog, please follow the steps below.

Please save the following CSS code above the code

</head> 

Or

&lt;/head&gt;&lt;!--<head/>--&gt;

If the appearance is not what you want, you can adjust some parts to adjust the appearance with the template you are using.

<style type='text/css'> /*<![CDATA[*/ ul#recent-posts{width:100%;margin:0 auto;padding:0!important;list-style-type:none} ul#recent-posts li{background:#FFF;padding:0!important;margin-bottom:10px;overflow:hidden;width:100%;height:auto;box-shadow:2px 2px 3px rgba(0,0,0,.05)} ul#recent-posts li img{width:90px;height:70px;margin:0 10px 0 0;float:left} ul#recent-posts li .title_post{padding:10px!important;line-height:1;position:relative;margin-left:90px} ul#recent-posts li a{color:#333;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none} ul#recent-posts li a:hover{color:#8e8efa} ul#recent-posts:after{content:"";display:block;clear:both} /*]]>*/ </style>

Then please save the following javascript code above the code </body>
<script type='text/javascript'> //<![CDATA[ var homePage = window.location.origin,numPosts = 5; function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/Indzign/InSEO/3c89739e/recentposty.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload; //]]> </script>

Pay attention to the marked code, change the number as needed.

After that Save the theme. 

Finally, please save the following code in the sidebar through the layout/layout of the HTML / JavaScript gadget.

<ul id="recent-posts"></ul>

Finish, see the results on your blog.

That's How to Install Recent Post Widgets on Blogger, hopefully, useful for you.