How to add recent post in blogger with CSS style and Script Style

 Hello! every one Welcome back to KhmerueTeams Officials tutorial Today I will teach you how to add recent post inside body post in Blogger. But before we start you need to make sure with 2 important things. Some theme are not support with CSS style and some themes are support all depending on the year and the creator. So you can try with both CSS and Script Style.

1. Them that support CSS style will be displayed the post after you added the code in Gadget content.

2. All themes is support all (script style)  so don't worry about it.

Let's get Start!

Go to Blogger.com and sign in to your account if you have two site please choose the site correctly that you want to add code. Click on layout on the left hand side as show in the screen shot.

And now click on add a Gadget as shown in the screen shot.

And now the pop up window will appearing like this so you need to add the CSS code or Script Code inside the content and then click on Save. Copy and past the code below inside the content box.

Code: 

<script style="text/javascript"  src="http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script  src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

Or use this code

<noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <style type="text/css"> img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;} .recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;} ul.recent-posts-container {counter-reset: countposts;list-style-type: none;} ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;} .recent-posts-container a { text-decoration:none; } .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;} .recent-posts-details {margin: 5px 0px 0px 92px; } .recent-posts-details a{ color: #777;} </style>

Watch this video to help: 

Share on Google Plus

About KhmerueTeams Official

Welcome to KhmerueTeams Officials Blogger. I am Mr. Chhuye The Admin of this blogger. If you have quetion contact me : +855968555664 / +855976235033 or watch my video on ​

YOUTUBE HERE