Tạo phong cách hoạt hình jquery Tabs Widget cho Blogger

Đăng bởi Admin | 30/12/13 | 0 nhận xét

Vật dụng tab luôn luôn giúp đỡ để tiết kiệm khong gian cho website . Hướng dẫn này giải thích làm thế nào để thêm phụ tùng tab juery độc đáo  cho blogger. Tôi sử dụng css và jQuery để thực hiện widget này. Tab này làm việc với tất cả các phụ tùng web hiện đại. However của nó không làm việc với trình duyệt IE. Bạn có thể hãy xem trong trang demo để có được ý tưởng như thế nào nó hoạt động. 

Demo

Làm thế nào để thêm jquery hoạt hình Tabs Widget cho Blogger

1. Tới Blogger Bảng điều khiển> Template

2 Tìm ]]> </ b: skin> 
3. Dán mã dưới đây ngay bên dưới nó:

<style>
.b, .c{ display:none;}
.buttons{
    border-bottom:solid #d1c8b8 4px;
    display:block;
    padding:8px;
    width:80px;-moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    text-align:center;
    margin:1px;
    background:#4b7975;
    text-decoration:none; color:#FFFFFF;
    float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#multitab {
    background:#919b9d;
    text-align:justify;
    overflow:hidden;
    color:#fff;
    padding:20px;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;    height:200px;
    width:272px;
}
#multwrap{
    text-align:left;
    overflow:hidden;
    width:350px;
    height:380px;
}
  </style>

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
    $("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{  
    $(".b").css('display' , 'none');
    $(".c").css('display' , 'none');
    $(".a").css('display' , 'none');
  
    $("#first-tab").removeClass('buttonHover');
    $("#second-tab").removeClass('buttonHover');
    $("#third-tab").removeClass('buttonHover');
  
    $("#"+tab).addClass('buttonHover');
    $("."+container).show('slow');
}
// ]]>
</script>
<script charset='utf-8' src='https://bloggertrixcode.googlecode.com/files/jquery1.2.6.js' type='text/javascript'/> 

4. Bây giờ hãy vào blogger Giao diện 
5. Bấm vào Thêm tiện ích và chọn "HTML / Javascript" 
6. Dán mã dưới đây:

<div id="multwrap">
 <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">Tab 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">Tab 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">Tab 3</a>
   <br clear="all" />
      <div id="multitab" align="center">
          <div class="a">
                <em>B</em>logger is a blog-publishing service that allows private or multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. Generally, the blogs are hosted by Google at a subdomain of blogspot.com.  <br />  <br /> Thanks!

                </div>
                <div class="b"><em>L</em>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

                </div>
                <div class="c"><em>S</em>tarting in February 2013 Blogger began integrating user blogs with multiple country specific URL addresses i.e. exampleuserblogname.blogspot.com would be automatically redirected to exampleuserblogname.blogspot.ca in Canada, exampleuserblogname.blogspot.co.uk in the United Kingdom etc. </div>
</div> </div>
</div>

Lưu ý:  Bạn có thể thay bất kỳ văn bản hoặc tab  trên với 3 phong cách và tên khác.
7 Bây giờ lưu  HTML / Javascript " của bạn.

Chúc bạn thành công !...

                                                                                            Theo: bloggertrix.com