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/AVvXsEgexUDh4eF2uVmSeh8-4VQIqSXHvGQg04hxWrI_aZVxN5nWh0P5XpTId-kMe16_fbpx0ctIKQsllK_UkkpAi0jsEuyAvdgOYkYbRImwp3iQ2IKACe9nmzppxgf66Sqkc5GIUi4vuvF_QoNP/s1600/minus.gif" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRcZD1bHOujkpLSjpZ2DmBDJab0CN04DT6JsYybRBRpCPuObob8p6ELatI1cGzhkvg2WOSzUD8scJx0Lohs3Dv0L3TOeuLlBqptIKXG3flVQOf-S4UiUS-g7VmRrl-cEe9T2w4OVmJZS2l/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/AVvXsEhRcZD1bHOujkpLSjpZ2DmBDJab0CN04DT6JsYybRBRpCPuObob8p6ELatI1cGzhkvg2WOSzUD8scJx0Lohs3Dv0L3TOeuLlBqptIKXG3flVQOf-S4UiUS-g7VmRrl-cEe9T2w4OVmJZS2l/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 đề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/AVvXsEgexUDh4eF2uVmSeh8-4VQIqSXHvGQg04hxWrI_aZVxN5nWh0P5XpTId-kMe16_fbpx0ctIKQsllK_UkkpAi0jsEuyAvdgOYkYbRImwp3iQ2IKACe9nmzppxgf66Sqkc5GIUi4vuvF_QoNP/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.
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/AVvXsEhRcZD1bHOujkpLSjpZ2DmBDJab0CN04DT6JsYybRBRpCPuObob8p6ELatI1cGzhkvg2WOSzUD8scJx0Lohs3Dv0L3TOeuLlBqptIKXG3flVQOf-S4UiUS-g7VmRrl-cEe9T2w4OVmJZS2l/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 đề
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/AVvXsEgexUDh4eF2uVmSeh8-4VQIqSXHvGQg04hxWrI_aZVxN5nWh0P5XpTId-kMe16_fbpx0ctIKQsllK_UkkpAi0jsEuyAvdgOYkYbRImwp3iQ2IKACe9nmzppxgf66Sqkc5GIUi4vuvF_QoNP/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'>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: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>
<b:widget id='HTML1' locked='false' title='Đây là tiêu đề tiện ích 1' type='HTML'>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é.
<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/AVvXsEgdXqVAyH-EK5lFj8tVM6N3b8oSTnI3rOpnJbar8lJXVdw42RiaHzTN6_KWT6Odks6WOuZLB2n_SlwajMvW0cQxYKYyExL6HPwQZKsm_YZJg29uexhVplUoJgni5tx0N7Hc7PGct9XSCnfA/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>
Bạn muốn chung sức cùng 
Trong cấu trúc bố cục XML của Blogger Template, có nhiều thẻ khác nhau bạn có thể sử dụng để gộp các mảng dữ liệu riêng biệt trong Template. Tất cả chúng được định dạng là <data:name/> hoặc <data:name1.name2/>, trong đó name là tên của mảng dữ liệu riêng biệt mà bạn muốn sử dụng. Trong ví dụ name1.name2, thì name2 là một hạng mục riêng trong một bộ dữ liệu được gọi là name1, ví dụ trong thẻ <data:post.body/> thì body là phần nói về thân chứa của bài viết.
Kể từ khi 
Nếu bạn muốn website/webblog của mình có một thứ hạng cao trên các trang kết quả công cụ tìm kiếm (SERPs), bạn hãy chắc chắn rằng trang web của bạn đã được tối ưu hóa, trong đó URL là một yếu tố không thể thiếu. Tại sao phải tối ưu hóa URL? Nguyên do đầu tiên phải tối ưu hóa URL đó là sẽ giúp bạn tăng thứ hạng trên bảng SERPs, kế đến là khi người dùng đọc được URL của bạn, tỷ lệ nhấp chuột sẽ cao hơn và cuối cùng một khi URL được tối ưu hóa, người dùng có thể nhớ và gõ lại URL đó nếu họ muốn quay trở lại.
Căn cứ vào nhu cầu phát triển trong thời gian tới, sau một thời gian sử dụng tên miền tùy chỉnh miễn phí (Bloggerism.tk), quản trị blog 
Có một số cách để bạn theo dõi bài viết mới nhất từ các blog đó là đăng ký nhận tin cập nhật RSS qua email, đối với blogspot thì có thể theo dõi qua Google Connect. Từ phương diện này, mình sáng tạo tùy biến tiện ích Blog List (Danh sách Blog) để tạo ra tiện ích có chức năng cập nhật bài viết mới nhất của những blog bạn ưa thích. Tiện ích này hiển thị ảnh đại diện bài viết (có thuộc tính title là khoảng cách thời gian tính từ thời điểm bài viết được đăng cho đến thời điểm hiện tại), tiêu đề bài viết có thuộc tính title là đoạn trích dẫn bài viết (snippet), faviicon của blog kèm theo tiêu đề blog.
