Tiện ích Recent post ở Trang chủ

1. Đăng nhập vào tài khoản Blogger

2. Vào phần thiết kế (Design)

3.  Thêm đoạn mã sau trước thẻ  ]]></b:skin>

/* MAIN HOME */
ul, ol, dl, li {padding: 0;margin: 0;list-style:none;}
a:hover {color: #CF152A;text-decoration: none;}
a:focus, a:hover, a:active {outline: none;}
h2, h3, h4 {margin:0;padding:0;font:bold 100% Verdana,Geneva,sans-serif;line-height:1.4em}
#outer-wrapper {padding:0;text-align:left;font:normal normal 100% Verdana,Geneva,sans-serif;}
#wrap {width:960px;margin:0 auto;}


#main-wrapper {width:440px;float:left;display:inline}

#main-home {width:652px;float:left;display:inline;}

.body-home {border:1px solid #cdcdcd;margin-top:15px;background:#fff;padding-bottom:10px}

.body-home-s {border:1px solid #cdcdcd;background:#fff;padding-bottom:10px;margin-bottom:15px;}

.body-s-left {background:#fff;margin:0;padding:8px 10px 0 10px;width:345px;float:left;border-right: 1px solid #cdcdcd}

.body-s-left img{background:#eee;border: 1px solid #ccc;float: left;margin-bottom:8px;padding:5px;width: 333px;height:239px;}

.body-s-left h2 {color:#383838;font-size:14px;font-family:Tahoma;margin:0;padding:0;line-height:1.3em}

.body-s-left h2 a{text-decoration:none;text-transform:none;color:#383838}

.body-s-left-info {margin:0;padding-top:8px;line-height:1.5em;font: normal 13px Tahoma;color:#383838;}

.body-s-right-li {width:265px;float:right;padding-right:10px;padding-top:5px}

.body-s-right-li ul {}   

.body-s-right-li  li {background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSQhMGq-p7Ki7DYJ-zO9ue8O2kXQXD_jlyxKC94nSPv3zZ7Q528njiWG48s9p5pDBa6YTfYrucP7JZQx3bR446NupbUaRHI9Ity3cA-ZrgGEDQrF3ho2hjbhEGI0U-608e6-U29Mi7cVM/s1600/green-star.gif)  no-repeat 3px 6px;padding:3px 0 3px 15px;line-height:1.3em;font: normal  12px Arial}

.body-s-right-li li a {color:#2B2B2B}

4. Tiếp tục chèn đoạn code sau lên trước thẻ </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>         

<script src='https://dl.dropbox.com/u/74775294/Filejs/box-home.js' type='text/javascript'/>

<style type='text/css'>

.post-outer{display:none}

</style>

</b:if>             

5. Chèn đoạn code này vào sau <div class='main-outer'> hoặc <div id='main-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>  

<div id='main-home'>

<div class='body-home-s'>                                             

<script>document.write(&quot;&lt;script   src=\&quot;/feeds/posts/default?max-results=&quot;+12+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);</script>          

<div style='clear:both;'/>        

</div> 

Code trên là toàn bộ bài viết mới, nếu chỉ cho bài viết mới theo nhãn thì thay code màu đỏ bằng /feeds/posts/default/-/Tên nhãn là được.

6. Save template.

- Các bạn có thể chỉnh sửa theo hình bên dưới:

Bấm vào hình để xem phóng to nếu chưa nhìn rõ.