Blogger Tips

Recent Post Slider With Thumbnail Widget For Blogger

How To Add Recent Post Slider With Thumbnail Widget For Blogger

Today Blogger Funda 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.

Recent Post Slider With Thumbnail Widget For Blogger

RECENT POSTS with THUMBNAILS Widget

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;

<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.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close