"Tiện ích mở rộng (enlarge) hay thu hẹp (narrow) phần main của Blogspot"

(Traidatmui.com) – Hôm nay mình chia sẻ cùng các bạn một thủ thuật khá tiện ích cho Blogspot, thủ thuật này cung cấp cho người dùng một tiện ích có thể mở rộng phần nội dung chính của blog khi xem bài viết. Thủ thuật sẽ cho phép bạn tăng độ rộng của nội dung bài viết bạn đang xem hay thu nhỏ lại kích thước ban đầu, và các sidebar sẽ bị ẩn đi khi mở rộng nội dung và khôi phục lại khi thu hẹp lại. Tiện ích này rất hiệu quả đối với các bài viết có nội dung quá dài, nó sẽ giảm được độ dài cho bài viết của bạn. Để hiểu rỏ tính năng của thủ thuật này bạn có thể xem demo bên dưới.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng tiện ích (Expand Widget Templates)
5. Chèn code bên dưới vào sau thẻ <head>
<script type='text/javascript'>
function enlarge(){
div = document.getElementById("sidebar-wrapper"); // ID phần sidebar trong blog của bạn
div.style.display="none";
div = document.getElementById("main-wrapper"); // ID phần main trong blog của bạn
div.style.width="800px"; // độ rộng tối đa của phần main khi mở rộng
div.style.fontSize="16px"; // cở chữ khi mở rộng
}
function narrow(){
div = document.getElementById("sidebar-wrapper"); // ID phần sidebar trong blog của bạn
div.style.display="";
div = document.getElementById("main-wrapper"); // ID phần main trong blog của bạn
div.style.width="500px"; // độ rộng ban đầu của blog bạn
div.style.fontSize="12px"; // cở chữ ban đầu của blog bạn
}
</script>

Tùy theo mỗi template mà bạn hãy xác định đúng các ID ở trên và có thể tùy chỉnh các thuộc tính ở trên cho phù hợp.

6. Tiếp theo chèn code CSS vào trước thẻ ]]></b:skin>
.expandcontent {float:right;margin:0px 0 5px 0px;}

7. Tìm đến code bên dưới
<div class='post-header-line-1'/>

8. Chèn code bên dưới vào ngay sau code vừa tìm được
<div id='expandcontent' class='expandcontent'>
<a href='javascript:narrow();'><img alt='Thu hẹp' src='https://lh4.googleusercontent.com/_BTztXRwC9ik/TYmC4q9YV8I/AAAAAAAAHgY/dvMCmwNJN5I/arrow_left.png' title='Thu hẹp'/></a>
<a href='javascript:enlarge();'><img alt='Mở rộng' src='https://lh3.googleusercontent.com/_BTztXRwC9ik/TYmC46FuJWI/AAAAAAAAHgc/8dUAHO3ML8I/arrow_right.png' title='Mở rộng'/></a>
</div>

9. Save template lại

» Mở rộng thêm

Ở trên mình hướng dẫn đối với template chỉ có 1 cột sidebar, như vậy đối với template có 2 cột sidebar thì sao? Khi muốn mở rộng toàn bộ nội dung và ẩn đi cả 2 cột sidebar đối với template này thì bạn thay code Script ở bước 5 thành code bên dưới
<script type='text/javascript'>
function enlarge(){
div = document.getElementById("sidebar-wrapper"); // ID phần cột sidebar thứ nhất trong blog của bạn
div.style.display="none";
div = document.getElementById("rightsidebar"); // ID phần cột sidebar thứ 2 trong blog của bạn
div.style.display="none";
div = document.getElementById("main-wrapper"); // ID phần main trong blog của bạn
div.style.width="800px"; // độ rộng tối đa của phần main khi mở rộng
div.style.fontSize="16px"; // cở chữ khi mở rộng
}
function narrow(){
div = document.getElementById("sidebar-wrapper"); // ID phần cột sidebar thứ nhất trong blog của bạn
div.style.display="";
div = document.getElementById("rightsidebar"); // ID phần cột sidebar thứ 2 trong blog của bạn
div.style.display="";
div = document.getElementById("main-wrapper"); // ID phần main trong blog của bạn
div.style.width="500px"; // độ rộng ban đầu của blog bạn
div.style.fontSize="12px"; // cở chữ ban đầu của blog bạn
}
</script>

Bạn chỉnh sửa lại các ID cho phù hợp với template của blog bạn và save lại

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

Xem khác cùng chủ đề

7 nhận xét | Viết lời bình

6/14/2011 10:21:00 CH Trả lời

Đã áp dụng thành công cho blog của anh, cảm ơn em nhiều! :votay

Admin
6/15/2011 02:46:00 SA Trả lời

votay

5/26/2012 12:46:00 SA Trả lời

Mình đã làm đúng như hướng dẫn nhưng vẫn không đc cậu ơi kkrong

Nó đẩy bài viết ra giữa trang như hình này

http://i1210.photobucket.com/albums/cc417/dung1prohb/1-2.jpg

Còn tiện ích # nó k mất mà nó dịch hết xuống cuối bài dăng bạn àh

http://i1210.photobucket.com/albums/cc417/dung1prohb/2-3.jpg

Admin
5/26/2012 02:27:00 SA Trả lời

Có thể bạn chưa thay đúng ID (sidebar-wrapper), bạn lưu ý trong thẻ div của cột sidebar phải có dạng <div id='sidebar-wrapper'> chứ không phải dùng class='sidebar-wrapper' nhé, tương tự phần main cũng thế. Nếu dùng class thì nó không hiểu.

5/26/2012 05:19:00 SA Trả lời

Mấy cái sidebar-wrapper vs main.... mình thấy giống của mình nên chẳng thay j` cả
Chẳng bik mình sai ở chỗ nào nữa kkrong

9/10/2013 01:54:00 SA Trả lời

Thủ thuật này hay đó vì nhiều trang truyện tranh hay game flash muốn mở rộng ra.

Test thử sidebar-wrapper ẩn đi và main-wrapper mở rộng ra nhưng phía bên sidebar-wrapper trắng bốc che luôn 1 phần main-wrapper vừa mở rộng >.< sao vậy nhỉ ? giống sidebar-wrapper ẩn đi nhưng vẫn còn cái backgroup trắng bốc nên chưa hoàn thiện, giúp mình được không Trai Đất Mũi ?

Admin
9/10/2013 05:58:00 SA Trả lời

Bạn xem lại ID main-wrapper có đúng với template bạn không và đặt độ rộng phần main cho phù hợp với độ rộng khi bạn ẩn siderbar đi.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang