Tab recent posts giống trang quantrimang.com.vn

Hôm nay theo yêu cầu của bạn vinatechs mình
sẽ lại giới thiệu với các bạn 1 style khác của tiện ích recent posts. Tiện ích
recent posts kì này khác giống với tiện ích VnE Tab Recent posts. Nhưng ở bản
lần này sẽ có 2 điểm khác biệt, đó là các bạn có thể tùy chỉnh số bài viết có
ảnh thumbnail, và điểm chú ý ở thủ thuật này là sẽ có ảnh gif minh họa cho bài
viết mới. Mới ở đây là trong phạm vi 1 ngày.

Hình ảnh minh họa:

DEMO

- Theo yêu cầu thì tiện ích có 2 phần, 1 phần hiển thị bài viết có ảnh
thumbnail, phần 2 là các biết viết dạng list. Như đã nói ở trên, các bài viết
xuất bản trong ngày sẽ có ảnh gif chú thích là bài viết mới. Nếu số bài viết
hiển thị dạng thumbnail là 1 thì bạn cần phải có ít nhất 2 bài viết được xuất
bản trong ngày thì ảnh gif minh họa mới hiển thị.

- Biến list1 để
tùy chỉnh số bài viết dạng thumbnail, và còn lại sẽ là dạng list.


* Sau đây là các bước thực hiện :


1. Vào bố
cục


2. Vào trang
phần tử


3. Tạo widget HTML/javascript ở
nơi bạn muốn hiển thị và dán code của thủ thuật vào:

<style type="text/css"><br />.wbox {background-color:#ffffff;width:auto;height:auto;}<br />.wbox.Cat {width:500px;height:auto;margin-bottom:5px;}<br /><br />.wbox .tl {<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;<br /> padding-left:3px;<br />}<br />.wbox .tr {<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;<br /> padding-right:3px;<br />}<br />.wbox .tc {<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;<br /> height:23px;<br /> color:#246296;<br /> font-size:12px;<br /> text-transform:uppercase;<br /> font-weight:bold;<br /> padding-top:5px;<br /> padding-left:7px;<br />}<br />.wbox .tc a {text-decoration:none;color:#246296;}<br />.wbox .ml {<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;<br /> padding-left:3px;<br />}<br />.wbox .mr<br />{<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;<br /> padding-right:3px;<br /><br />}<br />.wbox .mc {background-color:#FFFFFF;}<br />.wbox .bl<br />{<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;<br /> padding-left:3px;<br /> height:5px;<br />}<br />.wbox .br<br />{<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;<br /> height:5px;<br /> padding-right:3px;<br />}<br />.wbox .bc<br />{<br /> background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;<br /> height:5px;<br /> font-size:0;<br /> line-height:5px;<br />}<br />.Tin_lienquan ul li {list-style:none;}<br />.Title_article {<br /> color:#246296;<br /> font-size:12px;<br /> font-weight:bold;<br /> padding-top:10px;<br /> padding-bottom:10px;<br /> padding-left:5px;<br />}<br />.Title_article {text-decoration:none;color:#246296;}<br />.Title_article a {text-decoration:none;color:#303030;}<br />.Title_article a:hover {color:#990000; text-decoration:none;}<br />.imgModule {padding-left:5px;}<br />.imgModule img {width:120px; margin-right:5px;}<br />.imgModule a {text-decoration:none;}<br /><br />.Tin_lienquan {<br /> color:#797979;<br /> font-size:11px;<br /> padding-top:15px;<br /> font-family:Tahoma;<br /> padding-left:5px;<br />}<br />.Tin_lienquan a {text-decoration:none; color:#004784;}<br />.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}<br /></style><br /><br /> <script type="text/javascript"><br /> home_page = "http://www.fandung.com/";<br /> label = "Thu%20Thuat%20Blog";<br /> numposts = 6;<br /> list1 = 1;<br /> sumPosts = 268;<br /> mode = "label";<br /> </script><br /><br /><div class="wbox Cat"><br /><!-- Header widget --><br /><div class="tl"><div class="tr"><div class="tc"><a href="http://www.fandung.com/search/label/Thu%20Thuat%20Blog">Blog Tips</a></div></div></div><br /><!-- END Header widget --><br /><br /> <div class="ml"><br /> <div class="mr"><br /> <div class="mc"><br /><!-- noi dung cua tien ich --><br /> <script type="text/javascript" src="http://data.fandung.com/blog/demo/QMT-recent-posts/rc-post-qmt.js"></script><br /><!-- END noi dung cua tien ich --><br /> </div><br /> </div><br /> </div><br /><br /><!-- Footer widget --><br /> <div class="bl"><div class="br"><div class="bc"></div></div></div><br /><!-- END footer widget --><br /></div><br /><br />




- biến mode để
tùy chỉnh dạng hiển thị theo nhãn hoặc cho cả blog, nếu mode=”blog”;thì
sẽ là cho cả blog, mode=”label”; thì
sẽ là cho 1 nhãn nào đó.


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

<style type="text/css"><br />.wbox {background-color:#ffffff;width:auto;height:auto;}<br />.wbox.Cat {width:300px;height:auto;margin-bottom:5px;}<br /><br />.wbox .tl {<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;<br />padding-left:3px;<br />}<br />.wbox .tr {<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;<br />padding-right:3px;<br />}<br />.wbox .tc {<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;<br />height:23px;<br />color:#246296;<br />font-size:12px;<br />text-transform:uppercase;<br />font-weight:bold;<br />padding-top:5px;<br />padding-left:7px;<br />}<br />.wbox .tc a {text-decoration:none;color:#246296;}<br />.wbox .ml {<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;<br />padding-left:3px;<br />}<br />.wbox .mr<br />{<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;<br />padding-right:3px;<br /><br />}<br />.wbox .mc {background-color:#FFFFFF;}<br />.wbox .bl<br />{<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;<br />padding-left:3px;<br />height:5px;<br />}<br />.wbox .br<br />{<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;<br />height:5px;<br />padding-right:3px;<br />}<br />.wbox .bc<br />{<br />background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;<br />height:5px;<br />font-size:0;<br />line-height:5px;<br />}<br />.Tin_lienquan ul li {list-style:none;}<br />.Title_article {<br />color:#246296;<br />font-size:12px;<br />font-weight:bold;<br />padding-top:10px;<br />padding-bottom:10px;<br />padding-left:5px;<br />}<br />.Title_article {text-decoration:none;color:#246296;}<br />.Title_article a {text-decoration:none;color:#303030;}<br />.Title_article a:hover {color:#990000; text-decoration:none;}<br />.imgModule {padding-left:5px;}<br />.imgModule img {width:120px; margin-right:5px;}<br />.imgModule a {text-decoration:none;}<br /><br />.Tin_lienquan {<br />color:#797979;<br />font-size:11px;<br />padding-top:15px;<br />font-family:Tahoma;<br />padding-left:5px;<br />}<br />.Tin_lienquan a {text-decoration:none; color:#004784;}<br />.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}<br /></style><br /><br /><script type="text/javascript"><br />home_page = "http://phimonline-free.blogspot.com/";<br />label = "việt nam";<br />numposts = 12;<br />list1 = 1;<br />sumPosts =50;<br />mode = "label";<br /></script><br /><br /><div class="wbox Cat"><br /><!-- Header widget --><br /><div class="tl"><div class="tr"><div class="tc"><a href="http://phimonline-free.blogspot.com/search/label/Thu%20Thuat%20Blog">Tin mới</a></div></div></div><br /><!-- END Header widget --><br /><br /><div class="ml"><br /><div class="mr"><br /><div class="mc"><br /><br /><!-- noi dung cua tien ich --><br /><script type="text/javascript" src="http://khoikios.googlecode.com/files/rc-post-qmt.js"></script><br /><!-- END noi dung cua tien ich --><br /></div><br /></div><br /></div><br /><br /><!-- Footer widget --><br /><div class="bl"><div class="br"><div class="bc"></div></div></div><br /><!-- END footer widget --><br /></div><br /><br />