Thủ thuật này được viết theo
yêu cầu của bạn
Blue79blog, với ý tưởng tạo hiệu ứng ẩn hiện tiện ích trên phần sidebar của blogspot. Thủ thuật này lấy cảm hứng từ style ở trang
cokhi-hui.net (xin lưu ý, ở đây chỉ lấy cảm hứng theo yêu cầu của bạn đọc chứ script không liên quan đến trang cokhi-hui.net).
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/AVvXsEhodBXjCISaropoV3isJa5HrGi96FjEF1PjmjnSY26A_O1tGx5dZU5ZTJ-frbYup_IfxtOUtTYLC8eHSPIdXHaG2p38mDO6lu4zkbgKzV38CZScV2JOIAexiXaUpdWLyw2vlRk8ICIbEmiE/s1600/minus.gif" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9mzLBXmaY7xSgX8yiHlPDsAo0cCo7y9nUTS8-3-VR4AO-FUcijGLdQIkx94F6T20P-8wsq8_cXG711W3wRXGpvT1ScKb0mpufUy0Rlr0OrPja37EPkf7p4-z-2_MghggNn7uR7sqZKAV/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("1"); return false">
<img border="0" id="blockcollapse1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9mzLBXmaY7xSgX8yiHlPDsAo0cCo7y9nUTS8-3-VR4AO-FUcijGLdQIkx94F6T20P-8wsq8_cXG711W3wRXGpvT1ScKb0mpufUy0Rlr0OrPja37EPkf7p4-z-2_MghggNn7uR7sqZKAV/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>
Đây là một tiêu đềThủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.
: 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/AVvXsEhodBXjCISaropoV3isJa5HrGi96FjEF1PjmjnSY26A_O1tGx5dZU5ZTJ-frbYup_IfxtOUtTYLC8eHSPIdXHaG2p38mDO6lu4zkbgKzV38CZScV2JOIAexiXaUpdWLyw2vlRk8ICIbEmiE/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>
Đây là một tiêu đềThủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.
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/AVvXsEgA9mzLBXmaY7xSgX8yiHlPDsAo0cCo7y9nUTS8-3-VR4AO-FUcijGLdQIkx94F6T20P-8wsq8_cXG711W3wRXGpvT1ScKb0mpufUy0Rlr0OrPja37EPkf7p4-z-2_MghggNn7uR7sqZKAV/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>
Đây là một tiêu đề
Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.
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/AVvXsEhodBXjCISaropoV3isJa5HrGi96FjEF1PjmjnSY26A_O1tGx5dZU5ZTJ-frbYup_IfxtOUtTYLC8eHSPIdXHaG2p38mDO6lu4zkbgKzV38CZScV2JOIAexiXaUpdWLyw2vlRk8ICIbEmiE/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>
Đây là một tiêu đề
Thủ thuật Blogger là nơi bạn vừa học tập vừa thực hành về thiết kế website/webblog. Chúng tôi hy vọng sẽ trở thành một ngôi trường nhỏ để bạn góm ghém hành trang bước vào những ngôi trường lớn hơn.
Đế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/AVvXsEjt7k9JpqeSJ6AX8io-BddyxaMbdnG01GzCNUu5cDMfpAMHBDcUoMJJDE2ArZx_wno4ZV12CVquE2BXv39dVC2ads56zL2xuxO6xXFzWlJ96czrbwjz6z3oKcjDiuufWDYo94RIRhy4Wrq9/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é.
Trong quá trình thiết kế weblog trên nền tảng Blogspot, hẳn bạn đã, đang và sẽ vọc rất nhiều script, dẫn đến thực tế là gắn nhiều script vào Template sẽ gây ảnh hưởng đến tốc độ load trang. Có một yêu cầu của bạn đọc về việc làm sao có script gọi được script, tức là gom các file script vào một chỗ rồi đến lúc nào cần script đó hoạt động thì mới gọi nó ra, chứ không cho nó load hết toàn bộ trong trang. Mình viết thủ thuật này theo yêu cầu của bạn 
