Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar

Đoạn code dùng để ản hiện một tiện ích trên Sidebar do thuthuatblog viết

Xem Demo.

Bây giờ chúng ta cùng bắt đầu thực hành nhé.

Bước 1. Sử dụng javascript bên dưới để tạo hiệu ứng, đặt code trước thẻ </head>.

<script type="text/javascript">
//<![CDATA[
// Hide and Show Toggle Effect Script. Please keep www.thuthuatblogger.info source for your using in any ways
function toggle( targetId )
{
var state = 0;
var blockname = "block" + targetId;
var blockimage = "blockcollapse" + targetId;
if ( document.getElementById ) {
target = document.getElementById( blockname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}
document.getElementById( blockimage ).src = state ? 
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiompI0OzOM4oeAseAjFMsHTvNlNE4pV_FOKOYt6KATFdk4YvlCEZ0WvGSvi5zfWElFAUIQeuMR14mnGP5o7Cq2wT4HhdaPMQOIJe7WY0X0PAZVgF-jGYFWq3hPiK5WhoqO4hdVyH2fhXv2/s1600/minus.gif"
 :  
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzuM1jmB5CA5qMWCC8YsiMRQ2Lb77B8_7fzw5lX3c0QJboo2x_24Tnsbd8-Rhlq5_3vZNUAFN8-rzftnSMPQWIpnKRBMGMJxUXKiNVjWOgWfr1tAOwuMEaP334S_TUnKP_wXxNsGk8yfk/s1600/plus.gif";
}
}
//]]>
</script>

Bước 2. Thiết lập cấu trúc HTML theo các trường hợp sau đây (áp dụng chung cho website và blogspot):

Trường hợp 1: Nội dung được ẩn, nhấn nút show/hide để hiện nội dung, nút show/hide nằm nằm bên trái tiêu đề.

<a href="javascript: void(0);" onclick="toggle(&quot;1&quot;); return false">
<img border="0" id="blockcollapse1" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzuM1jmB5CA5qMWCC8YsiMRQ2Lb77B8_7fzw5lX3c0QJboo2x_24Tnsbd8-Rhlq5_3vZNUAFN8-rzftnSMPQWIpnKRBMGMJxUXKiNVjWOgWfr1tAOwuMEaP334S_TUnKP_wXxNsGk8yfk/s1600/plus.gif"
 style="margin-right: 5px;" />Đây là một tiêu đề</a>
<div id="block1" style="display: none;">
Đây là một đoạn văn bản hoặc một hình ảnh …
</div>

Trường hợp 2: Nội dung được hiện, nhấn nút show/hide để ẩn nội dung, nút show/hide nằm bên trái tiêu đề

<a href="javascript: void(0);" onclick="toggle(&quot;2&quot;); return false">
<img border="0" id="blockcollapse2" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiompI0OzOM4oeAseAjFMsHTvNlNE4pV_FOKOYt6KATFdk4YvlCEZ0WvGSvi5zfWElFAUIQeuMR14mnGP5o7Cq2wT4HhdaPMQOIJe7WY0X0PAZVgF-jGYFWq3hPiK5WhoqO4hdVyH2fhXv2/s1600/minus.gif"
 style="margin-right: 5px;" />Đây là một tiêu đề</a>
<div id="block2">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>

Trường hợp 3. Nội dung được ẩn, nhấn nút show/hide để hiện nội dung, nút show/hide nằm bên phải tiêu đề.

<a href="javascript:  void(0);" onclick="toggle(&quot;3&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse3" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzuM1jmB5CA5qMWCC8YsiMRQ2Lb77B8_7fzw5lX3c0QJboo2x_24Tnsbd8-Rhlq5_3vZNUAFN8-rzftnSMPQWIpnKRBMGMJxUXKiNVjWOgWfr1tAOwuMEaP334S_TUnKP_wXxNsGk8yfk/s1600/plus.gif"
 style="margin-left: 5px;" />
</a>
<div id="block3" style="display: none;">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>

Trường hợp 4. Nội dung được hiện, nhấn nút show/hide để ẩn nội dung, nút show/hide nằm bên phải tiêu đề.

<a href="javascript:  void(0);" onclick="toggle(&quot;4&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse4" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiompI0OzOM4oeAseAjFMsHTvNlNE4pV_FOKOYt6KATFdk4YvlCEZ0WvGSvi5zfWElFAUIQeuMR14mnGP5o7Cq2wT4HhdaPMQOIJe7WY0X0PAZVgF-jGYFWq3hPiK5WhoqO4hdVyH2fhXv2/s1600/minus.gif"
 style="margin-left: 5px;" />
</a>
<div id="block4">
Đây là một đoạn văn bản hoặc một hình ảnh…
</div>

Đến đây là phần quan trọng đối với blogspot, áp dụng để tạo hiệu ứng ẩn hiện đối với tiện ích trên blogspot. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ thực hiện Bước 1 xong). Xác định ID của một tiện ích và tìm đến đoạn code của nó, ví dụ đối với tiện ích có ID là HTML1:

<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> 

Chỉnh code của tiện ích đó lại như bên dưới. Ở đây mình áp dụng cho trường hợp 1, các trường hợp còn lại bạn có thể tự thực hiện.

<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->

<a href='javascript: void(0);' onclick='toggle(&quot;1&quot;); return false'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><img border='0'  id='blockcollapse1'  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo44MX7TdBmuqCTXtaDqf7-5qLSlW1Ne1Zty2CbVODxAIbMemBpmEQb1NM14sWAcEEIWpaG-ity6L_AqG10Fxd6d-3Z9QuJg46kOQluw2bdCkHZd0YBRskwUVsKmr7XNo1HxV-TM79owjc/s1600/mas.gif'  style='margin-right: 5px;'/><data:title/></h2>
</b:if></a><div id='block1' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div> </div>
</b:includable>
</b:widget>

Lưu Template là xong. Bạn có thể sử dụng cấu trúc tương tự như trên để vận dụng cho nhiều tiện ích khác nhau nhé.

Chúc thành công!

Chủ đề:
Blogspot-tips