Thủ thuật tạo bài viết mới nhất giống VnExpress cho Blogger

Bạn có hay vào Vnexpress đọc tin tức? Bạn mê mẩn với thiết kế website cực tuyệt vời và khoa học của nó? Và bạn muốn sở hữu một trang tin tức như vậy? Thủ thuật blogger sau đây sẽ hướng dẫn bạn cách tạo 1 khung Recent Posts như Vnexpress cho website bạn.

1. Vào Mẫu > 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 : Blogger1     
rdlabels[0] = &quot;\&lt;script\&gt;label = &#39;Blogger1&#39;\;\&lt;/script\&gt;&quot;;     
//Nhãn thứ 2 : Blogger2   
rdlabels[1] = &quot;\&lt;script\&gt;label = &#39;Blogger2&#39;\;\&lt;/script\&gt;&quot;;     
//Nhãn thứ 3 : Blogger3    
rdlabels[2] = &quot;\&lt;script\&gt;label = &#39;Blogger3&#39;\;\&lt;/script\&gt;&quot;;     
//Nhãn thứ 4 : Blogger4  
rdlabels[3] = &quot;\&lt;script\&gt;label = &#39;Blogger4&#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.thietkeblogger.net/search/label/Blogger1?max-results=10">Blogger1</a></div>     
<div class="folder-activeright fl"></div>     
<div class="subfolder fl">     
<a class="link-subfolder" href="http://www.thietkeblogger.net/search/label/Blogger1?max-results=10">Blogger1</a> | <a class="link-subfolder" href="http://www.thietkeblogger.net/search/label/Blogger2?max-results=10">Blogger2</a> | <a class="link-subfolder" href="http://www.thietkeblogger.net/search/label/Blogger3?max-results=10">Blogger3</a> | <a class="link-subfolder" href="http://www.thietkeblogger.net/search/label/Blogger4?max-results=10">Blogger4</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://www.thietkeblogger.net/";     
</script>     
<script
src="http://thietkewebplus.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 :