thủ thuật hiển thị tiêu đề và ẩn nội dung bài đăng
Trang 1 trong tổng số 1 trang
thủ thuật hiển thị tiêu đề và ẩn nội dung bài đăng
Tuần vừa qua bận nhiều việc nên tôi không có thời gian bổ sung bài viết cho blog. Hôm nay chúng ta lại tiếp tục với một hướng dẫn về hiển thị tiêu đề và ẩn nội dung bài đăng theo nhãn dành cho bạn đọc dùng Blogger mẫu kiểu cũ không muốn hiển thị bài đăng theo cách truyền thống. Với thủ thuật này, khi người đọc bấm vào nhãn muốn xem, các bài đăng trên nhãn này chỉ hiển thị tiêu đề còn nội dung được ẩn đi, người đọc chỉ việc click vào dòng ghi chú để mở hoặc đóng nội dung, rất giống với kiểu Peekaboo dành cho Blogger mới tuy nhiên không có phần tóm tắt.
Các bước tiến hành như sau:
Bước 1. Sao lưu template hiện thời của bạn.
Bước 2. Thêm CSS vào style. Bạn chỉ cần chép đoạn mã dưới chèn giữa hai thẻ <style> và </style>.
.posthidden {display:none}
.postshown {display:inline}
Bước 3. Thêm JavaScript vào header. Bạn sẽ sử dụng đoạn JavaScript dưới đây đưa vào giữa hai thẻ <head> và </head>. Đoạn mã này chứa hàm điều khiển ẩn hiện bài đăng.
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
Bước 4. Cuối cùng bạn chỉ cần vào Edit HTML (Chỉnh sửa HTML) tìm đoạn mã sau:
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
Và thay thế bằng:
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<span class="posthidden" id="<$BlogItemNumber <span class="posthidden" id="<$BlogItemNumber$>1">
amp;gt;1">
<$BlogItemBody$><br />
</span>
<p>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] Ẩn/Hiện bài đăng này</a>
</p>
</div>
Tất nhiên bạn có thể thay đổi đoạn văn bản [+/-] Ẩn/Hiện bài đăng này theo ý thích. Sau khi đưa các đoạn mã trên bạn lưu lại mẫu của mình. Hãy xem cách hiển thị trên blog test: thuthuatblog1.blogspot.com.
Ngoài hiển thị như bài viết này, bạn còn biết cách làm bài đăng chỉ hiển thị phần tóm tắt và ẩn đi phần nội dung mà Khánh đã giới thiệu dành cho Blogger kiểu cũ. Với Blogger kiểu mới, bạn có thể xem bài hướng dẫn trước đây, còn cách hiển thị giống hướng dẫn này sẽ được cập nhật trong thời gian tới.
Với mỗi kiểu có ưu nhược điểm riêng. Ở cách này, bạn không cần thay đổi cấu trúc đăng bài, tuy nhiên không có phần tóm tắt sau tiêu đề. Nhưng được cái lợi là bạn chỉ cần thay đổi một lần trong template của mình.
Các bước tiến hành như sau:
Bước 1. Sao lưu template hiện thời của bạn.
Bước 2. Thêm CSS vào style. Bạn chỉ cần chép đoạn mã dưới chèn giữa hai thẻ <style> và </style>.
.posthidden {display:none}
.postshown {display:inline}
Bước 3. Thêm JavaScript vào header. Bạn sẽ sử dụng đoạn JavaScript dưới đây đưa vào giữa hai thẻ <head> và </head>. Đoạn mã này chứa hàm điều khiển ẩn hiện bài đăng.
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>
Bước 4. Cuối cùng bạn chỉ cần vào Edit HTML (Chỉnh sửa HTML) tìm đoạn mã sau:
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
Và thay thế bằng:
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl>
</h3>
</BlogItemTitle>
<span class="posthidden" id="<$BlogItemNumber <span class="posthidden" id="<$BlogItemNumber$>1">
amp;gt;1">
<$BlogItemBody$><br />
</span>
<p>
<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] Ẩn/Hiện bài đăng này</a>
</p>
</div>
Tất nhiên bạn có thể thay đổi đoạn văn bản [+/-] Ẩn/Hiện bài đăng này theo ý thích. Sau khi đưa các đoạn mã trên bạn lưu lại mẫu của mình. Hãy xem cách hiển thị trên blog test: thuthuatblog1.blogspot.com.
Ngoài hiển thị như bài viết này, bạn còn biết cách làm bài đăng chỉ hiển thị phần tóm tắt và ẩn đi phần nội dung mà Khánh đã giới thiệu dành cho Blogger kiểu cũ. Với Blogger kiểu mới, bạn có thể xem bài hướng dẫn trước đây, còn cách hiển thị giống hướng dẫn này sẽ được cập nhật trong thời gian tới.
Với mỗi kiểu có ưu nhược điểm riêng. Ở cách này, bạn không cần thay đổi cấu trúc đăng bài, tuy nhiên không có phần tóm tắt sau tiêu đề. Nhưng được cái lợi là bạn chỉ cần thay đổi một lần trong template của mình.
Similar topics
» Chiến thuật chế áp phòng không hiện đại (kỳ 1)
» Chiến thuật chế áp phòng không hiện đại (kỳ 2)
» RockMelt -kết nối thế giới Web thông dụng hiện tại với mạng xã hội
» Lời khuyên sử dụng máy quay kỹ thuật số
» 6 lý do khiến khách hàng tiêu dùng sản phẩm của bạn mà không phải đối thủ cạnh tranh
» Chiến thuật chế áp phòng không hiện đại (kỳ 2)
» RockMelt -kết nối thế giới Web thông dụng hiện tại với mạng xã hội
» Lời khuyên sử dụng máy quay kỹ thuật số
» 6 lý do khiến khách hàng tiêu dùng sản phẩm của bạn mà không phải đối thủ cạnh tranh
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|
Tue Sep 09, 2014 9:31 pm by kiskty
» Thiết bị rẻ nhất gọi điện đi Mỹ và Canada miễn phí – MagicJack (900k), Magic Jack Plus (1tr850k)
Tue Jun 26, 2012 3:20 pm by kiskty
» Magic Jack MagicJack Plus - Thiết bị rẻ nhất gọi quốc tế cực rẻ, gọi di Mỹ và Canada miễn phí
Mon Apr 30, 2012 9:44 pm by kiskty
» Cá độ bóng đá, CASINO, POKER trực tuyến tại M88.
Tue Apr 17, 2012 11:23 pm by cuchuoionl
» Cá cược online với M88-Đối tác chính thức của câu lạc bộ Man city
Mon Apr 16, 2012 4:22 pm by cafekhonga
» xembongda.sutvao.com- Trang bóng đá trực tuyến hàng đầu
Fri Apr 13, 2012 3:02 pm by cafekhonga
» xembongda.sutvao.com- website xem bóng đá trực tuyến nhanh nhất
Wed Apr 11, 2012 10:56 pm by cuchuoionl
» Bật mí website xem bóng đá không bị giật
Sun Apr 08, 2012 9:16 pm by cuchuoionl
» Xem bóng đá trực tuyến nhanh nhất-http://xembongda.sutvao.com
Wed Apr 04, 2012 8:18 pm by cuchuoionl