Trình diễn bài mới với tiện ích VNE Recent Posts

Style 1 : Recent Post theo Label ở Homepage

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 {
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.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 = "Hardware"; home_page = "http://www.itechplus.info/";
</script>
<script src="http://quangvinh936.googlecode.com/files/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 = "Hardware"; : nhãn/ trương mục ( Label ) sẽ được 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 :

* Cách tính chiều rộng :

• bottom-news = 4x(botwidth + 2px + 4px) + 4x5px = 444px
• bottom-news-item = botwidth + 2px + 4px = 106px

* 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://quangvinh936.googlecode.com/files/vne-recent-adv.txt

Thành

http://quangvinh936.googlecode.com/files/vne-recent-adv-all-posts.txt

Style 2 : Recent Post mang phong cách VNExpress

Hình minh họa

Thực hiện :

1. Vào Thiết kế > Chình sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type='text/css'>
.fl {float:left;}
.fr {float:right;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:500px;}
.folder-bottom {background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_vne.gif&#39;) repeat-x 0px -73px;}
.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;) repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_repeat.gif&#39;) repeat-x 0px -23px;}
.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:160px;}
.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}
.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}
.folder-content li {
padding-left:6px;
background-image:url(&#39;http://vnexpress.net/Images/Background/black-square.gif&#39;); background-repeat:no-repeat;
background-position: 0 7px;
}
.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;) no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url(&#39;http://vnexpress.net/Images/Background/bg_corner.gif&#39;) no-repeat -5px -23px;}
.Lead1 { font-family: &#39;Arial&#39;; font-size: 11px; color: #919090; font-weight: bold }
</style>
&lt;script type=&#39;text/javascript&#39;&gt;
rdlabels = new Array(3);
//Nhãn thứ 1 : Kiến thức căn bản
rdlabels[0] = &quot;\&lt;script\&gt;label = &#39;OSystemK&#39;\;\&lt;/script\&gt;&quot;;
//Nhãn thứ 2 : Thủ thuật
rdlabels[1] = &quot;\&lt;script\&gt;label = &#39;OSystemT&#39;\;\&lt;/script\&gt;&quot;;
//Nhãn thứ 3 : Phần mềm
rdlabels[2] = &quot;\&lt;script\&gt;label = &#39;Download&#39;\;\&lt;/script\&gt;&quot;;
//Nhãn thứ 4 : Phần mềm bản quyền
rdlabels[3] = &quot;\&lt;script\&gt;label = &#39;License&#39;\;\&lt;/script\&gt;&quot;;
index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

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

<div class="folder">
<div class="folder-title">
<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://www.itechplus.info/search/label/OSystem?max-results=10">Windows</a></div>
<div class="folder-activeright fl"></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemK?max-results=10">Kiến thức</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemT?max-results=10">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?max-results=10">Phần mềm</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/License?max-results=10">Free License</a>
</div>
<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script type="text/javascript">
document.write(rdlabels[index]);
</script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://cuongctblog.blogspot.com";
</script>
<script src="http://quangvinh936.googlecode.com/files/VnE-recent.txt" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

Trong 2 đoạn code trên :

• width:500px; : chiều rộng của cả widget
• width:478px; : chiều rộng phần nội dung widget
• width:298px; : chiều rộng phần nội dung bên trái
• width:160px; : chiều rộng phần nội dung bên phải
• height:100px; : chiều rộng ảnh bài viết mới nhất
• width:53px; height:53px; : chiều rộng & chiều cao ảnh bài viết đầu tiên bên phải
• rdlabels[x] : tên của mảng tương ứng với Label. Nếu bạn không gán cụ thể, nội dung của tiện ích sẽ hiển thị một cách ngẫu nhiên theo nhãn.
• summaryPost = 247; : số ký tự đoạn mô tả bài viết chính
• sumPost = 147; : số ký tự tiêu đề bài viết
• numposts = 6; : tổng số bài viết được hiển thị trên mỗi widget

Để hiểu rõ hơn bố cục của Widget, các bạn có thể xem hình dưới :

Style 3 : Recent Post mang phong cách Quantrimang

Minh họa cho list1=1

Thực hiện :
1. Tạo 1 widget HTML\JavaScript và dán code bên dưới vào :

<style type="text/css">
.wbox {background-color:#ffffff;width:auto;height:auto;}
.wbox.Cat {width:500px;height:auto;margin-bottom:5px;}
.wbox .tl {
    background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;
    padding-left:3px;
}
.wbox .tr {
    background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;
    padding-right:3px;
}
.wbox .tc {
    background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;
    height:23px;
    color:#246296;
    font-size:12px;
    text-transform:uppercase;
    font-weight:bold;
    padding-top:5px;
    padding-left:7px;
}
.wbox .tc a {text-decoration:none;color:#246296;}
.wbox .ml {
    background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;
    padding-left:3px;
}
.wbox .mr
{
    background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;
    padding-right:3px;
}
.wbox .mc {background-color:#FFFFFF;}
.wbox .bl
{
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;
    padding-left:3px;
    height:5px;
}
.wbox .br
{
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;
    height:5px;
    padding-right:3px;
}
.wbox .bc
{
    background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;
    height:5px;
    font-size:0;
    line-height:5px;
}
.Tin_lienquan ul,.Tin_lienquan li {list-style:none}
.Title_article {
    color:#246296;
    font-size:12px;
    font-weight:bold;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:5px;
}
.Title_article {text-decoration:none;color:#246296;}
.Title_article a {text-decoration:none;color:#303030;}
.Title_article a:hover {color:#990000;  text-decoration:none;}
.imgModule {padding-left:5px;}
.imgModule img {width:120px; margin-right:5px;}
.imgModule a {text-decoration:none;}
.Tin_lienquan {
    color:#797979;
    font-size:11px;
    padding-top:15px;
    font-family:Tahoma;
    padding-left:5px;
}
.Tin_lienquan a {text-decoration:none;  color:#004784;}
.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}
</style>
      <script type="text/javascript">
                  home_page = "http://itechplus.info/";
                  label = "Office";
                  numposts = 6;
              list1 = 1;
                  sumPosts = 268;
              mode = "label";
      </script>
<div class="wbox Cat">
<!-- Header widget -->
<div class="tl"><div class="tr"><div class="tc"><a href="http://itechplus.info/search/label/Office">Tin học văn phòng</a></div></div></div>
<!-- END Header widget -->
    <div class="ml">
        <div class="mr">
            <div class="mc">
<!-- noi dung cua tien ich -->
    <script type="text/javascript" src="http://quangvinh936.googlecode.com/files/Recent%20Post.txt"></script>
<!-- END noi dung cua tien ich -->
            </div>
        </div>
    </div>
<!-- Footer widget -->
    <div class="bl"><div class="br"><div class="bc"></div></div></div>
<!-- END footer widget -->
</div>

Thay đoạn code in đậm cho phù hợp với Blog bạn, cần lưu ý :
- list1 : số bài viết có hiện ảnh thumbnail kèm trích dẫn
- mode :

• mode=”label” : áp dụng cho Label
• mode=”blog” : áp dụng cho cả Blog

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