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

Thứ Tư, 28 tháng 3, 2012

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:




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] = "http://2.bp.blogspot.com/-5ShnwAhC-eM/TyyZeHwfpPI/AAAAAAAAAcs/cRaiet9Jhj4/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";
imgico= "http://4.bp.blogspot.com/-GsC8zLoeoSg/TyyZ677yMVI/AAAAAAAAAc4/SSeCIhN4jl4/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
Xem thêm bài viết cùng chuyên mục:

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn