• Translate

7/27/2017

Tutorial Create Simple Blogger Recent Posts With Thumbnails

Tutorial Blogspot |

Advertisement

Installing a recent post widget is one way to minimize bounce rate blog by providing information for the latest posts on readers. With so readers will easily find the most recent posts on the blog.

Many kinds recent post widgets such as recent posts slider or carousel-shaped recent 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.

If you are interested to try it, please follow the steps below.

Tutorial Create Simple Blogger Recent Posts With Thumbnails

Please save the following CSS code above </head> code (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>
</b:if>
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/adscyber02/JS/f5e5c17e/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 through the layout on the gadget HTML/JavaScript.
 <ul id="recent-posts"></ul>
Done ... Good luck.

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.