Thêm tiện ích Stylish Jquery Animated Tabs cho blogger

1:21 PM

Tiện ích Widget Tab luôn giúp cho việc tiết kiệm khoảng không gian cho blog của chúng ta.Ở bài viết này mình sẽ hướng dẫn cách làm thế nào để thêm tiện ích Tab Widget này vào blog của bạn. Chúng ta có thể dùng cách thêm một vài trang cho tiện ích Tab Widget này. Jquery tab rất phong cách và rất phổ biến cho blogger.Đây là là một tiện ích jquery tab đơn giản. Tôi sử dụng CSS và jQuery để làm nên tiện ích này. Tiện ích này hoạt động tốt trên các trình duyệt mới nhất hiện nay. Tuy nhiên nó không hoạt động tốt trên trình duyệt IE. Bạn có thể xem trang demo bên dưới để xem cách thức hoạt động của tiện ích này.

Bước 1: Đăng nhập vào tài khoản blogger của bạn và chọn trình "Thiết Kế"=> chọn tiếp "Chỉnh sữa HTML".

Bước 2: Tìm đoạn code sau ]]></b:skin>
Bước 3: Dán đoạn code dưới đây vào sau đoạn code vừa tìm được ở trê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'/>

Bước 4: Lưu mẫu lại.

Bước 5: Chọn tiếp mục Layout( Bố Cục) giống như hình bên dưới nhé!

Bước 6: Chọn "thêm tiện ích"(Add Widget) và chọn tiếp HTML/Javascript.
Bước 7: Dán đoạn code dưới đây vào.

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