Cách ẩn Sidebar để Full Width Page cho Blogger

Blogger là nền tảng viết blog miễn phí và linh hoạt nhất đối với người dùng. Trong khi viết blog chúng ta thường tạo một trang Full Width, chẳng hạn như muốn tạo trang liên hệ, giới thiệu. Tuy nhiên, với Blogger bao gồm header, footer và sidebar sẽ luôn hiển thị trong mọi trang blog. Kết quả là nó sẽ làm cho trang (page) của bạn bị thu hẹp.

Hide Sidebar Full Width Page Blogger - Ẩn Sidebar Blogger

Vì vậy, trong hướng dẫn này, mình sẽ hướng dẫn các bạn cách để có được Full Width Page (hiển thị kích thước đầy đủ của trang) bằng cách sử dụng đoạn CSS đơn giản. Đoạn code CSS này sẽ ẩn Sidebar (thanh bên) của trang. 

Demo cho dễ hình dung nhé, đây là Page có Sidebar:
Còn đây là khi ẩn Sidebar để Full Width Page:
Bước 1. Vào Bảng điều khiển Blogger > Trang (Page) > Trang mới (New Page).

Bước 2. Chuyển sang chế độ xem HTML (HTML view). 

Bước 3. Sao chép đoạn mã bên dưới đây và dán vào cuối cùng của mỗi bài viết. Với mỗi page bạn muốn ẩn Sidebar thì chèn đoạn mã CSS vào dưới cùng của bài viết là được.
 
<style>
#sidebar-wrapper, #midsidebar-wrapper,.column-left-outer, .column-right-outer, .gapad2, .blog-pager, .post-header-line-1, .post-footer, #comments {display:none !important;}
#main-wrapper {width:100%!important;}
.post { width:100%!important; }
.fauxcolumn-outer {width:100%!important;}
.main-inner .columns {width:100%!important;}
</style>

Ngoài ra để đỡ mất công page nào cũng phải thêm thủ công nếu bạn muốn ẩn Sidebar ở tất cả các page thì copy đoạn CSS ở trên sau đó vào Theme > Edit HTML và dán trên thẻ ]]></b:skin>

Bước 4. Nhấn vào Xuất bản (Publish) và thử kiểm tra Trang của bạn xem đã ẩn Sidebar đi chưa nhé. 

Nếu có bất kỳ câu hỏi nào đừng ngần ngại để lại bình luận của bạn bên dưới bài viết này nhé. Chúc bạn thành công!

Post a Comment

Previous Post Next Post