Home » Thủ Thuật Blog
Thursday, March 15, 2012
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:
Chúc các bạn thành công!!!
Tags:
Thủ Thuật Blog
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;
border:#999 solid 1px;
width: 650px; }
#top-news {
width: 440px;
height:166px; padding:5px; border:#bbb solid 1px; background:#eee; font-size:12px; }
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; }
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] = "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/AVvXsEhcg1_POmz_jKMRA3p1jr0Qa0DmvMncQC6CetCN_y3OZGKZB8mKeSjgzH4goIprIC0zGg5KWmzN2pqN7ARBVjO7raC2AYTVZ2OoZFR9mbbLq03KozjSW1y-WYwZob_ZU-_F7Ps0am2JQsE6/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif"; imgico= "imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuEFk4oFod1OyKv05CvOS340SBLDrY5RC1CcRQoppqb4JqxbtiJF9NZgivB24BfAr5KqP5jc2X8uMTQjOsbXiF3KZ5rtN4AYndpJbZNWT4GVRj4z9LfMb-E8nPnhyphenhyphenQy6-ww21He7ZqhYH8/s1600/icom-left-news-namkna-ngoctra.gif"; showRandomImg = true; showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 100; fntsize = 12; vnesize = 18;
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 =
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 250; summaryFontsize = 12; summaryColor = "#000";
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4; numposts = 14; label = "Phim Kinh Dị"; home_page = "http://tanchau123.blogspot.com/"; </script> <script src="</script>
<script src="http://tanchau123.googlecode.com/files/Recentposts_megazine1.txt" type="text/javascript"></script> 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
http://tanchau123.googlecode.com/files/Recentposts_megazine1.txt
thành
http://tanchau123.googlecode.com/files/Recentposts_megazine2.txt
Comments[ 0 ]
Post a Comment