Hướng dẫn tạo Tabs cho blogpsot

Bước 1 : Chèn code CSS :


.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#4F4E42;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEK7uN1hqMbbPXv2hYXFfoVSqctEXuqU1ZH3_ol8fYhcNheFtI9Cz8JoCtoIDFnBbp72eHwd8TKJ1fgWK-JmUb9JWRhsuqypIvVhfqfKMzpjpk0XbCudkwdT8zmn8PxWbSsdrpwQQPbwsb/s1600/tabs-bg.png) left top repeat-x;padding:5px 10px 4px 10px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEK7uN1hqMbbPXv2hYXFfoVSqctEXuqU1ZH3_ol8fYhcNheFtI9Cz8JoCtoIDFnBbp72eHwd8TKJ1fgWK-JmUb9JWRhsuqypIvVhfqfKMzpjpk0XbCudkwdT8zmn8PxWbSsdrpwQQPbwsb/s1600/tabs-bg.png) left -126px repeat-x;color:#fff;text-decoration:none}
.tabs-widget-content{background:none}
.tabviewsection{margin-top:0px;margin-bottom:2px;}

Bước 2 : Chèn code sau vào vị trí muốn Tabs hiển thị :

<div class='tabviewsection'>

<script type='text/javascript'>

            jQuery(document).ready(function($){

                $(&quot;.tabs-widget-content-widget-themater_tabs-844379150-id&quot;).hide();

            $(&quot;ul.tabs-widget-widget-themater_tabs-844379150-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();

            $(&quot;.tabs-widget-content-widget-themater_tabs-844379150-id:first&quot;).show();

       

            $(&quot;ul.tabs-widget-widget-themater_tabs-844379150-id li a&quot;).click(function() {

            $(&quot;ul.tabs-widget-widget-themater_tabs-844379150-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); 

            $(this).addClass(&quot;tabs-widget-current&quot;); 

            $(&quot;.tabs-widget-content-widget-themater_tabs-844379150-id&quot;).hide(); 

               var activeTab = $(this).attr(&quot;href&quot;); 

               $(activeTab).fadeIn();

            return false;

            });

            });

        </script>

     <ul class='tabs-widget tabs-widget-widget-themater_tabs-844379150-id'>

<li><a href='#widget-themater_tabs-844379150-id1'>Trang tin</a></li>

<li><a href='#widget-themater_tabs-844379150-id2'>Dịch vụ</a></li>

<li><a href='#widget-themater_tabs-844379150-id3'>Quy trình</a></li>

<li><a href='#widget-themater_tabs-844379150-id4'>Mẫu thiết kế</a></li>

<li><a href='#widget-themater_tabs-844379150-id5'>Khách hàng</a></li>

<li><a href='#widget-themater_tabs-844379150-id6'>Khuyến mãi</a></li>

<li><a href='#widget-themater_tabs-844379150-id7'>Dự án mới</a></li>

</ul> 

 

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id1'>

<b:section class='sidebar' id='sidebartab1' preferred='yes'/>                                       

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id2'>

<b:section class='sidebar' id='sidebartab2' preferred='yes'/>                                       

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id3'>

<b:section class='sidebar' id='sidebartab3' preferred='yes'/>                                       

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id4'>

<b:section class='sidebar' id='sidebartab4' preferred='yes'/>                                       

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id5'>

<b:section class='sidebar' id='sidebartab5' preferred='yes'/>                                       

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id6'>

<b:section class='sidebar' id='sidebartab6' preferred='yes'/>                                       

</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-844379150-id' id='widget-themater_tabs-844379150-id7'>

<b:section class='sidebar' id='sidebartab7' preferred='yes'/>                                       

</div> 

</div>

Vậy là xong chúc bạn thành công!

Sản phẩn thủ thuật của     www.nsvina.com

SHARE

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn

• 
• 
• 
• 
•