Thiết kế Blog giá rẻ Như các bạn đều thấy dưới mỗi tiêu đề bài viết trên blog của tôi có 2 nút mũi tên sang trái và sang phải có chức năng mở rộng phần chứa nội dung bài viết và ẩn đi phần sidebar. Đây có thể nói là thủ thuật hàng hiếm trên cộng đồng Blogger.
Để làm được như vậy, ta phải sử dụng script tạo chức năng mở rộng phần content hay main-wrapper của Template (phần này chứa nội dung bài viết) và ẩn đi phần sidebar (thuộc tính display:none) khi ở chế độ mở rộng và định dạng chiều rộng của phần content tương đương với tổng chiều rộng của phần content cộng với phần sidebar ở chế độ thu hẹp.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ</head>.
Lưu Template.
Bước 2. Chọn Expand Widget Tempplates. Tìm đoạn code
Và đặt sau nó với đoạn code bên dưới.
Lưu Template và kiểm tra kết quả được rồi đấy bạn.
Bạn nên tải về các file hình mũi tên leftarrow và rightarrow hoặc tìm trên Internet để xài cho riêng bạn nhé
Nguồn : chúng tôi sưu tầm từ nhiều nguồn
Để làm được như vậy, ta phải sử dụng script tạo chức năng mở rộng phần content hay main-wrapper của Template (phần này chứa nội dung bài viết) và ẩn đi phần sidebar (thuộc tính display:none) khi ở chế độ mở rộng và định dạng chiều rộng của phần content tương đương với tổng chiều rộng của phần content cộng với phần sidebar ở chế độ thu hẹp.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ</head>.
<script type='text/javascript'>
function enlarge(){
div = document.getElementById("sidebar");
div.style.display="none";
div = document.getElementById("content");
div.style.width="900px";
div.style.fontSize="16px";
}
function narrow(){
div = document.getElementById("sidebar");
div.style.display="";
div = document.getElementById("content");
div.style.width="600px";
div.style.fontSize="12px";
}
</script>
function enlarge(){
div = document.getElementById("sidebar");
div.style.display="none";
div = document.getElementById("content");
div.style.width="900px";
div.style.fontSize="16px";
}
function narrow(){
div = document.getElementById("sidebar");
div.style.display="";
div = document.getElementById("content");
div.style.width="600px";
div.style.fontSize="12px";
}
</script>
Lưu Template.
Bước 2. Chọn Expand Widget Tempplates. Tìm đoạn code
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-header-line-1'/>
</div>
Và đặt sau nó với đoạn code bên dưới.
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin:0px 0 5px 0px'>
<a href='javascript:narrow();'><img alt='Thu hẹp' src='http://img198.imageshack.us/img198/5152/arrowleftj.png' title='Thu hẹp'/></a>
<a href='javascript:enlarge();'><img alt='Mở rộng' src='http://img259.imageshack.us/img259/1919/arrowrighto.png' title='Mở rộng'/></a><div style='clear: both;'/>
</div>
</b:if>
<div style='float:right;margin:0px 0 5px 0px'>
<a href='javascript:narrow();'><img alt='Thu hẹp' src='http://img198.imageshack.us/img198/5152/arrowleftj.png' title='Thu hẹp'/></a>
<a href='javascript:enlarge();'><img alt='Mở rộng' src='http://img259.imageshack.us/img259/1919/arrowrighto.png' title='Mở rộng'/></a><div style='clear: both;'/>
</div>
</b:if>
Lưu Template và kiểm tra kết quả được rồi đấy bạn.
Bạn nên tải về các file hình mũi tên leftarrow và rightarrow hoặc tìm trên Internet để xài cho riêng bạn nhé
Nguyễn Hữu Dũng : Nếu bài viết này có ích với bạn, hãy bấm +1, chia sẻ với bạn bè để khích lệ mình viết thêm các bài viết mới! Cám ơn các bạn đã ủng hộ.
- See more at: http://huudung.vantri.vn/2011/01/mo-rong-thanh-phan-chua-noi-dung-bai.html#sthash.vUxrssns.dpufNguồn : chúng tôi sưu tầm từ nhiều nguồn
Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn
0 nhận xét:
Đăng nhận xét