Top Ad unit 728 × 90

Best

[Blogger] Tạo Accordion Widget

Home Blogger tips Blogger Widgets Tips - Design [Blogger] Tạo Accordion Widget
, ,
Bài viết này mình sẽ hướng dẫn các bạn một thủ thuật trong Blogger, đó là tạo Accordion Widget, về bản chất nó giống như một dạng dropdown menu dọc. Các bạn có thể xem hình bên. Sau đây là các bước thực hiện thủ thuật:














Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML (bạn nên sao lưu template của mình để đề phòng có lỗi xảy ra trong quá trình thao tác).
Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<script> 
//<![CDATA[ 
$(document).ready(function(){ 
/* This code is executed after the DOM has been completely loaded */ 
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */ 
$.easing.def = "easeOutBounce"; 
/* Binding a click event handler to the links: */ 
$('li.button a').click(function(e){
/* Finding the drop down list that corresponds to the current section: */ 
var dropDown = $(this).parent().next();
/* Closing all other drop down sections, except the current one */ 
$('.dropdown1').not(dropDown).slideUp('slow'); 
dropDown.stop(false,true).slideToggle('slow');
/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */ 
e.preventDefault(); 
})
}); 
// t: current time, b: begInnIng value, c: change In value, d: duration 
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing, 
{ 
def: 'easeOutQuad', 
swing: function (x, t, b, c, d) { 
  //alert(jQuery.easing.default); 
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d); 
}, 
easeInQuad: function (x, t, b, c, d) { 
  return c*(t/=d)*t + b; 
}, 
easeOutQuad: function (x, t, b, c, d) { 
  return -c *(t/=d)*(t-2) + b; 
}, 
easeInOutQuad: function (x, t, b, c, d) { 
  if ((t/=d/2) < 1) return c/2*t*t + b; 
  return -c/2 * ((--t)*(t-2) - 1) + b; 
}, 
easeInCubic: function (x, t, b, c, d) { 
  return c*(t/=d)*t*t + b; 
}, 
easeOutCubic: function (x, t, b, c, d) { 
  return c*((t=t/d-1)*t*t + 1) + b; 
}, 
easeInOutCubic: function (x, t, b, c, d) { 
  if ((t/=d/2) < 1) return c/2*t*t*t + b; 
  return c/2*((t-=2)*t*t + 2) + b; 
}, 
easeInQuart: function (x, t, b, c, d) { 
  return c*(t/=d)*t*t*t + b; 
}, 
easeOutQuart: function (x, t, b, c, d) { 
  return -c * ((t=t/d-1)*t*t*t - 1) + b; 
}, 
easeInOutQuart: function (x, t, b, c, d) { 
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 
  return -c/2 * ((t-=2)*t*t*t - 2) + b; 
}, 
easeInQuint: function (x, t, b, c, d) { 
  return c*(t/=d)*t*t*t*t + b; 
}, 
easeOutQuint: function (x, t, b, c, d) { 
  return c*((t=t/d-1)*t*t*t*t + 1) + b; 
}, 
easeInOutQuint: function (x, t, b, c, d) { 
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 
  return c/2*((t-=2)*t*t*t*t + 2) + b; 
}, 
easeInSine: function (x, t, b, c, d) { 
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 
}, 
easeOutSine: function (x, t, b, c, d) { 
  return c * Math.sin(t/d * (Math.PI/2)) + b; 
}, 
easeInOutSine: function (x, t, b, c, d) { 
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 
}, 
easeInExpo: function (x, t, b, c, d) { 
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
}, 
easeOutExpo: function (x, t, b, c, d) { 
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
}, 
easeInOutExpo: function (x, t, b, c, d) { 
  if (t==0) return b; 
  if (t==d) return b+c; 
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
}, 
easeInCirc: function (x, t, b, c, d) { 
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 
}, 
easeOutCirc: function (x, t, b, c, d) { 
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 
}, 
easeInOutCirc: function (x, t, b, c, d) { 
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 
}, 
easeInElastic: function (x, t, b, c, d) { 
  var s=1.70158;var p=0;var a=c; 
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3; 
  if (a < Math.abs(c)) { a=c; var s=p/4; } 
  else var s = p/(2*Math.PI) * Math.asin (c/a); 
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
}, 
easeOutElastic: function (x, t, b, c, d) { 
  var s=1.70158;var p=0;var a=c; 
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3; 
  if (a < Math.abs(c)) { a=c; var s=p/4; } 
  else var s = p/(2*Math.PI) * Math.asin (c/a); 
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 
}, 
easeInOutElastic: function (x, t, b, c, d) { 
  var s=1.70158;var p=0;var a=c; 
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5); 
  if (a < Math.abs(c)) { a=c; var s=p/4; } 
  else var s = p/(2*Math.PI) * Math.asin (c/a); 
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 
}, 
easeInBack: function (x, t, b, c, d, s) { 
  if (s == undefined) s = 1.70158; 
  return c*(t/=d)*t*((s+1)*t - s) + b; 
}, 
easeOutBack: function (x, t, b, c, d, s) { 
  if (s == undefined) s = 1.70158; 
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 
}, 
easeInOutBack: function (x, t, b, c, d, s) { 
  if (s == undefined) s = 1.70158; 
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
}, 
easeInBounce: function (x, t, b, c, d) { 
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 
}, 
easeOutBounce: function (x, t, b, c, d) { 
  if ((t/=d) < (1/2.75)) { 
   return c*(7.5625*t*t) + b; 
  } else if (t < (2/2.75)) { 
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
  } else if (t < (2.5/2.75)) { 
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
  } else { 
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
  } 
}, 
easeInOutBounce: function (x, t, b, c, d) { 
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; 
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; 
} 
}); 
//]]> 
</script>


* Nếu blog của bạn đã có thư viện JQuery thì xóa đoạn màu xanh đi.
* Đoạn màu vàng là code tạo hiệu ứng bouncing sử dụng Easing Plugin. Nếu bạn không thích có thể xóa đi.


Bước 3: Chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/*------ Accordion Widget by kjmagic.blogspot.com -----*/
ul.container{
    width:275px; 
    margin:0 auto; 
    padding:0px; 
}
 
li.menu{
    padding:5px 0; 
    width:100%;
}
li.button a{
    display:block; 
    font-family: Arial, sans-serif,Helvetica; 
    font-size:12px; 
    overflow:hidden; 
    padding:0px 0px 5px 0; 
    position:relative; 
    width:100%; 
        text-transform:capitalize; 
}
li.button a:hover{
    text-decoration:none!important; 
}
li.button a span{ 
    
    right:0px; 
        top:0px; 
    position:absolute; 
    color:#ccc; 
    display:block; 
}

.dropdown1{
    display:none; 
    padding-top:5px; 
    width:100%; 
}
.dropdown1 li{ 
    
    
    
border:1px solid #7E7E7E; 
    color:#CCCCCC; 
    margin:5px 0; 
    padding:4px 10px; 
        
}
.dropdown1 li:hover { 
border:1px solid #ccc; 
text-decoration:none; 
}

.dropdown1 li a:hover { 
text-decoration:none; 
}


Bước 4: Lưu template. Vào Bố cục, tạo một tiện ích HTML/JavaScript và dán đoạn code bên dưới vào:

<ul class="container"> 
      
     
<!-- TAB 1 -->

      <li class="menu"> 
      
          <ul> 
            <li class="button"><a href="#" >Tiêu đề tab 1<span>▼</span></a></li>             
            <li class="dropdown1">

                <ul> 
<li>1. <a  href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li> 
<li>2. <a  href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
                </ul> 
            </li>
          </ul> 
          
      </li>
 
<!- TAB 2 -->

<li class="menu"> 
      
          <ul> 
            <li class="button"><a href="#" >Tiêu đề tab 2<span>▼</span></a></li>
            <li class="dropdown1"> 
                <ul> 
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li> 
<li>2. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>
<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

                
             </ul> 
            </li>
          </ul> 

      </li>
 
  
  </ul>


* Nếu muốn thêm tab các bạn chỉ cần chèn thêm đoạn code sau vào trước thẻ </ul> màu cam.
* Thay đổi các đoạn ADD LINK HERE (url của tab) và ADD LINK TEXT HERE (tên tab) cho phù hợp.


Chúc các bạn thành công !
Blogger Comments
Facebook Comments

Không có nhận xét nào:

Đăng ký: Đăng Nhận xét (Atom)
Hình ảnh chủ đề của fpm. Được tạo bởi Blogger.