Thêm Widget theo nhiều thẻ trong một Tab cho Blogger (style3)

Đăng bởi Admin | 25/10/13 | 13 nhận xét

Các vật dụng trên một Blog Wordpress chắc chắn được thiết kế và mã hóa nhưng thậm chí họ còn tốt hơn khi chúng được bloggerized và thực hiện tương thích để làm việc trong Blogger. Bài trước Thu thuat vi tinh đã hướng dẫn tạo ra chi tiết nhiều Widget theo thẻ, hôm nay Thu thuat vi tinh tiếp tục giới thiệu thêm một tiện ích đa tab. Điều tốt nhất về tiện ích này là bạn có thể thêm nhiều vật dụng như bạn muốn trong một Tab duy nhất mà bạn không thể làm trước đây.  CSS và các hiệu ứng Jquery được thêm vào thời gian này để chế độ xem tab và người viết đã cố gắng một lần nữa để thực hiện cài đặt của nó dễ dàng có thể. Do đó, không trì hoãn thêm nữa và tìm hiểu cách thêm một widget tabber chuyên nghiệp đến các blog Blogger miễn phí của bạn.



Live Demo

Làm thế nào để Thêm Widget này theo nhiều thẻ cho Blogger?

Tôi đã chia các hướng dẫn trong ba bộ phận là,

1. Thêm JQuery và JavaScript để mẫu Blogger của bạn
2. Thêm CSS
3. Thêm HTML

1 - Bổ sung thêm JQuery và JavaScript để mẫu Blogger của bạn

1. Về Blogger> Thiết kế> Chỉnh sửa HTML
2. Sao lưu mẫu của bạn
3. Tìm kiếm ]]> </ b: skin>
4. Ngay bên dưới dán đoạn mã sau -> MBT đơn Tabs JavaScript 
5. Lưu mẫu của bạn
6. Thực hiện!

2 - Thêm CSS

1. Bên trong mẫu tìm kiếm của bạn cho ]]> </ b: skin> lại
2. Ngay phía trên nó dán mã dưới đây:

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Đơn giản chỉ cần thay thế # A46F38 với Bảng mã màu TẠI ĐÂY của mẫu của bạn để các tab có thể pha trộn hoàn hảo vào mẫu của bạn.

3 - Thêm HTML

1. Bây giờ Tìm <div id='sidebar-wrapper'>
2. Hãy chắc chắn rằng hộp vật dụng không được đánh dấu.
3. Ngay dưới <div id='sidebar-wrapper'> dán mã dưới đây,

<div class='MBT-tabviewsection'>

<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                    $(this).addClass(&quot;MBT-tabs-current&quot;);
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                 
</div>   

<div style='clear:both;'/>  
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                   
</div>   

  
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                  
</div>

</div>
<div style='clear:both;'/>

Xin Thay Subscribe, Latest Tricks và Search với tiêu đề Widget của bạn mà bạn sẽ được bổ sung thêm.
   4. Bây giờ Về trang yếu tố. Bạn sẽ thấy một cái gì đó như thế này:

Bắt đầu thêm các vật dụng của bạn và sau khi bạn đã thêm tất cả các vật dụng của bạn sau đó chỉ cần xem blog của bạn để xem nó trong hành động.

Thật đơn giản phải không nào? Nếu thấy bài viết có ích, hãy cho Thu thuat vi tinh  1  like tại trang chủ nha.

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

Xem thêm:

Tạo một Tab tích hợp nhiều widget cho blog

Tạo một Tab chứa nhiều Widget cho blog ( style 2)

                                                                                                     Nguồn: mybloggertricks.com