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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Loading...

7 nhận xét

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

    Trả lờiXóa
  2. 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

    Trả lờiXóa
    Trả lời
    1. 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.

      Xóa
    2. 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

      Xóa
  3. 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 ?

    Trả lờiXóa
    Trả lời
    1. 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.

      Xóa