• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Mở rộng thành phần chứa nội dung bài viết

18
14/01/2011

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 &gt;&gt; Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
function enlarge(){
div = document.getElementById(&quot;sidebar&quot;);
div.style.display=&quot;none&quot;;
div = document.getElementById(&quot;content&quot;);
div.style.width=&quot;900px&quot;;
div.style.fontSize=&quot;16px&quot;;
}
function narrow(){
div = document.getElementById(&quot;sidebar&quot;);
div.style.display=&quot;&quot;;
div = document.getElementById(&quot;content&quot;);
div.style.width=&quot;600px&quot;;
div.style.fontSize=&quot;12px&quot;;
}
</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>

Và đặt sau nó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin:0px 0 5px 0px'>
<a href='javascript:narrow();'><img alt='Thu hẹp' src='http://bit.ly/dFogbx' title='Thu hẹp'/></a>
<a href='javascript:enlarge();'><img alt='Mở rộng' src='http://bit.ly/hLiV5F' 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 leftarrowrightarrow hoặc tìm trên Internet để xài cho riêng bạn nhé.

{18 bình luậnAdd yours ?}

13:13:00, 14 thg 1, 2011

Bạn kiểm tra lại ở bước 1. Không biết past đoạn code đó vào thẻ nào cả!!

Reply
14:01:00, 14 thg 1, 2011

À trước thẻ </head> đấy mờ. Khi đăng bài bị thiếu 1 tí, só à ri nhá :))

Reply
16:26:00, 14 thg 1, 2011

Em không tìm thấy code trong bước 2 anh xem thử blog của em với

Reply
19:22:00, 14 thg 1, 2011

@Vnnettips Trong blog của em thì bước 2 đặt code trước dòng <p class='postmeta'>

Reply
21:15:00, 14 thg 1, 2011

Không chạy được ban ơi. Anh em ghé qua cho ý kiến trang hoi dap:http://bachkhoatp.blogspot.com

Reply
22:05:00, 14 thg 1, 2011

Thành công rùi hi đúng là thủ thuật độc.Cảm ơn anh nhiều

Reply
01:11:00, 15 thg 1, 2011

Cậu vào kiểm tra dùm mình thử xem,sao hiện lên rồi mà click vào không mở rộng được

Reply
23:28:00, 16 thg 2, 2011

làm phiền anh nữa rồi, cái nút của em cũng không hoạt động!
http://khosachonline.blogspot.com/2011/02/trang-nuoc-chuong-duong-chuong-5.html

Reply
22:35:00, 18 thg 2, 2011

http://www.nguontrithuc.tk/2011/02/nguyet-ma-hoi-09.html
Em áp dụng code này rồi, nhưng sao cái sidebar bên trái thì nó mất đi nhưng nội dung bài viết vẫn vậy, nhờ anh chỉ giùm!

Reply
12:39:00, 21 thg 2, 2011

code uwowcsc 2 của mình như vậy,không biết dán chỗ nào cả.
Cung không tìm thấy thẻ meta ở đâu.


<div class='post-header'>
<div class='post-header-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

</div>

</div>

Reply
黃日河
AUTHOR
15:40:00, 21 thg 2, 2011

@XDNThì đặt sau đoạn code bạn post lên đó chứ đâu nữa bạn

Reply
09:02:00, 21 thg 3, 2011

Chào bạn! Blog mình có mũi tên nhưng không click vào được. Rê chuột tới mũi tên thì không thấy xuất hiện text "Mở rộng" hay "thu hẹp" gì cả?

Reply
09:09:00, 21 thg 3, 2011

Blog bạn đâu, đọc kỹ lại hướng dẫn, đặt k đúng sẽ k hoạt động, đọc mấy nhận xét ở trên để rút kn nha bạn :75)

Reply
10:33:00, 21 thg 3, 2011

http://nghetimcavang.blogspot.com/2011/03/message-to-friends-in-japan_16.html

Mình làm đúng các bước. Nhưng sao chỉ có mũi tên, click vào không được. Hix

Reply
23:06:00, 27 thg 4, 2011

Đã áp dụng tốt thủ thuật này, cảm ơn tác giả nhiều lắm! :55)
Blog của mình: http://www.english123.tk

Reply
13:57:00, 15 thg 2, 2012

Ngu thật. Chẳng biết thẻ head ở đâu cả?
Blog toàn tiếng việt, hướng dẫn toàn tiếng anh, m đã ngu đọc cái này xong thấy ngu hơn.........

Reply
17:56:00, 27 thg 6, 2012

mình ko tìm thấy code như bước 2 :C)
cuối cùng đành chèn vào sau
< div class='post hentry' >
:4)
thấy chỉ có tác dụng ẩn sidebar nhưng bài viết thì vẫn thế. có lẽ tại template mình đã cố định rồi ko mở rộng được nữa.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn