Header3

Translate

Xem nhiều nhất

Thứ Sáu, 26 tháng 10, 2012

MULTI TAB WIDGET KIỂU MỚI CHO BLOGGER

07:25
0 nhận xét

Comments

Multi Tabbed Widget là tiện ích được sử dụng khi trên Blog bạn có chứa khá nhiều widget. Một giải pháp thường được các Blogger áp dụng là chia footer-wrapper làm nhiều cột để chứa các widget này.
Tuy nhiên, điều này không phải ai cũng thích, nhất là các blog được thiết kế mang phong cách báo chí. Từ đó mới xuất hiện tiện ích gọi là Multi Tabbed Widget.
Tiện ích này xuất hiện từ khá lâu, mà bắt nguồn từ các Blog sử dụng nền tảng Wordpress, sau đó được các Pro Blogger “bào chế” để áp dụng cho Blogspot.
Sử dụng Multi Tabbed Widget không những giúp tiết kiệm không gian trên Blog, làm cho Blog của bạn trông gọn gàng hơn, mà còn có thể giúp tăng thời gian tải trang cho Blog của bạn do nó kết hợp hai hay nhiều widget làm một.





Các bước thực hiện như sau:
  1. Đăng nhập Blogger >Thiết kế >Chỉnh sửa HTML
  2. Tải xuống mẫu cũ của bạn đề phòng rủi ro
  3. Tìm kiếm ]]></b:skin>
  4. Chèn đoạn code trong file dưới đây (Bạn tải về file TXT và cop đoạn code trong đó dán vào dưới ]]></b:skin>) : Download 
  5. Chèn trên ]]></b:skin> đoạn code dưới đây:



/*----- MBT Multi Tabbed Widget ----*/ 
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px} 
.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:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0i2tX4NBOijetOys5-Re1sShcE3_l8L4jFTrHq05feBoWQAWf7YMxPqXU8xF2NC79dpTrzoEz3p83LoqoQRP7bHb6bAwETC7eq1fVRmm6TzHbz-UzOJL51MwGFu1Lbp81PPROM0sLswI/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;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/AVvXsEh0i2tX4NBOijetOys5-Re1sShcE3_l8L4jFTrHq05feBoWQAWf7YMxPqXU8xF2NC79dpTrzoEz3p83LoqoQRP7bHb6bAwETC7eq1fVRmm6TzHbz-UzOJL51MwGFu1Lbp81PPROM0sLswI/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none} 
.tabs-widget-content{} 
.tabviewsection{margin-top:10px;margin-bottom:10px;}



6.Tìm kiếm   <div class='column-right-inner'> hoặc  <div id='sidebar-wrapper'>


7.Sau đó chèn đoạn code sau đây vào bên dưới chúng:




<div class='tabviewsection'>
<script type='text/javascript'> 
            jQuery(document).ready(function($){ 
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show(); 
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); 
       
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { 
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-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-1432447472-id&quot;).hide(); 
                    var activeTab = $(this).attr(&quot;href&quot;); 
                    $(activeTab).fadeIn(); 
                    return false; 
                }); 
            }); 
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> 
<li><a href='#widget-themater_tabs-1432447472-id1'>Phần mềm</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id2'>Tài liệu</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id3'>Tag Cloud</a></li> 
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'> 
<b:section class='sidebar' id='sidebartab1' preferred='yes'> 
</b:section>                                       
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'> 
<b:section class='sidebar' id='sidebartab2' preferred='yes'> 
</b:section>                                         
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'> 
<b:section class='sidebar' id='sidebartab3' preferred='yes'> 
</b:section>                                        
</div>
</div>
<div style='height:5px;clear:both;'/>


Sửa Phần mềm,Tài liệu,Tag cloud thành tên các Tab  theo ý bạn


7.Vào phần tử trang :Các bạn sẽ thấy






Và các bạn có thể thêm các widget vào theo ý muốn!

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


Tác giả bài viết: Đỗ Trực
Mình chia sẻ những gì mình biết và tham khảo . Hy vọng các bạn sẽ tìm được những thông tin cần thiết trên Blog mình.
Mong nhận được sự đóng góp ý kiến chia sẻ của các bạn
Chúc các bạn vui vẻ !

0 nhận xét:

 
Copyright © 2013 DEMO-CHINHTRUCBLOG All Right Reserved.
Ghi rõ nguồn WwW.ChinhTrucBlog.Blogspot.Com khi phát hành lại thông tin từ trang này.
Xem tốt với Chrome độ phân giải 1024 x 768 pixel.•
Design by Đỗ Trực