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)
<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="100%"; // độ rộng tối đa của phần main khi mở rộng
div.style.fontSize="18px"; // 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="600px"; // độ rộng ban đầu của blog bạn
div.style.fontSize="16px"; // 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 class='expandcontent' id='expandcontent'>
Xem bài:<a href='javascript:narrow();'><img alt='Thu hẹp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBymVN0-8Y5HQ20JvfoCQ6RViHbJLIWDVbZk6Li3Vsb65yNhePKdreVllcWzC9uVMfszB1Xzhir9wOuzo3f-rvMP9bKFCHVRBOPIp7VGT2UmZ6UG2svagcVxL4MojU29Ae-2p1LYp-ImsA/s1600/giam.png' title='Thu hẹp'/></a>
<a href='javascript:enlarge();'><img alt='Mở rộng' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0l-zrpcEP-X234nLgWRqr9bYeOaM_Hx8kdXktLnBsp9JmEOOM82RWms4D5xYYBajbKhG08UbrSUxwRgFEuamzj7CIHhnkX-R278kkSek7Vt6XBtPCr9OcDNO-QeYtWzvrFZMwqZzOQcl5/s1600/tang.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
Nguồn: TRAIDATMUI.com
1 nhận xét:
oh.bloging .very nice!hj
Đăng nhận xét