Tạo Recent post đẹp mắt và chuyên nghiệp 3 cột cho các blogger

(Viettin365.com) Đây là thủ thuật được giới thiệu khá nhiều trước đây nhưng mình vẫn muốn chia sẻ lại đến các bạn bởi 2 nguyên nhân : tính thẩm mỹ và tính chuyên nghiệp của nó ! Hầu hết các website không thấy dùng Recent post dạng này bởi : không chạy slider và chứa file .JS ảnh hưởng đến tốc độ load ! Nhưng với tình hình hiện nay tốc độ mạng đang dần ổn định và khá nhanh nên chuyện ảnh hưởng đến tốc độ load trang các bạn đừng lo lắng nhé . Mình thấy Recent post đẹp mắt và chuyên nghiệp cho các blogger này rất hay ! 
Ảnh minh họa 

Bắt đầu thủ thuật 

1. Đăng nhập blogger

2. Chọn bố cục

3. Thêm tiện ích HTML/Javascript và dán code bên dưới vào

<style type="text/css">
*{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 13px;

}

#index_news{
width: 689px;
margin: 2px ;
}

#main_content{
width: 689px;
height: auto;
border: 1px solid #C8BBBE;

float: left;
overflow: hidden;
}

#main_content .top_news{
width: 690px;

margin-bottom: 5px;
}
#main_content .top1_news{
width: 280px; /*Độ rộng cột đầu tiên*/
float: left;
margin-top: 6px;
}
#main_content .top1_news .top1_news_image img{
border: 0px solid #9B9292;
padding: 8px;
width:260px; /*độ rộng của ảnh ở cột đầu tiên*/
height:260px; /*Chiều cao của ảnh ở cột đầu tiên*/
}
#main_content .top1_news .top1_news_title{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a{
font-size: 16px;
color: #DC0E0E; /*Màu tiêu đề của bài viết có nội dung tóm tắt*/
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover{
text-decoration: none;
color: #0066ff; /*Màu tiêu đề của bài viết có nội dung tóm tắt khi rê chuột*/
}
#main_content .top1_news p{
text-align: justify;
}
#main_content .top1_news p a{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img{
vertical-align: bottom;
}
#main_content .top2_news{
width: 179px; /*Độ rộng cột thứ 2*/
float: left;
margin-left: 8px;
margin-top: 12px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image{
background: url() no-repeat;
width: 160px; /*độ rộng của ảnh ở cột 2*/
height: 155px; /*chiều cao của ảnh ở cột 2*/
padding: 6px;
}
.top2_news_image img {
width:160px; /*độ rộng của ảnh ở cột 2*/
height:145px; /*chiều cao của ảnh ở cột 2*/
}
#main_content .top2_news h2{
padding-top: 2px;
}
#main_content .top2_news h2 a{
color: #000033;
text-decoration: none;
}
#main_content .top2_news h2 a:hover{
text-decoration: none;
color: #FF0000;}

#main_content .top2_news .dot3x1{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news{
width: 215px; /*Độ rộng cột thứ 3*/
float: right;
background: *fff url() no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title{
background: url(https://pbs.twimg.com/media/BK7MdybCUAAVmv6.gif:large) no-repeat;
width: 209px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 12px;
}
#main_content .topo_news ul li{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a{
color: #002392;
font-weight: bold;
font-size: 12px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {
color: #6F0404;
text-decoration: underline;}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sphotos-e.ak.fbcdn.net/hphotos-ak-snc6/264495_109532035922228_837734211_n.jpg";
imgnew = "http://i646.photobucket.com/albums/uu185/vanhoai1111/th_subforum_new.gif";

showRandomImg = true;

aBold = false;
summaryPost = 288; // Số kí tự hiển thị cho phần tóm tắt bài viết
numposts = 14; // số bài viết sẽ hiển thị (Gồm tất cả bài viết ở 3 cột)
topoTitle = "Bài viết khác";
label = "Advanced blogger"; // Nhãn bài viết hiển thị (nếu hiển thị tất cả bài viết thì không cần gõ nhãn)
home_page = "http://www.viettin365.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="https://viettin365.googlecode.com/svn/trunk/Z_recent_post.js" type="text/javascript"></script>

Mình đã chú thích ngay bên cạnh các bạn chỉnh lại cho phù hợp nhé 
Thay link : http://www.viettin365.com/  thành địa chỉ bạn muốn hiển thị 
Chúc các bạn thành công