Một ngày nào đó khi bạn chán cái bố cục cố định của một Template và muốn cho blog của mình có những thay đổi khác đi so với những blog khác. Bài viết hôm nay mình sẽ hướng dẫn các bạn thủ thuật làm ẩn toàn bộ sidebar khi bạn xem bài viết, hoặc làm ẩn toàn ộ sidebar khi bạn xem trang chủ, 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 ngay tại thời điểm mình đăng bài viết này. (Nếu để ý bạn sẽ thấy khi xem bài viết này sidebar bên phải của mình đã biến mất)
☼ Ở thủ thuật này ta sẽ có 2 bước phải thực hiên:
» Bước 1: Ẩn sidebar ở trang bài viết
1.1. Vào mẫu (Template).
1.2. Vào Chỉnh sửa HTML (Edit HTML) [không cần nhấp chọn mở rộng tiện ích mẫu].
1.3. Tìm đoạn code của sidebar, tương tự như bên dưới:
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> ... ... ... </b:section> </div>
- Các bạn phải xác định đúng thẻ đóng </div> của sidebar nếu không khi lưu mẫu sẽ báo lỗi không thể lưu được.
1.4. Thêm đoạn code màu đỏ vào như bên dưới:
1.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>
» Bước 2 : Tùy chỉnh lại code CSS của class main
Lưu ý: Tùy Template khác nhau mà 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.
2.1- Vào Mẫu
2.2- Vào Chỉnh sửa HTML
2.3- Tìm đoạn code CSS của class main , nó trông giống như bên dưới:
#main {
width:540px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
-. 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:540px; float: left; word-wrap: break-word; overflow: hidden; } </b:if> </style>
- Ở trên ta bỏ thuộc tính width:540px; để bài viết có thể lấp đi phần trống do Sidebar ẩn để lại.
- Các thuộc tính nên thay đổi hợp lý nhất là thuộc tính float: left; của class main và class 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.
2.4. Lưu mẫu lại.
Nhận xét
Hay quá :O) Bạn hướng dẫn cách sửa lỗi hiển thị Avantar ở Comment được không:O) . Blog mình lỗi Commnet rùi bạn ơi :D)
Trả lờiXóa@dung coiBẠn xem bài Khắc phục lỗi Vantar Comment này nha:3) :3) :3)
Trả lờiXóaThế ví dụ blog mình có 2 sidebar left và right.
Trả lờiXóaỞ trang chủ thì mình hiện cả 2 sidebar left + right
Nhưng lúc xem bài viết sẽ ẩn đi sidebar left chỉ còn phần bài viết và sidebar right.
Lưu ý: Tất cả các bài viết mình đăng lúc xem thì sidebar left đều tự động ẩn đi cả :|.
Có gì chỉ mình với nhé
tk
Nam xem hình này và giúp mình nha. Trong đó có câu hỏi của mình luôn rồi đó.
Trả lờiXóahttp://1.bp.blogspot.com/-4IpavyFO7Pc/T7TFUDahZ3I/AAAAAAAAADk/dXEuZ5NHS6E/s1600/1.PNG
Có gì giúp mình gấp gấp nha :3)
tks
@baby Bạn không để lại địa chỉ blog do vậy mình đoán là blog http://lap-trinh-vien.blogspot.com/ do vậy mình đưa ra cách khắcphục như sau:
Trả lờiXóa1. Xóa đoạn code sau nằm trước thẻ ]]>
#main .post:hover {
border-right: 2px solid #222;
}M
2. Để các hiệu ứng hover chỉ xuất hiện ở trang chủ không xuất hiện ở trang bài viết bạn phải nhóm CSS chứa phần hover và0 cặp thẻ như sau:
Thêm đoạn code sau vào sau thẻ ]]>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#main .post:hover {
border-right: 2px solid #222;
}
</style>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<style>
#main .post:hover {
border-right: 0;
}
</style>
</b:if>
- Lưu template lại là Ok.
- Nếu muốn ẩn ở cả trang chủ và trang bài viết bạn chỉ cần thực hiện bước 1 là Ok.
Không được Nam ơi không hiểu sao nó lại báo lỗi như thế này,
Trả lờiXóaMặc dù đã làm đúng rồi.
Code của Nam thiếu thẻ đóng mình cũng đã thêm vào nhưng không được.
Mình gữi template cho Nam xem thử cho mình cái nha. --> đã gữi qua Contact, Check rồi phản hồi sớm nha.
@baby Sory mình thiếu bạn thêm một thẻ </b:if> vào cuối đoạn code trên nha.
Trả lờiXóaĐã làm được cả rồi :3) :3) :3) :3)
Trả lờiXóađúng là quá dễ :L) :L) :L) :L)
@baby Uk bạn có thể thay đổi cả giao diện với mấy cái CSS :3) :3) :3)
Trả lờiXóaNam ơi xem cho mình giúp cái footer á. Chỉ là cái background thôi. mà sao trên Chrome thì hiển thị còn trên IE lại không :C)
Trả lờiXóaĐây chỉ là code CSS background bình thường mà lạ thật. trong khi đó background của body, sidebar vẫn hiển thị bình thường. Không hiểu vì sao :C) .
Nam xemg giúp mình coi có sai ở đâu không nha.
http://lap-trinh-vien.blogspot.com/
@baby bạn có thể tham khảo thêm Bài viết này TẠI ĐÂY
Trả lờiXóaBạn ơi xin chỉ giúp mình với,làm thế nào mà sidebar chỉ ẩn 1 hoặc 2 bài viết còn các bài khác sidebar vẫn hiện nên bình thường? Xin chỉ giúp mình với.Thanks.
Trả lờiXóa@emmanuel Bạn check phần HTMl của bài viết và chèn các đoạn code dạng như sau:
Trả lờiXóa<style>
#sidebar {display:none !important}
#main {
width:900px !important;
float: left;
word-wrap: break-word;
overflow: hidden;
}
</style>
Admin ơi mình muốn ẩn sibar ở Nguyên Trang Chủ Thôi Thì Làm Thế Nào Vậy
Trả lờiXóaThay:
Xóa<b:if cond='data:blog.pageType == "item"'>
Thành:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Xem thêm lệnh ẩn tại đây: http://namkna.blogspot.com/2011/07/hien-thi-widget-o-nhung-trang-nhat-inh.html
chỉ hide được sidebar thui còn ở trong vẫn bị cái khung sidebar
Trả lờiXóahttp://nv6.upanh.com/b3.s34.d1/3051886c068954b171c153df6933e7d9_54367506.1.png
demo live: http://www.hack-game.info/2013/03/cmmodz-6127-hack-auto-bug-hanh-dong.html
ai giúp giùm với, liên hệ với mình nhoxwycodon@yahoo.com.vn
Mình đã qua không hề bị lỗi như bạn nói ?
Trả lờiXóamình làm như bạn chỉ dẫn nhưng chỉ ẩn đc sidebar thui, còn khi bài viết nó k lấp đi phần trống của sidebar. hizzz
Trả lờiXóabạn thay đoạn
Trả lờiXóa<b:if cond='data:blog.pageType == "item"'>
#main {
float: left;
word-wrap: break-word;
overflow: hidden;
}
<b:else/>
thành:
<b:if cond='data:blog.pageType == "item"'>
#main {
width:1000px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
Thay width:1000px; thành độ rộng bạn muốn.
thay #main thành id của bạn.
<b:else/>
Bạn ơi, bài viết rất hay, mình rất thích, rất muốn áp dụng cho blog của mình, nhưng khi làm thì không thấy đoạn id='sidebar-wrapper'
Trả lờiXóavà CSS của class main; Mình không biết làm gì hơn. Bạn hướng dẫn mình với. Blog của mình http://hoithanhkienbai.blogspot.com/. Bạn xem và hướng dẫn mình vs. Thanks
Blog của bạn 2 thành phần đó là:
Xóa#sidebar_main
và:
#page-main
Bạn ơi , mình không biết dán trong bước 1.4 ở đâu, mình dán không đúng, nên cứ bị lỗi. Bạn hướng dẫn mình với. Mình không biết...lam ..uuu? thank
Trả lờiXóaĐoạn code có dạng như bên dưới:
Trả lờiXóa<div class="section" id="sidebar_mainads">
bấm vào đầu dòng của đoạn trên để thu nhỏ lại và thêm code mình hướng dẫn vào nha.
Nhận xét này đã bị tác giả xóa.
Trả lờiXóabạn ơi sao mình làm mà ko đc http://phamquanghe.blogspot.com/
Trả lờiXóabạn có thể dùng đoạn này:Chèn trước thẻ </head>
Xóa<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#post-area{width:100% !important}
#rside-area{display:none !important}
</style>
</b:if>
Em dán code css vào HTML của bài viết là được, ví dụ anh dán vào bài viết này nên nó ẩn hết sidebar.
Trả lờiXóaNhờ bạn chỉ hộ mình cái template http://phamquanghe.blogspot.com/. Khi mình vào mục tin tức hoặc các menu khác thì sidebar :tiêu điểm, thủ thuật, đánh giá mới nhất ở trang chủ lại không hiện mà là một khoẳng trống là sao bạn. Mình làm theo bạn rồi nhưng không được
Trả lờiXóaBạn để ý ngay trước đoạn code <div id='sidebarleft-wrapper'> có đoạn tương tự như bên dưới:
Xóa<b:if cond='data:blog.url == data:blog.homepageUrl'>
bạn hãy sửa nó thành:
<b:if cond='data:blog.pageType == "index"'>
Lưu mẫu lại và kiểm tra thành quả nha.
http://kunhandmade.blogspot.com/ đây là blog của mình, trong phần bố cục có phần sidebar nhưng khi mình vào blog thì nó lại đâu mất tiêu, vs cả cái thanh menu bên phải đó, mình muốn khi nhấn vào mấy dòng đấy như là shop thì sẽ hiện ra một trang khác của mình hoặc là mình muốn thay dòng showcase thành dòng Post và nó sẽ hiện ra mấy cái dòng nhỏ nhỏ là Handmade Kraft, Life Style, Skincare rồi ấn vào thì sẽ hiện ra những bai viết mình sắp xếp vào trong phần đây
Trả lờiXóaHi a!
Trả lờiXóaEm mới dùng blogsplot theme norma .Hiện tại e đăng ảnh lên là bị slide bar right nó che mất 1 phần của ảnh giống như vầy:
http://www.tongdaifpt.info/2015/12/dang-ky-truyen-hinh-so-fpt.html
Nhờ a hỗ trợ dùm e với.
Rất cám ơn a!
wow, hay quá, cảm ơn Terocket nhiều, nhờ có bài viết mà website của mình đã được hoàn thiện!
Trả lờiXóa(web mình là web đọc doujinshi - https://doujinshitrans.blogspot.com/)