Recent post width thumbnail 3 cột cho blogspot.

Hôm nay namkna sẽ giới thiệu thêm cho các bạn một tiện ích recent post mới, tiện ích này trước đây được news.zing.vn sử dụng và cũng từng được fandung giới thiệu rồi, tuy nhiên hiện nay đã thất lạc do vậy namkan sẽ giới thiệu lại tiện ích này cho các bạn có nhu cầu.

Đặc điểm của tiện ích này là có 3 côt các bạn có thể xem demo hoặc hình ảnh bên dưới:

Demo for Post

Ảnh minh họa:

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

3. Chèn đoạn code CSS bên dưới vào trước thẻ đóng </head> (hoặc có thể chèn thẳng vào widget HTML/javascript chung với code chính của thủ thuật)

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

#index_news
{
width: 525px;
margin: 5px;
}

#main_content
{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news
{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news
{
width: 234px;
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img
{
border: 1px solid #CCC;
padding: 1px;
width:230px;
height:165px;
}
#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: #002392;
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover
{
text-decoration: underline;
}
#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: 95px;
float: left;
margin-left: 8px;
margin-top: 14px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH2q8UOoj6Wx6zCmA9WD7SuY_-atsiEM6gD-VlX94Ef9zJXC1G7heieQYkL5Iu20zMaH8KQIxGqF5WiJxWFiAiVvc9Cv2wHSUJu0zrrQp-1fXYjCtvu_a12XTISOtGQO1lxXz2ZsR5ioGV/s1600/main-content-namkna-blogspot-com.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}


#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqizUoDJwtq2wxORTLACQczP3g3iKhdxSQGFhwU4cq488iItFP55DZP7o9Al-lpvtwFGYadV8Szd6EZuqRTudNZrhYCcUpjxn3yc3em8X25KgXmiMHo_KuXo7ZkEHKp5r6iYCEJchz-Yi/h120/main-content-2-namkna-blogspot-com.gif) repeat-x center

center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWufXXjp9FOyxPJZBrHTfA7rYe_cUWTWZHZSlHq7Z_CGmw_5vRGy8yY_zxfdhDdtDHVAy62kDRSlE5bV-250CiU61zkTet4SXQgKBrS0Mi6MyZtP29uGyUVW0c2Ut3gRNvbiw2E-8ytS2/s1600/main-content-3-namkna-blogspot-com.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtZamUZFOEuzAdLHZ_X1j3EeTj-TPrl8DiDnBzB8vhp_0aT-jnqrAug7NIgm1bKuYewVd9zpxLHglQUEE6IOzvn_VEWqh6kCVdGMOe4DsK0LbAxesBuqBPNEy-Be_6sDA-geM3rP5Nf9a/h120/main-content-4-namkna-blogspot-com.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPTrncT-DKwsTegBOGxCaP6WbCFJr9OhkDYu5pDj4loCYFaneW0u_tVvLWjDJEv7oEc3jzdM2DXWnYwBI3X-BbafHC8hWKlelsNEsHPNg88sTwp0tMRmNF9M-Gq5uEZxNI6DtxKYOtayH/h120/main-content-5-namkna-blogspot-com.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: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>

Trong đó:

Code màu cam : là độ rộng của ảnh lớn nhất
Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn
Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột : top1_news, top2_news, topo_news)

- Xem hình minh họa bên dưới :

Tiện ích Recent post dạng 3 cột cho blogspot.

- Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình (kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng 525px;)

4- Bấm Lưu Mẫu (save template) lại.

5. Tạo widget HTML/javascript và dán code bên dưới vào :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbcR5GAplHaF-nym0LeAL8HoD7wbNxAdbgiM0XVJkaYVaDvxowRKcHm6PnP76YanwHV8gBCgsBg4MMzuVg0cwPRudre9ZRjWc2BSQt5MXAK4xZQAupjDX9ZbC7F7TwjLEdMpgg4fMRFRk5/s1600/nothumbnail-namkna-blogspot-com.gif";
imgnew = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwgUTkgtxAYL1UbvNfSf-iBhnsC8q13wgC0WaOIHtam-_NOu4vdIJnm6ik91y7vYHIO9YMQIB3Yow2YT_vr9hW05yJhWbHwlmUcStmSlQUuKu5QHCpjtiSfHSh-_g8W1TzNM1vpEQQlD0l/h120/new-post-namkna-blogspot-com.gif";

showRandomImg = true;

aBold = false;
summaryPost = 147;
numposts = 12;
topoTitle = "Bài viết khác";
label = "Blogspot-tips"; 
home_page = "http://namkna.blogspot.com/";

</script>
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/z-recent-label.js" type="text/javascript"></script>

- Trong đó:

Thay http://namkna.blogspot.com/ thành URL blog của bạn.
Thay: Blogspot-tips thành Nhãn cần hiển thị bài viết (nếu muốn hiển thị bài viết của cả blog thì không cần quan tâm dòng này)
summaryPost = 147; // Phần mô tả sẽ hiển thị
numposts = 12; // số bài viết sẽ hiển thị

- 2 dòng code màu xanh bạn có thể thay đổi tùy thích (xem hình minh họa bên dưới)

☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới:

<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/z-recent-label.js" type="text/javascript"></script>

- Thành:

<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/z-recent-post.js" type="text/javascript"></script>

6- Bấm Lưu (save Widget) lại.

- Lưu ý: Để tiện ích có thể hoantj động tốt và load nhanh các bạn nên download các file Js (z-recent-label.js và z-recent-post.js)bên trên về sau đó Upload lên host riêng để dùng phòng khi host của namkna bị die. Nếu chưa có host riêng bạn có thể tham khảo 2 host miễn phí sau: google code và dropbox.

Chúc các bạn thành công.