[FDs BlOg] - 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…

[FD's BlOg] - Trước kia mình có hướng dẫn các bạn 1 thủ thuật trang trí khung comment với việc sử dụng CSS là chủ yếu, và thủ thuật có vẻ hơi phức tạp, và phục thuộc nhiều vào code của template. Hôm nay mình sẽ hướng dẫn 1 cách đơn giản hơn nhiều, đó là chèn thêm 1 thẻ div lên trên phần nội dung bài viết. Đây là thủ thuật mà mình đang dùng để trang trí cho nội dung các bài comment.

Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.

Ví dụ hình ảnh minh họa ở blog của mình :

Thủ thuật chính ở đây là ghép nối các hình nền của các thẻ div để tạo nên 1 hình nền hoàn chỉnh. Ví dụ như ở blog của mình, phần thẻ div chèn thêm lên trên phần nội dung comment (comment-body) sẽ có hình nền ko hoàn chỉnh, và ở phần nội dung bài viết thì dùng hình nền và các đường border, nhưng sẽ ko có đường border-top, sự thiếu hụt này sẽ được thẻ div mà ta thêm vào khắc phục.

Xem hình minh họa:

Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.

☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.

- Hình minh họa:

Khi chưa thực hiện:

Sau khu thực hiện :

Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.

- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)

.comment-body {
margin:0;
padding:5px;
}

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

.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :


- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như bên dưới:
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 như bên dưới :

<dd class='comment-body'>

e. thêm vào trước nó đoạn code bên dưới:

<div style='height:8px; background:url(link ảnh nền) no-repeat;'/>

- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.

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

Read more…

[FD's BlOg] - 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…

[FD BlOg] - Chúng ta đã từng làm quen với tiện ích Recent Posts with icon của Anhvo (vietwebguide.com), hôm nay mình sẽ giới thiệu lại cho các bạn thủ thuật này, nhưng không phải áp dụng để hiển thị các comments mới của blog mà là các comments mới nhất của 1 bài viết cụ thể nào đó.

Thủ thuật này thích hợp cho việc theo dõi comment của 1 bài viết đặc biệt nào đó trong blog, ví dụ như blog của mình, khu vực "Yêu Cầu thủ thuật" thường xuyên có comment mới, vì thế để dễ dàng theo dõi, mình có thể tạo 1 widget recent comments riêng cho bài viết này.

Đây là hình minh họa mình đã thực hiện cho vài viết "Yêu cầu thủ thuật" :
Như đã nói ở trên, thủ thuật này mình sẽ dùng lại tiện ích "Recent comments with icon" của Anhvo , tuy nhiên mình có vài chỉnh sửa nhỏ.

☼ Để thực hiện thủ thuật này, trước hết bạn phải biết ID của 1 bài viết, để làm điều này, bạn thực hiện các bước như bên dưới :

1. Vào chỉnh sửa bài đăng
2. Nhấp chọn chỉnh sửa bài viết (bài viết mà bạn muốn hiển thị comment)

3. Và bạn có thể thấy ngay ID của bài viết ở ngay trên thanh Address

Trước khi đi vào thủ thuật mình cũng giới thiệu sơ cho các bạn về link RSS comment từng bài viết. Như ta đã biết, link RSS của comment cả blog sẽ có dạng như bên dưới :

http://fandung.blogspot.com/feeds/comments/default

và link RSS comment của 1 bài viết cụ thể sẽ là:

http://fandung.blogspot.com/feeds/1262266524725959138/comments/default

- Code màu đỏ chính là ID của viết (postID)
và đây là ảnh minh họa 1 trang RSS comment của 1 bài viết:

☼ Và cuối cùng là code của thủ thuật :
- Bạn chỉ việc tạo 1 widget HTML/javascript và dán code bên dưới vào là xong :

<script type="text/javascript">
var cm_mode = "icon";
var cm_num = 5; // số comment sẽ hiển thị
var cm_desc = 50; // số kí tự hiển thị của nội comment
var postID = "1262266524725959138"; // posID của bài viết
var homepage = "http://fandung.blogspot.com"; // địa chỉ URL blog của bạn

var cm_icon = new Array();
cm_icon['blogger'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/blogger.gif";
cm_icon['openid'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/openid.gif";
cm_icon['livej'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/lj.gif";
cm_icon['wp'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/wp.gif";
cm_icon['typekey'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/typkey.gif";
cm_icon['aim'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/aim.gif";
cm_icon['anon'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/anon.gif";
</script>
<script src="http://data.fandung.com/js/recentcomment-4post.js" type="text/javascript"></script>

- Thay đổi các code màu xanh lại cho thích hợp.

☼ Nếu muốn hiển thị các comment mới nhất cho cả blog thì chỉ cần thay code màu đỏ (link file recentcomment-4post.js) thành link bên dưới :

http://data.fandung.com/js/recentcomment-4allpost.js

Mở rộng từ tiện ích "Recent comments with icon" của Anhvo

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

Read more…

[FD's BlOg] - Mình đã từng giới thiệu với các bạn 2 cách khác nhau để chèn code vào bài viết (cách mã hóa (xem thêm) và cách dùng Javascript (xem thêm)), và bài viết này mình sẽ hướng dẫn thêm 1 cách khác để chèn code vào bài viết, đó là dùng tiện ích từ Greasemonkey. Với thủ thuật này ta sẽ thực hiện trực tiếp trên khung soạn thảo bài viết, và chỉ việc khối code cần post lại rồi click vào button là code được mã hóa. Thủ thuật này rất thích hợp cho các blog thủ thuật như mình.

Sau khi thực hiện, ở khung soạn thảo bài viết của trình duyệt Fire Fox trên máy tính của bạn sẽ có thêm 1 button như hình bên dưới:

Button này sẽ cho phép bạn mã hóa code ngay trong khung soạn thảo bài viết, lưu ý để chế độ soạn thảo là "Chỉnh sửa Html" để mã hóa code.
Khi bạn muốn mã hóa đoạn code nào đó, bạn chỉ việc khối chúng lại rồi click vào button "HTML ENCODE SELECTION" là được, ví dụ như hình minh họa bên dưới:

Trước khi thực hiện thủ thuật, mình xin lưu ý lại là : Muốn thực hiện thủ thuật này, bạn phải dùng trình duyệt web là Firefox. Do vậy, bạn cũng sẽ phải dùngFirefox để sọan thảo bài viết. Và 1 điều nữa là thủ thuật này chỉ hiển thị vớifirefox đã cài đặt tiện ích này.

Nếu bạn nào chưa có cài đặt Firefox thì có thể download ở đây về để cài vào máy của mình.

Bây giờ ta bắt đầu với các bước sau::
☼ Bước 1: Mở trình duyệt Firefox
☼ Bước 2 : Cài đặt Greasemonkey
- Các bạn nhấp vào link bên dưới :
https://addons.mozilla.org/en-US/firefox/addon/748
- Sau đó nhấn vào nút Add to Firefox để cài đặt Greasemonkey cho FireFox. Nếu bạn nào đã cài đặt Greasemonkey thì có thể bỏ qua bước này.(xem hình bên dưới)


- Sau khi cài đặt xong nó sẽ đòi bạn phải restart firefox, nhấn vào nút restart firefox để restart (như hình bên dưới)


Sau khi restart Firefox, một cửa sổ popup hiện lên thông báo "Đã cài đặt Greasemonkey" vào firefox , và bên dưới góc phải của Firefox sẽ có 1 biểu tượng nho nhỏ (như hình bên dưới)


☼ Bước 3 : Cài đặt thủ thuật
- Click vào link bên dưới :
http://userscripts.org/scripts/source/42696.user.js
- Sau khi click vào link của file JS trên, 1 cửa sổ Popup sẽ xuất hiện, và bạn chỉ việc click vào button "Install" để cài đặt (như hình bên dưới)



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

Read more…

Theo yêu cầu của bạn Phạm Xuân Tú (xtu08.blogspot.com)

[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ết và 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.

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

Read more…

[FD's BlOg] - Ở bài viết này mình sẽ lại giới thiệu 1 style mới cho tiện ích Recent Posts, đó là sẽ tạo thêm button "Xem thêm" bên dưới, khi click vào button này thì sẽ hiển thị thêm các bài viết khác. Với hiệu ứng hiển thị sử dụng từ jQuery. Ngoài việc hiển thị bài viết, ở thủ thuật này mình cũng giới thiệu khung trang trí mẫu cho tiện ích.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

Ở thủ thuật này, khung trang trí mẫu có kích thước cố định, vì thế nếu muốn hiển thị tốt trên blog của bạn, bạn phải chỉnh sửa các hình ảnh của khung mẫu lại cho phù hợp. (Việc chỉnh sửa đơn thuần là dùng các chương trình đồ họa để tăng hoặc giảm kích thước của ảnh)

Bên dưới là 3 file ảnh của khung trang trí, các bạn có thể download về để chỉnh sửa lại :

http://i342.photobucket.com/albums/o433/bkprobk/head.gif
http://i342.photobucket.com/albums/o433/bkprobk/center.jpg
http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg

☼ 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 code bên dưới vào trước thẻ đóng </head>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/jQuery-RP/ScriptHandler.js">
<script type="text/javascript" src="http://data.fandung.com/blog/demo/jQuery-RP/jquery-ui-1.js">

<style type="text/css">
*
{
margin:0;
padding:0;
}


#divContainerRight
{
width:300px;
background:#ffffff url(http://i342.photobucket.com/albums/o433/bkprobk/center.jpg) repeat-y top left;
}

#divContainerRightHead
{
width:300px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/head.gif) no-repeat top left;
}

#divContainerRightFoot
{
width:300px;
height:6px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg) no-repeat bottom left;
}


#ulrelateArtist
{
list-style-type:disc;
width:270px;
margin:0 auto;
}

#ulrelateArtist li
{

border-bottom:1px dotted #cccccc;
padding-left:5px;
padding-top:10px;
list-style-position:inside;
color:#00A79B;
}

#ulrelateArtist li a
{
color: #009f92;
font-size: 11px;
font-family:Arial;
text-decoration:none;
}

#ulrelateArtist li a:hover
{
color: #009f92;
font-weight: normal;
text-decoration:underline;
}

</style>

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

<div style="margin: 0pt auto; width: 300px; padding-top: 5px;">

<div style="padding-bottom: 5px;">
<div id="divContainerRight">
<div id="divContainerRightHead" class="clearfix">
<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; font-size:12px;">&nbsp;
</div>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

numposts = 10; // số bài viết sẽ hiển thị khi click vào button "Xem thêm"
showposts = 5; // số bài viết sẽ được mặc định hiển thị

home_page = "http://fandung.blogspot.com/";
label = "Love";

</script>

<script src="http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-post.js" type="text/javascript"></script>

<div id="ctl00_ContentPlaceHolder1_ucMp3Detail1_ucRelateArtistOnSearch1_divButtonArtistNext" style="margin:0pt auto; width: 270px; text-align: right; cursor: pointer; padding-top: 4px; ">Xem thêm <label style="color:rgb(250, 1, 134);">»</label>&nbsp;</div>
</div>
<div id="divContainerRightFoot"></div>
</div>
</div>

- Nếu muốn hiển thị bài viết theo nhãn nào đó thì các bạn đổi file RP_jQuery-post.js thành file RP_jQuery-label.js.
- Và đây là link của file RP_jQuery-label.js :

http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-label.js

- Gợi ý nhỏ khi hiển thị các bài viết từ nhãn, các bạn có thể chú thích thêm ở phần header của khung như hình bên dưới :

- Để làm điều này, các bạn tìm đến đoạn code như bên dưới (trong code của thủ thuật), và thêm vào đoạn code màu đỏ như bên dưới:

<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; ">&nbsp;Love
</div>

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

Read more…

[FD's BlOg] - Bài viết này mình sẽ hướg dẫn các bạn trang trí khung cho cách widget ở sidebar. Với 1 chút code CSS là bạn hoàn toàn có thể thực hiện được.
Ở bài này mình sẽ giới thiệu mẫu, để hiển thị tốt nhất trên blog của mình, các bạn phải chỉnh sửa 1 chút về ảnh nền của widget.

Hình ảnh minh họa :

☼ 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 CSS bên dưới vào trước dòng ]]></b:skin>

.widget_01_title
{
background: url(http://news.zing.vn/news/images/title_01.gif) no-repeat;
height: 26px;
}
.widget_01_title h5
{
color: #FFF;
padding: 4px 0 0 15px;
}
.widget_02_title h5
{
padding: 4px 0 0 15px;
}
.widget_02_title h5 a
{
color: #FFF;
}
.widget_01_content
{
width: 288px;
background: url(http://news.zing.vn/news/images/box_rep_01.gif) repeat-x left bottom;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}


.widget_02_title
{
background: url(http://news.zing.vn/news/images/title_02.gif) no-repeat #f3e5ff;
height: 26px;
}

.widget_02_content
{
width: 288px;
background: #f3e5ff;
border: 1px solid #CCC;
border-top: none;
margin-bottom: 8px;
padding:5px;
}

4. Save template

- Nên download các ảnh nền về và chỉnh sửa kích thước lại cho hợp lý với blog của bạn.

- Về độ rộng của các class chưa nội dung widget, các bạn cũng tùy chỉnh lại so với ảnh nền đã thay đổi, như trong code mẫu, ảnh nền có kích thước là 300px, thì độ rộng của class widget_02_content sẽ là 288px = 300px - 2*5px - 2*1px.

5. Và đây là code để trang trí cho widget, (tạo 1 widget HTML/javascript) và dán code bên dưới vào :

<!-- style 1 -->
<div class="widget_01_title">
<h5><a href="#"> Tiêu đề widget (style 1)</a></h5>
</div>

<div class="widget_01_content">
Nội dung widget
</div>

<!-- Style 2 -->
<div class="widget_02_title">
<h5><a href="#"> Tiêu đề widget (style 2)</a></h5>
</div>

<div class="widget_02_content">
Nội dung widget
</div>

Với bước 5 là áp dụng cho các widget HTML không có tiêu đề (tức là tiêu đề của widget dược tạo ngay trong nội dung của widget), trường hợp các widget HTML/javascript có tiêu đề, thì các bạn có thể vào code template để chỉnh sửa hoặc xóa tiêu đề của nó đi và tạo thẳng trong nội dung của widget.

☼ Hướng dẫn chỉnh sửa ngay trong code template (chú ý, cách này nên áp dụng cho các widget có tiêu đề):
- Vào bố cục
- vào chỉnh sửa code HTML
- Nhấp chọn mở rộng mẫu tiện ích
- tìm tới đoạn code của widget mà bạn muốn trang trí, ví dụ như mình có code bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- chỉnh sửa lại code trên như bên dưới :

<b:widget id='HTML1' locked='false' title='TEST' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>

<div class="widget_01_title">
<h5><data:title/></h5>
</div>

</b:if>
<div class='widget_01_content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

- Save template.

Tham khảo source từ news.zing.vn

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

Read more…

Theo yêu cầu của bạn dichthuatviet (dichthuatviet.blogspot.com)

[FD's BlOg] - Thủ thuật này mình sẽ giới thiệu cho các bạn cách trang trí cho trang chủ của blogspot. Thủ thuật sẽ hiển thị các bài mới theo nhiều nhãn khác nhau ở trang chủ, với bố trí thành các ô , với mỗi ô tương ứng với 1 nhãn khác nhau.

Tham khảo thủ thuật từ template Revolution City
Cập nhật : Fix lỗi trên IE6 (15/8/2009)

Khác với bản DEMO mà mình đã giới thiệu trước, ở thủ thuật hoàn thiện này mình chỉ dùng 1 file JS thay vì 4 file JS như đã giới thiệu trước cho các bạn xem.

Xem DEMO template gốc : Revolution City

Còn đây là bản mình đã test : LIVE DEMO

Hình ảnh minh họa:

Hình ảnh đã test

Hình ảnh từ template Revolution City

Để thực hiển thủ thuật này, các bạn sẽ thực hiện 2 bước như bên dưới :
1. Đầu tiên sẽ là bước "Ẩn bài viết ở trang chủ" :
- Có thể tham khảo thủ thuật này ở đây

2. Sau khi đã ẩn bài viết ở trang chủ, các bạn hãy tạo 1 widget HTML/Javascript ở phần Main và dán tất cả code ở bên dưới vào :

<style type="text/css">
.featured {
background: #FFFFFF;
float: left;
width: 250px;
margin: 0px 10px 20px 0px;
padding: 10px 10px 10px 10px;
border: 1px dotted #94B1DF;

}

.featured img {
border: none;
margin: 0px 10px 0px 0px;
float: left;
width:70px;
height:70px;
}

#content {
width: 600px;
margin: 0px auto 0px;
padding: 10px 0px 0px 0px;
line-height: 18px;
}

#content h3 {
background: #FFFFFF url(http://farm3.static.flickr.com/2656/3807676662_397525ba0b_o.gif);
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 0px 0px 10px 0px;
padding: 7px 0px 5px 0px;
}

.botline {
border-bottom: 1px dotted rgb(148, 177, 223);
padding: 0px 0px 10px;
margin-bottom: 10px;
clear: both;
}
</style>

<div id="content">

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

summaryPost = 70; // số kí tự tối đa cho phép hiển thị ở phần summary post
summaryTitle = 25; // số kí tự tối đa cho phép hiển thị ở tiêu đề bài viết

numposts = 3; // số bài viết đc hiển thị
home_page = "http://fandung.blogspot.com/";

label1 = "Love";
tLabel1 = "Tinh yeu";
Title1 = "Love";

label2 = "Film";
tLabel2 = "Phim truyen";
Title2 = "Film";

label3 = "Thu%20Thuat%20Blog";
tLabel3 = "Thu Thuat Blog";
Title3 = "Blog Tips";

label4 = "Xe";
tLabel4 = "Xe";
Title4 = "Xe Do";

</script>

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js" type="text/javascript"></script>
</div>

☼ Bây giờ sẽ là 1 hướng dẫn nho nhỏ cho các bạn thực hiện:

- Ở thủ thuật này ta sẽ có 4 ô cho phép hiển thị bài viết mới nhất cho mỗi nhãn, với độ rộng của mỗi ô là 250px, cộng thêm các khoảng căn lề và đường viền thì độ rộng tổng cộng của 1 ô sẽ là 250px + 2*10px + 10px + 2*1px = 283px, như hình bên dưới

- Như vậy muốn cho hiển thị được như trong demo, độ rộng của phần main của bạn tối thiểu phải là 566px. tốt nhất cứ thay đổi độ rộng của class featured (thay đổi giá trị 250px) để việc hiển thị được hợp lý nhất.

- ở mỗi ô sẽ là 1 nhãn, tương ứng với 1 ô sẽ có 3 giá trị sau :
+ label1 = "Love"; : đây là tên của nhãn mà bạn muốn hiển thị vào ô nội dung này. (tên này phải chính xác với nhãn đó)
+ tLabel1 = "Tinh yeu"; : tên hiển thị của link liên kết ở cuối mỗi ô nội dung (có thể thay đổi tùy thích)
+ Title1 = "Love"; : tiêu đề của ô nội dung này.

- Để việc hiển thị được hợp lý. tức là các ô có cùng kích thước, thì mình đã dùng thủ thuật rút ngắn tiêu đề, để các tiêu đề có cùng độ dài, tránh trường hợp tiêu đề của các bài dài ngắn khác nhau sẽ dẫn đến các ô có độ dài khác nhau, như thế trông ko được đẹp cho lắm.

- Còn về phần kích thước của ảnh thumbnail, các bạn có thể tùy chỉnh trong code CSS của class featured img.

Fix lỗi hiển thị không tốt trên IE6

- Do việc dùng 1 file JS nên thủ thuật không hiển thị được trên IE6, để khắc phục lỗi này, mình tạm thời trở lại bản ban đầu, tức mỗi ô nội dung sẽ dùng 1 file JS. Như thế ta sẽ có 4 file JS
- Để khắc phục điều này, các bạn chỉ cần thay đoạn code bên dưới :

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-final.js" type="text/javascript"></script>
</div>

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

<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-1.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-2.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-3.js" type="text/javascript"></script>
</div>
<script src="http://data.fandung.com/blog/demo/Revolution-City-RP/4col-4.js" type="text/javascript"></script>
</div>

- Do mình không có thời gian nên tạm thời chỉ có thể fix lại như vậy, sau này sẽ có cách khắc phục tốt hơn.
Chúc các bạn thành công.

Read more…