7/12/13

Home » 1.Thủ thuật Blogspot » Tiện ích cho blog » Bài đang xem

Tạo Accordion Widget trong Blogger

Đăng bởi Admin | 7/12/13 | 0 nhận xét
                                                      Accordion Widget cho blogger









Phụ tùng Accordion này là một phiên bản sửa đổi. Nó có Tính năng Mở rộng / Thu hẹp . Widget này giấu tất cả các nội dung bên trong nó theo mặc định nhưng khi người dùng nhấp vào đó, nội dung được hiển thị bằng cách mở rộng phần tab. Tôi chắc chắn bạn sẽ yêu thích nó

Thiết kế một Fancy Accordion Đối với Blogger!

Chỉ cần làm theo từng bước hướng dẫn dễ dàng. Bạn không cần phải lo lắng về vấn đề tương thích trình duyệt bởi vì chúng tôi đã làm tất cả những công việc cho bạn. Các widget tương thích với tất cả các trình duyệt chính bao gồm IE8 +.
Thực hiện theo các bước sau:

  1. 1..Để đi Blogger > Template
  2. 2. Sao lưu mẫu của bạn
  3. 3. Nhấp vào Edit HTML
  4. 4. Tìm kiếm </ head>
  5. 6. Ngay phía trên nó dán đoạn mã sau:
<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>

Lưu ý: Các màu vàng nổi bật đang sản xuất hiệu ứng phản xạ bằng cách sử dụng Plugin nới lỏng. Nếu bạn không muốn quá nhiều hình ảnh động sau đó bạn có thể xóa phần màu vàng của các mã.

    6. Tìm kiếm . </ b: skin>   Click vào mũi tên màu đen để mở rộng mã.
nén kiểu blogger
   7. Dán Styles CSS sau phía trên </ b: skin>:

/*------ Accordion Widget by MBT  -----*/
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;
}

Lưu ý: Việc xem xét và màu sắc của các liên kết và phông chữ có thể được tùy chỉnh bằng cách chỉnh sửa trên các mã. Nhưng màu sắc mặc định sẽ làm việc tốt với bất kỳ chân tối trừ khi chân của bạn có nền màu trắng.
   8. Lưu mẫu của bạn và bạn đang làm tất cả!

Thêm Accordion Blogger Giao diện

Bây giờ bạn cần phải thêm widget của bạn trong phần bố trí và bắt đầu thực hiện một danh sách các series nổi tiếng của riêng bạn hoặc bất kỳ nội dung mà bạn muốn hiển thị bên trong nó.
  1. Tới blogger> Giao diện
  2. Nhấp vào Thêm một tiện ích
  3. Chọn phụ tùng HTML / JavaScript
  4. Dán mã HTML sau đây bên trong nó:

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

      <li class="menu">
  
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<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 TWO -->

<li class="menu">
  
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<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>

Trong đoạn mã trên tôi tạo ra hai tab với 4 hàng mỗi.
  • Thay thế Thanh TAB TITLE đây với tên của danh hiệu danh sách.
  • Thay thế ADD LINK ĐÂY với Liên kết URL của bạn
  • Thay thế ADD LINK TEXT ĐÂY với neo văn bản của bạn
Tôi không nghĩ rằng đoạn mã trên cần được làm rõ hơn. Mỗi phần được đánh dấu để làm cho nó đơn giản hơn để được hiểu rõ. Nếu trong trường hợp bạn muốn thêm một tab khác sau đó chỉ cần thêm đoạn mã sau trên </ ul>

<li class="menu">

<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>
<li class="dropdown1">
<ul> 
<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

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

</li>

Để tăng số lượng hàng chỉ cần giữ thêm dòng mã này:

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

  • Đơn giản chỉ cần thay đổi 1 với số lượng hàng.
    5. Nhấp vào Lưu và bạn đang làm tất cả!
Ghé thăm blog của bạn để xem nó treo chỉ độc đáo trên thanh bên blog của bạn. Nhấp vào tab và chơi với widget Accordion vừa tạo. Đó là của bạn ngay bây giờ! :)

                                                                                                Nguồn: mybloggertricks.com



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

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Đăng ký: Đăng Nhận xét (Atom)
Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva