Simple Recent Posts Blogger Plus Thumbnails

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

Demo
If you are interested to try it, please follow the steps below.
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>
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 on marked text above had a function to set the number of posts displayed.

Lastly please save the following code in the sidebar through the layout / layout on the gadget HTML / JavaScript.
<ul id="recent-posts"></ul>
Done, good luck.

So today article about Simple Recent Posts Blogger Plus Thumbnails hopefully help and solve your problem.

Comments

  1. Hey, I think your site migһt be having browser compatibility issues.
    Ꮃhen І lοok at your blog in Chrome, it ⅼooks fine ƅut ѡhen opening in Internet
    Explorer, іt has some overlapping. Ι јust ԝanted
    to give you a quick heads սр! Οther then that, amazing blog!

    ReplyDelete
  2. Thank you for sharing your tһoughts. I truly apprecіate y᧐ur efforts and I wiⅼl be waіting for уoսr neⲭt ᴡrite ᥙps thank yоu ᧐nce again.

    ReplyDelete
  3. Its like you read my mind! You appear to know so much about this,
    like you wrote the book in it or something. I think that you can do with
    some pics to drive tthe message home a little bit, but other than that,
    this is fantasti blog. An excellent read.
    I'll definitely be back.

    ReplyDelete
  4. Good day! Do you know if they make any plugins to assist with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results.
    If you know of any please share. Many thanks!

    ReplyDelete
  5. Greetings! This is my first comment here so I just
    wanted to give a quick shout out and say I reallpy enjoy
    reading through your articles. Can you suggest any other blogs/websites/forumsthat go
    over the same subjects? Many thanks!

    ReplyDelete

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.

Popular posts from this blog

How to Make Blogger Safelink Converter v3

List of weapon buff materials, effects and how it can be durango wild lands

Install deb package via Termux