Note Đóng lại
Giải pháp bán hàng online Số 1 Việt Nam

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


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/AVvXsEigrIRT5ueu-KpeWvpnzrd2wcx8nLSgdLuWcX0TmZLYqT1ER-zk6eF4ghX11pyLv8VKG7jNwuaFnYBvnrbG76WHjZh4xIS8_bFv1hHEYM6y0jaiZ1_affOWoUHmOeVwCNKuP6HwD6dV1Z6c/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/AVvXsEgl4t6or5Kz7vxAlPR1-v9vezmUnnS5QkbN5dvRwxmSdaMgByfnEvf6CfFW-78egr3ZErgqzgM3ZjZKIt96UPvEb4Hw93HMtU9p6IW_UAm49psEp_SjRqe2bax3IfsMEHgrnP0U12OpR4f9/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
"; /* */
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(&quot;sidebar-wrapper&quot;); // ID phần sidebar trong blog của bạn
div.style.display=&quot;none&quot;;
div = document.getElementById(&quot;main-wrapper&quot;); // ID phần main trong blog của bạn
div.style.width=&quot;100%&quot;; // độ rộng tối đa của phần main khi mở rộng
div.style.fontSize=&quot;18px&quot;; // cở chữ khi mở rộng
}function narrow(){
div = document.getElementById(&quot;sidebar-wrapper&quot;); // ID phần sidebar trong blog của bạn
div.style.display=&quot;&quot;;
div = document.getElementById(&quot;main-wrapper&quot;); // ID phần main trong blog của bạn
div.style.width=&quot;600px&quot;; // độ rộng ban đầu của blog bạn
div.style.fontSize=&quot;16px&quot;; // 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/AVvXsEigrIRT5ueu-KpeWvpnzrd2wcx8nLSgdLuWcX0TmZLYqT1ER-zk6eF4ghX11pyLv8VKG7jNwuaFnYBvnrbG76WHjZh4xIS8_bFv1hHEYM6y0jaiZ1_affOWoUHmOeVwCNKuP6HwD6dV1Z6c/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/AVvXsEgl4t6or5Kz7vxAlPR1-v9vezmUnnS5QkbN5dvRwxmSdaMgByfnEvf6CfFW-78egr3ZErgqzgM3ZjZKIt96UPvEb4Hw93HMtU9p6IW_UAm49psEp_SjRqe2bax3IfsMEHgrnP0U12OpR4f9/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

Bạn đã xem chưa

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

Mình làm k được :((
nó đẩy ra giữa nè
http://i1210.photobucket.com/albums/cc417/dung1prohb/1-2.jpg
Còn tiện ích nó nhích xuống dưới >.<

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

Hướng dẫn thêm cái ID Tớ không hiểu mấy cái này Minh,
với lại cho mình hỏi cái này luôn
khi click vào bài đăng nó mở rộng hết ra chèn cả cột bên có cách nào làm được không Minh?

Đường Chư rcăm Chào thân ái!



Copyright © 2014 Blog Thông Tin Tổng Hợp