Loading post navigation ...
 
 

Pro page

57
Nhận xét

Pro TabNews mang phong cách của VnExpress

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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.


Enter your mail address:

57

9xhot

Quá tuyệt với, quá pro. :D
Em chờ cái này lâu lắm rồi, nhưng mong muốn thì hơi khác 1 chút. Anh FD có thể edit cho em giống với ý tưởng trong ảnh này ko?
http://i182.photobucket.com/albums/x263/orcsy/p2.jpg
trong đó parent là label chứa tất cả các bài từ các label của submenu như trong site của em.
Thanks anh FD. :D

♂←Xzip←♂

anh oi cho em hoi muon tang so^' luong "ki tu"

Summary post phai lam the nao`

fandung

@♂←Xzip←♂ : em thay đổi code này :
summaryPost = 247; thay số 247 thành số khắc.
Còn code : sumPost = 147; có thể giữ nguyên, cái này ko quan trọng lắm. nó dùng để hiển thị title cho link của bài viết.

@9xhot : ý em nói là thay vì Header nó thay đổi theo bài viết hiển thị, thì bây giờ ta cho nó cố định, và chuyển Nhãn hiện hành thành parentMenu còn các Nhãn khác là SubMenu

Nếu đúng như vậy thì đơn giản hơn.

mmovn

he he... cho e test da

♂←Xzip←♂

anh ơi anh làm ơn vào trang của em xem thử làm sao thay đổi được đọ rộng của toàn bộ cái Pro TabNews cho nó nhỏ lại xíu .Em cảm ơn

fandung

@♂←Xzip←♂ : .folder, .folder-title, .folder-bottom {width:500px;}

bạn thay đổi code này để làm cho nó nhỏ lại

♂←Xzip←♂

anh ơi cái của em làm nhỏ lại rồi mà nó vẫn đẩy sibar xuống phía dưới là sao vậy ???? ! MỘt số trang thì hiển thị "ngon lành" ,một số trang nó cũng hiển thị nhưng nó đẩy sibar xuống dưới cùng anh có thể vào : xzipvn.blogspot.com . xem thử với

fandung

@♂←Xzip←♂ : mình thấy có bị đẩy xuống gì đâu

9xhot

Cho nó cố định cũng tốt rồi anh ạ. Giống vnexpress là được. :D

fandung

@9xhot : thì lúc đầu anh để giống nó đó chứ, sau đó mới ngồi "chế biến" ra thành như thế này

9xhot
9xhot

ack, anh rảnh rỗi ghê ha. ;))

Vậy cách làm thế nào, anh chỉ cho em với.

fandung

@9xhot : đã update như em nói rồi đó.

9xhot

wow, thanks anh nhiều. Thử thôi. :D

9xhot

Cái này chạy ngon, chỉ có điều đôi khi nó ko load được, có lẽ do phần random trong summary post. Anh FD có thể chỉnh chút xíu cho nó chỉ hiện bài mới nhất trong parent menu đc ko?
Nhận tiện cho em hỏi làm cách nào để tạo nhiều tab menu khác nhau trên trang chủ?

fandung

@9xhot : tạo tabMenu nào em???
Còn muốn cho chỉ hiển thị bài viết ở parentMenu thì em bỏ code JS ở bước 3 đi, rồi thêm code bên dưới vào trong thẻ <script> ở bước 5 là xong:

label = "ABC";

với ABC là nhãn của parentMenu

9xhot

Tab menu này, nhưng mà tạo nhiều cái như vnexpress đó anh.

9xhot

ah tab news chứ. :D

9xhot

Em không hiểu ý anh lắm. Thêm label="ABC" trong thẻ script nào? vì nó có đến mấy thẻ mà. Anh xem hộ em với, em chèn vào tất cả các thẻ mà nó không hiện ra bài summary.

fandung

@9xhot: chèn nó vào sau dòng này.
numposts = 6;

Còn muốn tạo nhiều TabNews giống trang VnExpress thì em cứ tạo thêm các widget HTML/Javascript khác rồi dán code tương tự như thủ thuật này vào thôi. Cái này đơn giản mà

9xhot

he he, được rồi. Cảm ơn anh nhiều lắm

Suckhoegiadinh.org

Quá tuyệt vời, chẳng mấy chốc FPT phải tuyển em về làm thôi. Anh yeusuckhoe.tk

Advertise online

Thủ thuật của anh FDung rất hay,

Leo Nguyen

Hay quá, cái này thấy bên vnpressnet có dùng nhưng mà mình nghĩ... nó làm cho blog ko còn là blog nữa rùi.

E-commerce Portal

Mình không thích theme sặc sỡ quá. Với lại, flash kiểu vnexpress là mình tránh. Mình thích đơn giản và thoáng. Rất cảm ơn bạn đã dành nhiều thời gian cho vấn đề này.

viet-offer.com

em công nhận anh Dũng giỏi thật,việt nam thật đáng tự hào.:d yêu anh wa.cảm ơn tất cả tình yêu fandung dành cho blogger,chúc anh luôn thành công và còn nhiều bài mời hơn.

NAD

Quá hay, nhưng làm thế nào để hiện thumbnail ảnh đầu tiên trong bài nhỉ?

Khách (ẩn danh)

anh? trong summary duong nhien la anh dau tien trong bai rui ong NAD hoi vo vin? j vay ?

Khánh Trắng®

Cho mình hỏi là sau khi click vào Label của tabnews thì làm sao để cho tabnews không còn xuất hiện như ở trang chủ nữa?

anh3ngơ

thì bạn tìm ở blog cua phan dung hoặc bên vnpressnet.com (hi hi - quảng câo tí nhé) bài viết hiển thị widget theo ý muốn là được.

Chúc dũng có thêm nhiều thủ thuật hay, cái thủ thuật này của em anh tìm mãi mà không được, đến giờ thấy nó đẹp quá lại không thực hiện vì ai cũng bảo là bản sao của vnexpress thì không thích chút nào.

Dù sao cũng Cám ơn công sức em đã bỏ ra nhé.

Khánh Trắng®

Cám ơn Anhbangơ nhé!

Tran Anh

Mình muốn nhờ Dũng làm giúp để chuyển các bài viết othernews đó xuống bên dưới chứ không muốn nằm bên cạnh đó được không dũng? bởi vì blog giữa của mình hơi nhỏ? Mong bạn chỉ giùm!
Cảm ơn nhiều

Khánh Trắng®

Chào bạn Dũng!
Mình làm theo cách của 9xhot, khi thêm nhiều tabnews bằng cách thêm nhiều Widget rồi dán vào. Nhưng sao chỉ có phần Submenu và parentmenu thì khác nhau, còn phần Othernews của mỗi Tabnews lại giống nhau hết vậy? Phan Dũng hướng dẫn giúp mình nhé! Thanks

Phan Dũng

@Khánh Trắng : à, muốn tạo nhiều cái khác nhau thì bạn phải thay đổi lại tên của mảng chứa các label cho mỗi widget.

Ví dụ widget 1, bạn đặt là rdlabels1, widget 2 đặt là rdlabels2

Lưu ý : những đoạn nào trong code của thủ thuật có chữ rdlabels thì bạn nên đổi lại hết, để cho nó không bị trùng, như thế thì mới hiển thị được các bài viết khác nhau ở các widget

Chinhnd

Cám ơn em nhé, anh đã chuyển sang sử dụng tiện ích này và cũng mượn luôn bài viết này biến tấu thanh bài viết kiểu khác, em xem và cho ý kiến nhé.

Link bài viết là http://www.vnpressnet.com/2009/09/tao-tab-news-theo-phong-cach-bao-chi.html

LongNX

Dũng vui lòng chỉ mình cách hiện các bài viết tương tự như vầy thôi, bài của Dũng rất chi tiết nhưng với newbie như mình thì ~x( :
http://photo.zing.vn/photo/gallery/detail.8876026.html
sorry mình không biết cách post ảnh trực tiếp, Dũng vui lòng click vào link trên coi vậy nhé.

LongNX

Nhân tiện Dũng vui lòng cho Long hỏi 1 câu nữa, muốn hiểu được mấy cái code trong Bố cục/ Chỉnh sửa HTML thì phải học từ chỗ nào ? Cám ơn nhiều.

Phan Dũng

@Nguyễn Xuân Long : thực ra các code trong phần chỉnh sửa code HTML đa số là ngôn ngữ HTML là chính. muốn hiểu được rõ bố cục của nó trước hết bạn phải nắm rõ các thẻ của ngôn ngữ HTML. Nếu rành bạn nhìn vào code, bạn sẽ biết thẻ nào nằm trong thẻ nào, và 1 thẻ được mở và đóng ở vị trí nào.

Ngoài ra còn có code CSS, code CSS là phần để tạo nên template cho blog của bạn.

Có thể nói 2 ngôn ngữ này là để nhất trong phần thiết kế web, vì thế bạn chịu khó bỏ thời gian ra tìm hiểu sẽ rành hết thôi.

Bạn có thể vào trang www.w3schools.com để tìm hiểu thêm.

tommy

anh fan dũng ơi!em làm í như hướng dẫn của anh nhưng sao nó chỉ hiển thị cái thanh labels thôi mà không hiển thị nội dung như anh hướng dẫn,hơn nữa em thấy khi mình click vào nột chủ đề ,chẳng hận như đõ xe thì nó vẫn hiển thị cái thanh labels đấy,anh giúp em nhé!
thank anh nhiều!

http://www.ngoisao116.co.cc/

Vô tình đọc đươc bài này của anh Dũng quả là hay. Mong anh Dũng có nhiều thủ thuật mới để bọn em áp dụng. ah mà anh Dũng ơi em vừa làm Weblog không lâu anh em mình có thể trao đổi logo được không. mong anh và mọi người ghé thăm Weblog của em và cho ý kiến để em học tập

Blog4vn

FD ơi, cho mình hỏi thêm về cái thủ thuật của bạn 9xhot với.

mình làm như vậy thì được rồi, bạn xem tấm hình này đi
http://c.uploadanh.com/upload/1/235/0.638915001254892054.jpg

Mình muốn làm giông như trang http://sohoa.vnexpress.net. Ở menu "TƯ VẤN" đó, lúc mình click vào mỗi Label thì nó hiện bài của Label đó ngay ở phía dưới (Trong trang SoHoa thì có các Label : Điện Thoại, Nghe Nhìn, Máy Tính ...). Mình muốn giống như vậy đó.

FD cố gắng giúp mình với nhé. Cám ơn nhiều !
http://blog4vn.blogspot.com

fandung

@Ngoisao116 : bạn cứ comment ở phần liên kết ở blog mình, rồi mình sẽ add sau.

@Blog4vn : mình hiểu ý bạn, cái tab đó tương tự như tab này. Nó chỉ khác là dùng thêm 1 đoạn script để có thêm hiệu ứng hiển thị bài viết khi click vào nhãn. Nhưng nếu làm cách này thi tiện ích sẽ rất nặng. Do nó phải load thêm 1 file JS và truy xuất 1 lúc hết tất cả các nhãn, trong khi đó ở thủ thuật này nó chỉ cần truy xuất 1 nhãn cho 1 lần load, mà không cần load thêm file JS hỗ trợ nào.

Khách (ẩn danh)

uhm, vậy mình cứ làm như vậy thôi.

CHo mình hỏi thêm nữa với:
Thứ nhất: Mình muốn cho khoảng cách giữa 2 widget giảm xuống
http://img188.imageshack.us/img188/7029/123xu.jpg

Thứ 2: Tại sao khi mình click vào 1 Label bất kỳ thì tất cả các widget vẫn không ẩn đi, nó vẫn nằm ở phía trên.

Thứ 3: Mình muốn những bài mới nhất (những bài mình mới post đó) nó luôn nằm trên những Label mà mình đã làm, mình thấy toàn bài cũ không à.

FD cố gắng giúp mình với nhá.
http://blog4vn.blogspot.com

appasionata

Đã làm theo cách của bạn.

Hiệu quả : Hình không tràn qua bên trái (lấn chỗ của sidebar) như mình muốn mà nó lại tràn qua bên phải. Đúng như bạn nói-trông rất xấu.

Mới đọc được bài "Ẩn sidebar khi xem bài viết" của Phan Dũng.link :
Mình nghĩ có thể nó là cái mình đang cần (hình sẽ mở rộng thế chỗ của sidebar)>

Nhưng ở bước 1 mình không tìm thấy dòng code
như trong bài viết.(Mình đang sử dụng template Harbor)

Bạn giúp mình xem có thể thực hiện với cái template này không.

Cảm ơn bạn.

Anh2

Bác ơi! Làm sao để tjực hiện cái thủ thuật này mà ko phải thay đổi Code trong template?

Khách (ẩn danh)

Làm sao khi mình post bài mới thì nó tự động vào summary post và bài cũ được tự động đẩy sang sumpost?

Khách (ẩn danh)

:X mình mới lập blogger, thấy bài viết này hay quá

B

tôi ko thể nào cho hiện nội dung được??? chỉ xuất hiện mấy cái menu thui, hic hic

B

Tại sao khi mình click vào 1 Label bất kỳ thì tất cả các widget vẫn không ẩn đi, nó vẫn nằm ở phía trên.

Sim 9x

cảm ơn bạn PHAN DŨNG. Thế giới Sim VIP http://simvip.co.cc

THE GIOI TRONG TAM TAY

Minh muon lam tabnew nhu bai nay nhung file http://fandung.110mb.com/JS-files/Pro-TabNews/VnE-recent.js bi xoa tren 110mb roi.Ban com the up lai khong de toi tai ve va up nen host cua minh.Co gang giup minh nha.A` neu co the gui vao mail cho minh nha kiem_khach_vuotthoigian@yahoo.com .Cam on nhieu!

Nguyên Luật

Thủ thuật nào của anh cũng phải nói là tuyệt vời.
Cảm ơn anh nhiều nha!!
Em làm được rồi. Rất đẹp
Mong anh cố gắng duy trì nha!!!
luat1x1.blogspot.com

Khách (ẩn danh)

bạn có thể nói rõ về code 1 ,2 ,3 ,4 không ! mình hok hiểu lắm ! nuế dc bạn có thể send link dùm mình ! yahoo : zgalovez@yahoo.com Thank ban nhiều !

Khoa NN-VH Trung Quốc

mình dùng widget này thì chỉ hiện được thanh menu các label thôi, ko hiện đc bài viết... sb help me, plz!!!

baba

Mình muốn xin cái file .js trong bài viết.
email của mình là saotruc19852010@gmail.com

Xin cảm ơn nhiều !

Seven

Fandung ơi mình đã làm như bạn hướng dẫn nhưng ko đc , mặc dù mình đã thứ làm chí label

hình như cái file .js của bạn bị hư thì phải

Seven

bạn có thể gửi file .js vào mail cho mình đc ko

Email : Billyestate@gmail.com



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home