Tiện ích Recent Post đẹp dạng magazine cho blog

Hôm nay, mình muốn chia sẽ cùng các bạn tiện ích Recent Post rất hay và đẹp. Với tiện ích này thì blog/web bạn sẽ trông chuyên nghiệp hơn, đồng thời cũng trình diễn được nhiều bài viết cùng lúc. Xem DEMO bên dưới sẽ rõ hơn:

Blogger sẽ cập nhật thêm tính năng SEO vào tháng 4 này (0 comments) - (28 Mar 2012) Trước đây còn nhiều ý kiến trái chiều về định nghĩa số 1 giữa các ứng cử viên nặng ký là blogspot, wordpress, Joomla, my opera, và yahoo,... Qua năm tháng My Opera, Yahoo 360 pluss, Joomla lần lượt bị bỏ lại do sự hạn chế trong thiết ... Readmore... Tạo trang báo lỗi 404 và chuyển hướng cho blogspot Tạo logo liên kết chạy ngang Tạo trang in chuyên nghiệp nhiều tùy chọn cho blog Menu ngang xổ dọc xuống nhiều cấp

Menu ngang xổ dọc xuống 3 cấp Menu ngang xổ dọc một cấp cho blogspot Tạo Dropdown Menu đơn giản Menu ngang xổ dọc một cấp cho blogspot Tạo thanh menu ngang có sổ dọc xuống 2 cấp Tạo Menu ngang có hiệu ứng khi rê chuột Flip Menu - Menu dọc với hiệu ứng lật bằng JQuery Tạo Drop Menu đơn giản có thanh tìm kiếm Lưu Bá Ôn - Thông Thiên Tà Giáo (THVL 1)

Thực hiện :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

<style type="text/css">    
#cotent-news {     
border:#999 solid 1px;     
width: 650px;      }     
#top-news {     
width: 440px;      
height:166px;       padding:5px;     
border:#bbb solid 1px;     
background:#eee;     
font-size:12px;     
}     
#bottom-news {     
width: 444px;      padding:5px;     
}     
#bottom-news-item {     
width: 106px;     
margin-right:5px;     
float:left;     
}     
#left-news {   
width: 200 px;  
padding:5px;     
border-left:2px dotted #ccc;     
}     
</style>     
<script language="JavaScript">     
imgr = new Array();     
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-dExLQPtlDJeaPlrar_ziGCKZpY8tJ0C-H2Ugy8WrwD1mDZ-VE6mgLqL6UAcUqUKEkw16umHNStUfS96_DgF7gpibg9J_VqQhC9VNnGNVWMLMsWRlNhLyZzOTrsTramB0YInZjUiPsQy/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";     
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnZ4sjCBpQ5bTctW2u_g4QVNYAnPMAwCHeoUi4wFlTTzdnNOy2xLXbaZuMtpmP_h0J0opop0Ra-ACv6L0s_SlY_5z9Y7l1GDtd3evW-AjhVgVGmRCbtOcTwlMxs0UHvTRIUziQuj0ylbYl/s1600/icom-left-news-namkna-ngoctra.gif";     
showRandomImg = true;     
topwidth = 160;      
topheight = 160;     
botheight = 100;      
botwidth = 100;     
fntsize = 12;     
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"     
acolor = "#555";     
cmcolor = "#555";     
topcolor = "#f00";     
aBold = true;     
text = "comments";     
showPostDate = true;     
summaryPost = 250;     
summaryFontsize = 12;     
summaryColor = "#000";     
botnum = 4;     
numposts = 14;     
label = "Phim Kinh Dị";      home_page = "http://tanchau123.blogspot.com/";     
</script>     
<script
 
src="https://sites.google.com/site/namknablog/vne-recent-adv.txt"
 type="text/javascript"></script>

* Trong đoạn code trên :

• width: 650px; : chiều rộng của widget
• botnum = 4; : số bài viết hiển thị ở class bottom-news
• numposts = 14; : số bài viết hiển thị ở class left-news
• label = "Phim Kinh Dị"; : nhãn/ trương mục ( Label ) sẽ được hiển thị lưu ya nhãn này phải ghi chính xác nếu không xẽ không hiển thị)

Các bạn có thể xem hình minh họa bên dưới để hiểu rõ layout của widget : 

CHÚ Ý: Nếu bạn muốn widget hiển thị những bài mới nhất trên blog thì thay code

https://sites.google.com/site/namknablog/vne-recent-adv.txt

thành

https://sites.google.com/site/namknablog/vne-recent-adv-all-posts.txt