• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

10
31/07/2011

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 ? "http://1.bp.blogspot.com/-8ti9yxtCHGQ/TjUTkeROb1I/AAAAAAAAAgo/u3N8kGWKEhg/s1600/minus.gif" : "http://1.bp.blogspot.com/-OTGz_ZpUKOM/TjUTh65U5dI/AAAAAAAAAgk/yiNcTTp09AI/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="http://1.bp.blogspot.com/-OTGz_ZpUKOM/TjUTh65U5dI/AAAAAAAAAgk/yiNcTTp09AI/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(&quot;2&quot;); return false">
<img border="0" id="blockcollapse2" src="http://1.bp.blogspot.com/-8ti9yxtCHGQ/TjUTkeROb1I/AAAAAAAAAgo/u3N8kGWKEhg/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(&quot;3&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse3" src="http://1.bp.blogspot.com/-OTGz_ZpUKOM/TjUTh65U5dI/AAAAAAAAAgk/yiNcTTp09AI/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(&quot;4&quot;); return false">
Đây là một tiêu đề<img border="0" id="blockcollapse4" src="http://1.bp.blogspot.com/-8ti9yxtCHGQ/TjUTkeROb1I/AAAAAAAAAgo/u3N8kGWKEhg/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 != &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='http://2.bp.blogspot.com/_WvACVGW1iPE/TJkgxGifEvI/AAAAAAAABWY/3kBVCMnoalA/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é.

{10 bình luậnAdd yours ?}

20:19:00, 31 thg 7, 2011

Em cảm ơn anh, nhưng không phải ý em rồi. Ý em mong muốn là ẩn nguyên cái sidebar để phần nội dung tràn ra bên trái. Đặc trưng của forum VBB 4.x đó anh!

Reply
20:22:00, 31 thg 7, 2011

@blue79demo1 Cái này na ná thủ thuật mở rộng hay thu hẹp sidebar đó anh Hà. :51)

Reply
20:29:00, 31 thg 7, 2011

Chắc cái thủ thuật đó gần giống với cái này http://www.thuthuatblogger.info/2011/01/button-to-expand-content-and-hide.html

Tuy không đúng ý bạn nhưng thủ thuật này vẫn rất hay.:55)

Reply
20:42:00, 31 thg 7, 2011

mình muốn anh Hà cải tiến 2 nút thu hẹp và mở rộng nằm ở một vị trí giống cái nút chức năng này: http://cokhi-hui.net/diendan/images/misc/tab-collapsed-left.png
Đặc trưng của forum VBB 4.x

Reply
20:52:00, 31 thg 7, 2011

ban thay link
http://bit.ly/dFogbx
bằng link này
http://cokhi-hui.net/diendan/images/misc/tab-collapsed-left.png

thay link
http://bit.ly/hLiV5F
bằng cái này
http://cokhi-hui.net/diendan/images/misc/tab-expanded-left.png

nếu xấu thì chỉnh lại cho đẹp :51)

Reply
20:54:00, 31 thg 7, 2011

có đảm bảo 2 cái này nằm ở một vị trí hem? như cái nút bên diễn đàn đó

Reply
20:59:00, 31 thg 7, 2011

nó nằm đối "đít" nhau :51). Nếu muốn nằm cùng một vị trí phải nhờ bác Hà chỉnh code lại :67)

Reply
21:57:00, 31 thg 7, 2011

Ẩn Sidebar tương tự thế này chứ ji
http://forexviet.org/forum/forum.php

Reply
22:07:00, 31 thg 7, 2011

@ Blue79blog: À thì ra là cái hiệu ứng bên trái. Hi hi, nhờ hiểu lầm mà thêm 1 TUT nữa để ae xài. Thôi được, a sẽ giải đáp ở TUT kế tiếp nhé e.

Reply
18:50:00, 30 thg 12, 2011

bài này hay lắm anh à >hjj

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn