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>.
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/AVvXsEh9owVgeBSYIuW7te_q3kuIp738IAswrKCbJnVFqlRSJHBNlaV_vRS6J9eDVvcg5L-ZUmqDmUHaaS_K_eMKhHlLneB8Wb366RB0Pu4a9eZc1-nAJApJRg5p96WQ9CmQTNdH_MeRPowRq53W/s1600/minus.gif"
:
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRbqkKcjoccNJG4WSSFd3gxgVaPyXq8u0StkxVft4URUXvtSsWNysGiyEmGwBQVFK0CvWtZUAExjYlOBqnnebrkN2vJG8kga0agAnYWXXKbWzdkUYUyZii7asjEDFvFQqQzSAVTpPZh_B/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 đề.
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("1"); return false">
<img border="0" id="blockcollapse1"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRbqkKcjoccNJG4WSSFd3gxgVaPyXq8u0StkxVft4URUXvtSsWNysGiyEmGwBQVFK0CvWtZUAExjYlOBqnnebrkN2vJG8kga0agAnYWXXKbWzdkUYUyZii7asjEDFvFQqQzSAVTpPZh_B/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("2"); return false">
<img border="0" id="blockcollapse2"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9owVgeBSYIuW7te_q3kuIp738IAswrKCbJnVFqlRSJHBNlaV_vRS6J9eDVvcg5L-ZUmqDmUHaaS_K_eMKhHlLneB8Wb366RB0Pu4a9eZc1-nAJApJRg5p96WQ9CmQTNdH_MeRPowRq53W/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("3"); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse3"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRbqkKcjoccNJG4WSSFd3gxgVaPyXq8u0StkxVft4URUXvtSsWNysGiyEmGwBQVFK0CvWtZUAExjYlOBqnnebrkN2vJG8kga0agAnYWXXKbWzdkUYUyZii7asjEDFvFQqQzSAVTpPZh_B/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("4"); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse4"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9owVgeBSYIuW7te_q3kuIp738IAswrKCbJnVFqlRSJHBNlaV_vRS6J9eDVvcg5L-ZUmqDmUHaaS_K_eMKhHlLneB8Wb366RB0Pu4a9eZc1-nAJApJRg5p96WQ9CmQTNdH_MeRPowRq53W/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 != ""'>
<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("1"); return false'><b:if cond='data:title != ""'>
<h2 class='title'><img border='0' id='blockcollapse1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinnBv2Xh5JxzQ3ubYvQpTtDPUoMvG8TptuA687sX5OjIi8f0eoPGIHYEnwQ3-XNimfAz433YFksDuIfBTH9KVYwei6kdyEeJeKHAnA2TyLKtZjrP38ZQPlwVTZ2RINa1CfM709vr88yZX/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!