Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_010Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_011Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_012
Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_013[KiNg]_[PiN]-BBThủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_014
Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_015Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_016Thủ thuật yêu cầu: Ẩn hiện tiện ích trên sidebar  Thtx_017
•Bang Chủ•

[KiNg]_[PiN]-BB

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é.

http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Create a forum on Forumotion | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải