Hiển thị bài viết dạng list ở các trang Home, Label, Archive

[FD's BlOg] - Mình đã từng giới thiệu với các bạn thủ thuật chỉ hiển thị tiêu đề bài viết ở các trang Home, Label, Archive (xem thêm ở đây), hôm nay mình sẽ giới thiệu 1 cách hiển thị cũng tương tự, nhưng có hơi phức tạp hơn 1 chút. Cũng với dạng hiển thị dạng list, nhưng ở thủ thuật này sẽ bổ xung thêm phần ngày đăng, tác giả, nhãn...

Hình ảnh minh họa :

Đây là ảnh gốc của yêu cầu :

Đây là ảnh ở blog test mà mình đã thực hiện :

Chú ý : đây là thủ thuật tương đối "rối rắm", nếu bạn nào chưa rành thì hãy save template lại trước khi thực hiện, hoặc có thể test trước với blog mới nào đó. Nếu ai đã rành (tức là có thể tự gỡ bỏ nếu ko thích) thì có thể thử ngay trên blog của mình. 

☼ Các bước để thực hiện thủ thuật:
A. Thiết lập lại ngày giờ hiển thị của bài đăng
B. Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive.
C. Thực hiện thủ thuật hiển thị bài viết dạng list.

I. Bước A : Thiết lập lại ngày giờ hiển thị của bài đăng
Để hiển thị được ngày giờ như trong hình demo, các bạn thực hiện các bước sau:
- Vào Cài đặt » Định dạng » tới mục Định dạng dấy thời gian , và điều chỉnh lại như hình minh họa bên dưới :


II. Bước A : Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive
Phần bài viết bạn sẽ có 3 chỗ phải ẩn, đó là Header bài viết, nội dung bài viếtvà phần Footer của bài viết.
- Phần Header bài viết : gồm có 2 phần, đó là tiêu đề và phần date-header (ngày đăng bài viết).
- Phần nội dung : chưa nội dung bài viết.
- Phần Footer : gồm ngày đăng, nhãn, tác giả...


Để hoàn thực bước 2 này, các bạn làm theo các bước bên dưới :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display : none;}
.date-header {display : none;}
.post-title {display : none;}
</style>
</b:if>

5. Tiếp tục tìm đoạn code bên dưới :

<data:post.body/>

hoặc có thể là

<p><data:post.body/></p>

và thêm đoạn code được đánh dấu highlight vào như bên dưới :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

- bước 4 là ẩn phần header & footer của bài viết, bước 5 là ẩn nội dung bài viết.
6. Save template.

III. Bước C : Thủ thuật chính
1. Trước tiên ta sẽ tạo header cho phần list này (xem hình minh họa)

- Các bước thực hiện :
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code bên dưới (hoặc tương tự):

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

e. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='background:#eee; width:100%'>
<tr>
<td style='width:70%; text-align:center; font-weight:bold;'>Tiêu đề</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Tác Giả</td>
<td style='width:15%; text-align:center; font-weight:bold;'>Ngày đăng</td>
</tr>
</table>
</b:if>

<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

- Khoan Save template, tiếp tục thực hiện sang bước 2.

2. Tạo & trang trí cho list bài viết:
a. Tìm đến đoạn code bên dưới:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

b. Thêm đoạn code được đánh dấu highlight như bên dưới:

<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType != "item"'>
<table style='border-bottom:1px solid #aaa; width:100%'>
<tr>

<td style='width:70%; font-weight:bold;'>
[<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop> </b:if>
</span>] <a expr:href='data:post.url'><data:post.title/></a>

</td>

<td style='width:15%; font-weight:bold; text-align:center;'>

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</td>

<td style='width:15%; font-weight:bold; text-align:center;'>

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:post.timestamp/>
</b:if>
</span>

</td>

</tr>
</table>
</b:if>

<div class='post-body entry-content'>

- Thay đổi các code màu đỏ ở trên để có độ rộng thích hợp. Lưu ý, các code màu đỏ ở bước 1 và 2 phải bằng nhau để việc hiển thị được hợp lý.
- Save template để hoàn tất bước C này.

Read more »

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.


Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-headertạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

Read more »

Pro TabNews mang phong cách của VnExpress

 Bài viết này mình lại giới thiệu cho các bạn 1 TabNews hiển thị các bài viết mới nhất theo từng nhãn theo phong cách của VnExpress. Điểm nổi bật của thủ thuật này là việc hiển thị random các bài viết theo nhãn mỗi khi reload trang hoặc chuyển trang, thêm vào đó thành Header của TabNews sẽ thay đổi tương ứng với Nhãn được hiển thị bài viết, như vậy sẽ dễ dàng hơn cho người đọc nhận biết được nhãn (chuyện mục)mình đang xem.

Xem demo: LIVE DEMO

Ở TabNews sẽ gồm có các nhãn khác nhau có chung điểm nào đó, ví dụ như ta có các nhãn như :"Ảnh vui, Xe độ, Nghe nhạc,..." có chung 1 điểm là Thư Giãn chẳng hạn. Ngòai ra TabNews còn có phần SumPost là title cho các link liên kết

Hình ảnh minh họa:

- Ngoài ra ở phần Header của TabNews sẽ thay đổi theo đúng với nhãn được hiển thị bài viết (xem hình minh họa bên dưới)

Đối với nhãn "Chuyện Lạ"

Đối với nhãn "Thư Giãn"

☼ Các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. 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('http://vnexpress.net/Images/Background/bg_vne.gif') 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('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') 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('http://vnexpress.net/Images/Background/black-square.gif'); 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('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

&lt;script type='text/javascript'&gt;
rdlabels = new Array(3);

//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\&lt;script\&gt;label = 'Chuyen%20La'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\&lt;script\&gt;label = 'Xe'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\&lt;script\&gt;label = 'Film'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\&lt;script\&gt;label = 'Relax'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt;\&lt;/div\&gt;";

index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

- Thay đổi tên nhãn và link liên kết của nhãn lại cho phù hợp với blog của bạn.

4. Save template.
5. Tạo widget HTML/Javascript rồi dán code bên dưới vào :

<div class="folder">

<div class="folder-title">

<script type='text/javascript'>
document.write(rdlabels[index]);
</script>

<div class="folder-titleright fr"></div>

</div>


<div class="folder-content" id="tdHomeFolder2">

<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://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

☼ Cập nhật yêu cầu của bạn 9xhot:

- Thay vì Header của TabNews sẽ thay đổi mỗi khi Load trang theo đúng như bài viết hiển thị thì ở yêu cầu này phần Header sẽ ko thay đổi, và thay vào đó ta sẽ thêm 1 phần gọi là chuyên mục chính (parentMenu), với các Nhãn được hiển thị sẽ là các chuyên mục phụ (subMenu). Với yêu cầu này thì thủ thuật ở trên sẽ trở nên đơn giản hơn 1 chút.

- Xem demo : LIVE DEMO

Hình minh họa:

☼ Các bước thực hiện cũng tương tự như trên:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. 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('http://vnexpress.net/Images/Background/bg_vne.gif') 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('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') 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('http://vnexpress.net/Images/Background/black-square.gif'); 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('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

&lt;script type='text/javascript'&gt;
rdlabels = new Array(3);

//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\&lt;script\&gt;label = 'Chuyen%20La'\;\&lt;/script\&gt;";

//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\&lt;script\&gt;label = 'Xe'\;\&lt;/script\&gt;";

//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\&lt;script\&gt;label = 'Film'\;\&lt;/script\&gt;";

//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\&lt;script\&gt;label = 'Relax'\;\&lt;/script\&gt;";

index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

4. Save template
5. Tạo widget HTML/Javascript rồi dán code bên dưới vào :

<div class="folder">

<div class="folder-title">

<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="#">Giải Trí</a></div>

<div class="folder-activeright fl"></div>

<div class="subfolder fl">
<a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Relax?max-results=10">Thư Giãn</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10">Chuyện Lạ</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Film?max-results=10">Điện Ảnh</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Xe?max-results=10">Xe Độ</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://fandung.com/";

</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

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

Read more »

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

Với tiêu chí tổng hợp thật nhiều style khác nhau cho tiện ích "Recent posts" hôm nay mình sẽ lại giới thiệu cho các bạn 1 style khác theo phong cách giống trang news.zing.vn . Style này giống với style giống trang vnExpress mà mình đã từng giới thiệu. Trong bài viết này mình có convert lại độ rộng để có thể hiển thị được trên blogspot.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

- Ở style này có thêm 1 điểm khác với các style cũ, là mình có chèn phần "Mô tả bài viết (summaryPost)" vào các link ở cột topo_news dưới dạng title. Các bạn có thể xem hình bên dưới :

☼ Các bước thực hiện thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước thẻ đóng </head> (hoặc có thể chèn thẳng vào widget HTML/javascript chung với code chính của thủ thuật)

<style type="text/css">
*
{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news
{
width: 525px;
margin: 5px;
}

#main_content
{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news
{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news
{
width: 234px;
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img
{
border: 1px solid #CCC;
padding: 1px;
width:230px;
height:165px;
}
#main_content .top1_news .top1_news_title
{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a
{
font-size: 16px;
color: #002392;
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover
{
text-decoration: underline;
}
#main_content .top1_news p
{
text-align: justify;
}
#main_content .top1_news p a
{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img
{
vertical-align: bottom;
}
#main_content .top2_news
{
width: 95px;
float: left;
margin-left: 8px;
margin-top: 14px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image
{
background: url(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}


#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center

center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title
{
background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a
{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>

- Code màu cam : là độ rộng của ảnh lớn nhất
- Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn
- Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột : top1_news,top2_news, topo_news)
- Xem hình minh họa bên dưới :

- Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình(kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng 525px;)

4. Save template.

5. Tạo widget HTML/javascript và dán code bên dưới vào :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.gif";

showRandomImg = true;

aBold = false;
summaryPost = 147; // Phần summary post sẽ hiển thị
numposts = 12; // số bài viết sẽ hiển thị
topoTitle = "Bài viết khác";
label = "Love"; // Nhãn cần hiển thị bài viết (nếu muốn hiển thị bài viết của cả blog thì không cần quan tâm dòng này)
home_page = "http://fandung.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

- 2 dòng code màu đỏ bạn có thể thay đổi tùy thích (xem hình minh họa bên dưới)

☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới :

<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

thành code bên dưới:

<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-post.js" type="text/javascript"></script>

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

Read more »

menu giog trang zing

Có 1 số bạn yêu cầu muốn mình share cái menu hiện tại mình đang dùng (mang phong cách của trang Zing), nhưng bây giờ mình mới chia sẻ được. Nói thật, nếu chia sẻ thì mình chỉ cần đưa ngay đoạn code cho các bạn là xong, chứ không phải đợi tới bây giờ mình mới chia sẻ, nhưng có 1 điều là khi chia sẻ rồi thì hướng dẫn các bạn sao đây, thực sự menu mình đang dùng là lấy source gần như từ của trang news.zing.vn, vì thế mà nó hơi rắc rối, ngay chính mình khi lấy về dùng cũng phải nhọc nhằn chỉnh sửa lại để dùng. 

Để đơn giản cho các bạn sử dụng cũng như cho mình viết bài hướng dẫn, nên mình đã quyết định ngồi code lại cái menu này. Vẫn lấy phong cách của Zing, nhưng code thì mình viết lại hoàn toàn. 

Ưu điểm của Mega Dropdown này là nó chỉ dùng CSS, nên khá nhẹ, và 1 cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. Bởi thế nó mới được gọi là Mega Menu. Và nhược điểm của menu này là không hiển thị được submenu trên IE6. Thật ra nhược điểm này không phải là nhược điểm của thủ thuật mà là của chính blogger, hình như blogger nó không hỗ trợ file htc. Ngay cả host demo của mình cũng không chạy được, nhưng mình test offline trên máy tính thì rất ok.

Vì thế nếu bạn nào muốn dùng cái menu này thì sẽ phải chấp nhận việc nó không sổ submenu trên IE6. Còn từ IE7 trở nên thì vẫn chạy bình thường. 

Các bạn có thể xem DEMO ở đây. 

Hình ảnh minh họa

A. Sau đây là code của thủ thuật:
- Có 2 cách để thêm vào blog, 1 là các bạn chèn tất cả code của nó vào 1 widgetHTML/javascript, 2 là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn có thể add vào template, ngay trước dòng code </head>
- và đây là code của thủ thuật:

Code CSS:

<style type="text/css">
#fdmega-menu ul {list-style: none;}

ul#topnav {
float: left;
width: 650px;
position: relative;
height: 39px;
background: #0082ff;
}

ul#topnav li {
float: left;
height: 39px;
padding: 0px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}

ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}

ul#topnav li:hover {
background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left;
}

ul#topnav li.mg-home {
background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important;
width:45px;
}

ul#topnav li.mg-home a {height:19px;}

ul#topnav li div.sub {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}

ul#topnav li div.sub div.cont {float: left;padding:5px;}
ul#topnav li div.sub div.cont h3 {}
ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;}
ul#topnav li div.sub div.cont a:hover{color:#fff;}

ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}

ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}

</style>

- Lưu ý: các file hình ảnh có trong code CSS các bạn nên download về và up lên host lưu trữ ảnh nào đó để sử dụng, tránh trường hợp host của mình gặp sự cố.

Code HTML:

<div id="fdmega-menu">
<ul id="topnav">
<li class="mg-home"><a href="#"></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
<li><a href="#">Menu 3</a>
<div class="sub ms3">
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
</div>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<div class="sub ms5">
<b>James Gallagher</b><br/>
<span style="font-size:90%"><i>Health reporter, BBC News</i></span>
<p>Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p>
<p>The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p>
<p>They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p>
<span style="font-size:90%"><i>Trich BBC</i></span>
</div>
</li>
</ul>
</div>

B. Sau đây là 1 vài hướng dẫn chỉnh sửa code HTML cũng như CSS
- Sau khi chèn code vào, các bạn sẽ gặp trường hợp như thế này:

- Việc bị lệch này là do vị trí của menu chính và menu phụ không khớp với nhau. Không khớp với nhau có nhiều lý do, ví dụ bạn thay đổi tên menu, độ rộng của menu chính sẽ thay đổi, dẫn tới menu phụ bị lệch.
- Để chỉnh vị trí của menu phụ với menu chính các bạn xem code CSS bên dưới:

...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...

- ở code trên ta có 5 class là ms1, ms2,... ms5 tương ứng với các chính menu1, menu2,... menu5 (như trong demo)
- Các class này để tùy chỉnh vị trí, độ rộng , màu nền ... của các vùng hiển thị của submenu.
- Lệnh left:118px; (của class ms2) chính là lệnh để tùy chỉnh vị trí của submenu so với biên ngang bên trái của menu chính. Ví dụ như hình bên dưới :

- Sau khi điều chỉnh vị trí các submenu xong, ta sẽ đi vào phần tùy chỉnh nội dung bên trong của các submenu. Ở đây ta sẽ lấy ví dụ submenu 2.
- Đây là code HTML của nó :

...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ta thấy thẻ <div class="sub ms2"> chính là khu vực hiển thị của submenu, trong thẻ div này sẽ có tiếp 3 thẻ <div class="cont cs21"> , 3 thẻ div này chính là 3 cột nhỏ trong submenu2. Như hình bên dưới:

- ta thấy trong code CSS có đoạn như thế này :

...
...
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
...
...

- ul#topnav li div.sub div.cs21 chính là class để tùy chỉnh độ rộng của các cột trong submenu2. Ở trên mình chỉ thêm class cho 2 submenu2 và submenu3, nếu muốn các bạn có thể thêm tương tự như :

...
...
ul#topnav li div.sub div.cs11 {width:135px;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
ul#topnav li div.sub div.cs41 {width:80px;}
ul#topnav li div.sub div.cs51 {width:190px;}
...
...

- Ở trong demo, mình cho các cột trong submenu2 và submenu3 bằng nhau, nêu chỉ có class là cs21 và cs31, nếu muốn các cột có độ rộng khác nhau thì các bạn có thể tùy chỉnh lại code code. Ví dụ như mình sẽ tùy chỉnh lại của submenu2, mỗi cột có độ rộng khác nhau, như bên dưới:

...
...
ul#topnav li div.sub div.cs21 {width:135px;}
ul#topnav li div.sub div.cs22 {width:90px;}
ul#topnav li div.sub div.cs23 {width:120px;}
...
...

- tức là từ việc chỉ sử dụng chung 1 class cs21 cho tất cả các cột thì mình sẽ tùy chỉnh lại, mỗi cột có 1 class riêng (cs21, cs22, cs23). Và code HTML của nó sẽ là như thế này :

...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs22">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs23">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ngoài ra nếu các bạn muốn thêm hình nền riêng cho mỗi sub thì cũng có thể thêm vào, ví dụ như trong demo ta có hình nền của submenu5, và bên dưới làcode CSS mà các bạn có thể tùy chỉnh để thêm hình nền vào:

...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...

- các bạn thêm hình nền tương tự như class ms5 (của submenu5).
- Ở trên các class ms1 và ms4 mình để trống do các menu4 và menu1 trong demo không có submenu, khi có submenu thì các bạn thêm vào giá trị độ rộng và vị trí cách biên ngang cho các submenu này.

Hy vọng các bạn có thể thực hiện nó với các hướng dẫn cơ bản trên. 
Menu mega dropdown này trước khi còn test offline, mình cảm thấy rất tâm đắc với nó, nhưng khi add vô rồi thì lại gặp sự cố là blogger không support file htc, nên cũng hơi nản. Thậm chí mình còn có ý định sẽ không post bài này. Nhưng rồi nghĩ lại cũng sẽ có 1 số người cần nó, và rồi cũng cố ngồi trước máy tính để soạn bài hướng dẫn này.

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

Read more »