How to create Simple Blogger Recent Posts With Thumbnails
How to create Simple Blogger Recent Posts With Thumbnails - Installing widgets recent post is one way to minimize bounce rate blog by providing information for the latest posts on the reader. That way readers will easily find the most warm posts on the blog.
Many kinds of recent post widgets like recent posts or recent carousel shaped posts. Well this time I will share a blogger widget recent posts are quite simple and stored in the sidebar blog.
In addition to simple, recent posts widget has a fairly light loading, so you need to try as well and suitable for your blog that emphasizes the loading speed.
If you are interested to try it, please follow the steps below.
Please keep the following CSS code above code </head> (you may need to customize some sections to customize it to the theme you are using).
Then please save the following JavaScript code above code </body>
Listing 5 to set the number of posts displayed.
Lastly please save the following code in the sidebar via layout / layout on HTML / JavaScript gadgets.
Done, then see the result ..
It's easy not to make a simple and light recent post for your blog, hopefully with what I've shared this, it can be useful and useful for all of us. Good luck.
Many kinds of recent post widgets like recent posts or recent carousel shaped posts. Well this time I will share a blogger widget recent posts are quite simple and stored in the sidebar blog.
In addition to simple, recent posts widget has a fairly light loading, so you need to try as well and suitable for your blog that emphasizes the loading speed.
If you are interested to try it, please follow the steps below.
Please keep the following CSS code above code </head> (you may need to customize some sections to customize it to the theme you are using).
<style>
/*<![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;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);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:#FF1744;}
ul#recent-posts:after{content:"";display:block;clear:both}
/*]]>*/
</style>
Then please save the following JavaScript code above 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/KompiAjaib/kompi-js/master/recent_post_with_thumbnail.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Listing 5 to set the number of posts displayed.
Lastly please save the following code in the sidebar via layout / layout on HTML / JavaScript gadgets.
<ul id="recent-posts"></ul>
Done, then see the result ..
It's easy not to make a simple and light recent post for your blog, hopefully with what I've shared this, it can be useful and useful for all of us. Good luck.
Post a Comment for "How to create Simple Blogger Recent Posts With Thumbnails"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog