Tab menu chứa widget cho Blogger - Blogspot

How to create tab menu widget for Blogger
Tab giúp chúng ta tinh gọn được việc hiển thị nhiều nội dung trong một vùng nhất định, do đó tiết kiệm không gian cho site và làm cho site trở nên chuyên nghiệp hơn. Article này, s chia sẻ cùng các bạn cách tạo ta tab menu chứa các widget tùy ý cho Blogger. Thủ thuật này yêu cầu một chút hiểu biết về HTML trong cấu trúc Blog của chính bạn.

#bl2 Trước khi tạo menu tab, bạn hãy chắc rằng blog của chúng ta đã có thư viện jQuery. Nếu chưa có bạn hãy chèn đoạn code sau trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

#bl2 Và đây là phần quan trọng nhất trong article này, do can thiệp sâu đến giao diện nên đòi hỏi các bạn phải am hiểu cấu trúc HTML của blog mình, mục tiêu là để xác định được vị trí đặt tab menu. Khi đã xác định được vị trí, mọi chuyện trở nên khá đơn giản. Bạn chỉ còn copy và paste đoạn code sau vào vị trí đó mà thôi.
#bl2 Đầu tiên là đoạn xử lý bằng jQuery

<script type='text/javascript'>
            jQuery(document).ready(function($){
    // Khởi tạo tabs
                $(".tabs-widget-content").hide();
             $("ul.tabs-widget-container li:first").addClass("tabs-widget-current");
            $(".tabs-widget-content:first").show();
    // Sự kiện tabs
             $("ul.tabs-widget-container li a").click(function() {
              $("ul.tabs-widget-container li").removeClass("tabs-widget-current");                        
              $(this).parent().addClass("tabs-widget-current");                       
              $(".tabs-widget-content").hide(); 
     var activeTab = $(this).attr("href"); 
     $(activeTab).fadeIn(1000);
                             // Xử lý sự cố chiều cao của frame
                         $("#tab-id3 iframe").removeAttr("style"); 
           $("#tab-id3 iframe").css({'width':'100%','height':'340px'}); 
               return false;
             });
            });
</script>

Lưu ý: Khi chèn widget (vd: Recent comment, Popular post...), nếu gặp tình trạng chiều cao của tab quá lớn, bạn có thể xử lý nó ở phần // Xử lý sự cố chiều cao của frame. Cụ thể #tab-id3 là id tab chứa widget, 'height':'340px' là chiều cao bạn cần hiển thị.
#bl2 Tiếp đến là đoạn HTML

<div class='sidebar-e' id='vertical-tab-menu-cont' style='display:block; margin: 10px 0;'>
<div class='sidebar-e' id='table-vertical-tab-top'>
 <ul class='tabs-widget tabs-widget-container'>
  <li><a href='#tab-id1'>Bài nổi bật</a></li>
  <li><a href='#tab-id2'>Bài đăng mới</a></li>
  <li><a href='#tab-id3'>Bình ngẫu nhi</a></li>
 </ul>
</div>
<div class='sidebar-e' id='table-vertical-tab-main'>
 <div class='tabs-widget-content' id='tab-id1'>
  <b:section class='tabs' id='sl-tab1' maxwidgets='1' showaddelement='yes'/>
 </div>
 <div class='tabs-widget-content' id='tab-id2'>
  <b:section class='tabs' id='sl-tab2' maxwidgets='1' showaddelement='yes'/>
 </div>
 <div class='tabs-widget-content' id='tab-id3'>         
  <b:section class='tabs' id='sl-tab3' maxwidgets='1' showaddelement='yes'/>
 </div>
</div>
<div class='sidebar-e' id='table-vertical-tab-bottom'/>
</div>

#bl2 CSS style cho đoạn HTML trên.

ul.tabs-widget-container{
list-style: none;
padding: 0px;
margin: 0px;
height: 60px;
width:290px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFdG2Z32k-thabdudVNjoII1Z36-KvwcZ2SVOqziP4zjTGD8sdHswgtMK1B1M_akuoFuFWFgnvulfWmEAVJPJWkMC8XlfQzpAy7byQU1rQy_okEqQX2Z15CLveF9dWd53oXo61WXkTI_wz/s61/bg-tab-menu-sidebar.png) repeat-x center top;
position: relative;
border-top: 3px solid #666;
}
ul.tabs-widget-container li {
float: left;
padding: 0px 0px 15px;
width:33.3%;
}
ul.tabs-widget-container li a {
 text-align: center;
display: block;
line-height: 42px;
padding: 0px 1px;
font-family: Times New Roman;
font-size: 15px;
text-shadow: 1px 1px 3px #EEE;
word-spacing: -1px;
color: #444;
font-weight: bold;
}
ul.tabs-widget-container li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgleLDDH2qPC22lxFoXAPNn0ErkE-LiSbPRj0BaU5Uugz3g-GOyq2Q3Vqq6-rWKoxfSU5ttnHXxY-YFAIBOZ3eT3jPSFl8e7dMbRg1fsLpUxsaepQ8oqPMUrtkzPu7E0cTfxwkugXxgDVXW/s95/bg-tab-menu-sidebar-hover3.png) no-repeat center 3px;
}
li.tabs-widget-current {
background: url(https://lh6.googleusercontent.com/-wi_UqBf9NtE/T60I1MOw0TI/AAAAAAAACUs/EFn5lJ_6GWM/s30/tick.jpg) no-repeat center 43px;
}
a.tabs-widget-current2 {
background: url(https://lh4.googleusercontent.com/--nlm0PshPKE/T61LqETO8YI/AAAAAAAACVo/j3eeByvsfZc/s45/bg-tab-menu-sidebar-hover2.png) repeat-x center 0px;
}
#table-vertical-tab-top {
background: url(https://lh6.googleusercontent.com/-J59-v8qVnfM/T60I06AFdQI/AAAAAAAACUo/hl4z8I8cUss/s300/table-tab-sidebar2.png) 0px top repeat-y;
}
#table-vertical-tab-main
{
background: url(https://lh6.googleusercontent.com/-J59-v8qVnfM/T60I06AFdQI/AAAAAAAACUo/hl4z8I8cUss/s300/table-tab-sidebar2.png) 0px top repeat-y;
}
#table-vertical-tab-bottom, .table-vertical-tab-bottom
{
height: 25px;
background: url(https://lh5.googleusercontent.com/-E1olFBHAOlY/T6zLRFSQqWI/AAAAAAAACTc/WplWe_xz-jU/s300/table-tab-sidebar3.png) 0px top repeat-y;
}

#bl2 Đây là một vài Screenshot về tab menu trong blogger

#bl3 Hãy +1 nếu bạn thấy thích @ok

Cùng SaliproIT Blog chia sẻ Thế giới công nghệ 4 sao

SHARE