Loading post navigation ...
 
 

Pro page

35
Nhận xét

Ẩn sidebar khi xem bài viết

| by Phan Dũng | views

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

[FD's BlOg] - Ở 1 số template, các bạn thường thấy 1 điều : khi ta vào xem bài viết thì bố cục của blog bị thay đổi, không còn giống như bố cục ở ngoài trang chủ. Bài viết hôm nay mình sẽ hướng dẫn các bạn thực hiện tương tự thủ thuật này, đó là làm ẩn toàn bộ sidebar khi bạn xem bài viết, thủ thuật này sẽ giúp cho người đọc có thể load bài viết nhanh hơn.

Các bạn có thể xem demo tại blog test của mình : bl1-fd.blogspot.com

Hình ảnh minh họa:

Hiển thị sidebar ở các trang khác ngoài trang bài viết
(trong hình minh họa là ở trang chủ)


Ẩn sidebar khi xem bài viết

Trong bài viết này mình sẽ ứng dụng cho các template có 2 cột, các template có 3 cột các bạn cũng làm tương tự.
☼ Ở thủ thuật này ta sẽ có 2 bước phải thực hiên:

A. Bước 1 : Ẩn sidebar ở trang bài viết
1. Vào bố cục
2. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
3. Tìm đoạn code của sidebar, nó trông giống như bên dưới:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
...
</b:section>
</div>

- Hãy xác định đúng thẻ đóng </div> của sidebar
4. Thêm đoạn code màu đỏ vào như bên dưới:

<b:if cond='data:blog.pageType != "item"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
...
...
...
</b:section>
</div>
</b:if>

5. Save template.

B. Bước 2 : tùy chỉnh lại code CSS của class main (ở các template khác có thể class main có tên khác, như : content, main-wrapper,... )
- Thủ thuật chính trong bài viết này chính là ẩn sidebar và hiển thị style riêng cho class main khi ta đọc bài viết. Do vậy ta phải dùng tới lệnh b:if để làm việc này.

1. Đầu tiên hãy xác định code CSS của class main:

+ Vào bố cục
+ Vào chỉnh sửa code HTML
+ tìm đoạn code CSS của class main , nó trông giống như bên dưới:

#main {
width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

2. Khi tìm được code của class main, ta thay thế nó bằng đoạn code như bên dưới:

<style>
<b:if cond='data:blog.pageType == "item"'>
#main {
float: left;
word-wrap: break-word;
overflow: hidden;
}
<b:else/>
#main {
width:400px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
</b:if>

</style>

- Để ý ở trên ta sẽ thấy là khi load trang bài viết mình không gán thuộc tính độ rộng (width) cho class main, sở dĩ làm như vậy là để lấp đi chỗ trống do phần sidebar tạo ra khi nó bị ẩn.
- Các thuộc tính bên trong của class này ta không nên thay đổi nhiều, chỉ lưu ý một điều, là thuộc tính float: left; của class mainclass sidebar phải ngược nhau, tức là trong trường hợp này thuộc tính float của sidebar sẽ là float: right; . Mình lưu ý điều này chủ yếu là giúp cho bố cục blog trông hợp lý hơn thôi.
- Một điều lưu ý cuối cùng : ở 1 số template ta sẽ thấy thuộc tính float có dạng float: $startSide; hoặc float: $endSide; , hay thay đổi nó lại thành float: left; hoặc float: right;

3. Sau khi thay thế xong ta tiếp tục thực hiện bước cuối cùng, đó là di chuyển toàn bộ đoạn code vừa thay thế được đến vị trí ngay sau đoạn code ]]></b:skin> trong code template.
- Sở dĩ phải làm vậy là do ta không thể dùng lệnh b:if trong thẻ </b:skin> được.

4. Cuối cùng là save template.

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


Enter your mail address:

35

Hiệp Cò

khà khà hay quá ...Đang định nhờ bác làm cái này mà ko ngờ bác làm trước HC luôn hehe

Hiệp Cò

Nếu đc bác có thể hướng dẫn làm thêm 1 cái như thế này.

Bình thường blog HC có 2 cột 2 bên. HC muốn nó ẩn 2 cột đó đi mỗi khi xem nội dung bài viết.
Nhưng HC muốn nó sẻ hiện ra 1 cột nữa mỗi khi xem nội dung bài viết.
Có nghĩa là nếu dùng cách của bác thì 2 cột kia sẻ bị ẩn đi và Hc muốn tạo 1 cột khác cho nó nằm bên phải còn main thì nằm bên trái. Cột này chỉ xuất hiện khi xem nội dung bài viết.

Thanks bác trước khè khè

fandung

@HC : hiểu ý của bạn rồi, tức là tổng cộng sẽ có 3 cột sidebar à, 2 cột kia thì luôn luôn xuất hiện ở tất cả các trang, trừ trang bài viết, còn cột còn lại thì chỉ xuất hiện ở trang bài viết. Phải thế không???

Hiệp Cò

uhm ! hehe làm như vậy cho cái blog mình nó giống website nhìn cho nó gấu :D

Mà bác ơi! cái temp của HC là temp tự làm, ko hiểu sao mà nó nặng quá.

Hay là tại HC cài nhiều hack quá nên nó đọc chậm?

Pig

như vậy có làm giảm Rank của blog ko a

Hiệp Cò

@pika: quan trọng là blog mình có chất lượng. Chứ còn chuyện rank thì ... Nếu blog có chất lượng thì cỡ nào người ta cũng bấm nút lùi để xem bài khác :D

fandung

Bạn Hiệp cò nói đúng. :D

Mình thấy các blog hiện nay tòan dùng chiêu hiển thị các hình mát mẻ, rồi các tin xxx để lấy tạo rank cho blog, chứ không hề quan tâm tới chất lượng bài viết của blog.

Blog mình hiện giờ chỉ tòan post thủ thuật, hơn 1 tháng nay chưa hề có 1 bài viết spam nào.

Tuấn Nguyễn

Theme 3 cột muốn ẩn 1 cột bên trái hoặc bên phải thì làm sao anh ...

fandung

@Tuấn P.H.A : trước hết em phải xác định các sidebar này nằm trong các thẻ div nào (mỗi sidebar sẽ nằm trong các thẻ div khác nhau), rồi dùng lệnh b:if để ẩn nó đi, sau đó tùy chỉnh lại đôi chút thì sẽ được thôi.

Nguyễn Khoa

một thủ thuật khá hay định yêu cầu thì post rồi :D

fandung

wa, không ngờ thủ thuật này mình post lên lại hợp ý nhiều người vậy. :D

Quang Minh

Hic hic
Sao mình làm hoài mà không dc vậy
mình đang dùng theme TheProfessionalTemplate : http://ebooksoft.ucoz.com/TheProfessionalTemplate.rar
Ai có thể giúp mình dc không hic hic

Phan Dũng

@Quang Minh : bạn có làm đúng như hướng dẫn của mình ko, không nên copy toàn bộ code nhé bạn, do mỗi template có mỗi code khác nhau, hãy tìm đúng các id tương ứng rồi thực hiện như hướng dẫn nhé.

Còn cái link bạn đưa mình ko download đc, nên mình ko test cho bạn đc

Hiệp Cò

Hì hôm nay Hc mới áp dụng cách của bác!

À mà bác ơi. Hình như bác ghi nhầm là dán đoạn code #main trc b:skin là nhầm đó :|
HC áp dụng như cách của bác, temp nó cứ loạn lên...Nhưng để sau thẻ ]]> b:skin thì ko bị gì :|

Phan Dũng

đúng rồi mà HC trên đó mình có nói là di chuyển ra ngay sau đoạn code ]]></b:skin> (ở bước 3 đó)

Chắc HC xem nhầm đó :D

P/S : khi đọc comment của HC mình chưa chỉnh sửa bài viết đâu nha. Nếu mình có thiếu sót sẵn sàng tiếp thu để sửa chữa.

Khách (ẩn danh)

tuyệt vời, một thủ thuật quá hay

Khách (ẩn danh)

bạn ơi cho mình hỏi là sao mình làm cái thủ thuật này nó không được vậy? bạn có thể hướng dẫn lại được ko? mình làm thì đúng là khi vào bài mất sidebar nhưng mà phần bài viết vần thu gọn lại chứ ko chèn hết cả trang, còn bài mà chèn hết thì ngoài trang chủ phần sidebar lại đùn xuống hết nữa, lại còn hiện cả đống code trên header!

Leo Nguyen

Minh cung lam duoc roi,nhung cho minh hoi la sau khi lam xong co chu cua bai viet lon hon, tieu de cung lon hon nua. Thu nhỏ không được.

andante

Đã làm lại nhiều lần nhưng vẫn bị lỗi tràn chữ trong phần bài viết qua phía lề phải.

Template mà andante sử dụng giống như trong phần demo của Dũng.

Nhờ Dũng coi lại giùm. Andante rất cần làm blog giống bài hướng dẫn này.

Thanks !

Leo Nguyen

@andante: Bạn chỉ cần edit lại độ rộng của main là được.
Mà sao mấy Blog ko bị đổi size chữ mà mình lại bị nhỉ???

Leo Nguyen

Chỉnh sửa được hết nhưng vẫn bị lỗi.

minhlun

chào anh!

em cố gắng lắm để mò cái này mà 0 bít mò làm sao vì cái theme của em nó tùm lum em làm tá lả mà 0 có đc, anh liếc qua dùm em chút nhé :)

http://yenminhs.blogspot.com

em mún ẩn cái sidebar giống anh mà 0 có làm đc :(

Unknown

ui.........tui làm hoài mà không được.Bài viết
Cứ bị tràn sang bên phải, ở giữa không có gì.

HỆ THỐNG ĐIỆN NĂNG LƯỢNG MẶT TRỜI

làm sao mình không thể chèn code này để ẩn 1 HTML lầm trong phần bài đăng trên blog dc nhỉ
xem ảnh
http://img227.imageshack.us/i/56398899.jpg/

Nguyễn Tấn Hoàng

Không tìm thấy đoạn sidebar-wrapper :(:(

Unknown

cái này rất hay.đã thực hiện thành công cho blog của mình nè.keke...
http://www.webtruyen.tk

Khách (ẩn danh)

tại sao em tìm code:
div id='sidebar-wrapper'
...
/div
mà không thấy chán :((

Khách (ẩn danh)

thích bài viết này của anh quá mà em không làm được

Phan Dũng

@Nguyen Minh Ngoc : ah, đó là template cũ mới có, mấy cái template mới bây giờ nó có khác đôi chút, em cho anh blog của em đi, anh tìm giúp cho :D

Khách (ẩn danh)

http://x5ngoc.blogspot.com/ blog của em đây anh ơi.Em chỉ tập vọc blog thôi hi.hình như mẫu này giống anh nói thật tìm mãi kô có code đó anh ạ.
Đang tập vọc có gì đừng cười em nhá

Khách (ẩn danh)

À tiện thể anh cho em hỏi cách thay các chữ trên menu( trang chủ-Clip-....... ) thay bằng ảnh được không anh.Mới làm quen với blog còn bỡ ngỡ quá.
Nếu được tks anh trước :D

Hakutaku

Thủ thuật này rất hay ạ, nhưng em ko tìm được đoạn code nào như bước 1 cả. Anh giúp em với.
Địa chỉ nhà em đây myt2509@gmail.com

Khách (ẩn danh)

Gần năm mới rồi mà không thấy anh trả lời :((

Minh Hùng

Có thể áp dụng thủ thuật này cho từng nhãn riêng biệt được không?

Amazing Magic Trick

Anh FD chỉ em cách tạo 1 page (vd:liên hệ) mà không có sidebar với ! Cám ơn Anh



☺ 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