Tab Menu

Tab menu chứa widget cho Blogger - Blogspot

Tab menu chứa widget cho Blogger - Blogspot, create tabs menu, tab-menu, how to create tab menu, popular post tab menu 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://lh3.googleusercontent.com/-IVy9kEQyGiE/T61FiJ2lkHI/AAAAAAAACVA/F0XBNostq1Q/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://lh6.googleusercontent.com/-07Q7jQ45k0o/T61NGmFq0ZI/AAAAAAAACV0/3ZGj9-PkQu8/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

Hiện có 28 comments

K3nvil

Bạn ơi, có thể qua blog mình xem rồi hướng dẫn cụ thể giúp mình cái đc k vậy?
Blog mình là: http://k3nvil.blogspot.com
Blog của bạn đẹp quá, Mong bạn giúp mình sớm nhé :) thanks bạn :D

Salipro Phạm

@K3nvil Cám ơn bạn đã ghé thăm SaliproIT Blog nhé!

K3nvil

@Salipro Phạm Bạn có thể hướng dẫn cho mình tạo tab để gom mấy cái widget vào với đc k bạn? Mình muốn tạo tab cho 3 cái widget bài viết xem nhiều nhất, nhận xét mới nhất và bài đăng mới. bạn qua blog mình xem rồi hướng dẫn giúp nhé.

Salipro Phạm

@K3nvil thân! Mình ví dụ sẽ chèn vào sidebar bên phải blog bạn nhé. Trong HTML mở rộng, bạn tìm tag div với class="column-right-inner". Sau đó bạn chèn ngay bên dưới đoạn HTML của mình phía trên. Cuối cùng là nhúng vào đoạn jQuery trên cùng và CSS. Xong hết, bạn vào Layout thêm vào các gadget bạn cần như bài viết mới, recent comment... Mình khuyên bạn nên sử dụng Recent comment trên blog mình hướng dẫn để tránh lỗi. Chúc bạn thành công :x

K3nvil

@Salipro Phạm thân! Cảm ơn bạn chỉ dẫn, mình cũng thử như bạn. Nhưng cái của mình nó mất khung rồi nó hiển thị một lúc toàn bộ 3 widget liền. k ẩn 2 widget còn lại. vậy có cách nào để đưa vào mà nó ẩn 2 tab còn lại và chỉ hiển thị 1 tab đầu tiên k vậy ? :)

Salipro Phạm

@K3nvil này, bạn xem lại id hoặc class có đúng không. Hoặc bạn nâng cấp thư viện jQuery từ 1.4 lên 1.7 thử xem.

Tuấn Tèo

Hướng dẫn rõ ràng chút đi bạn... chã biết chèn cái nào vào chỗ nào

Salipro Phạm

Hi @Tuấn Tèo , như s đã nói trong bài viết, vấn đề khó nhất là bạn cần biết chút về HTML để chọn được vị trí @-). Mỗi template của blog có cấu trúc khác nhau, blog của bạn là gì để mh xem và hướng dẫn vị trí cụ thể cho ban. Cám ơn bạn đã quan tâm bài viết.

DH10KM

Bạn ơi, mình đang thiết kế blogger của mình, mình thấy rất cái menu trượt màu đen ở đầu trang Blogger của bạn nhưng biết làm thế nào để làm được nhỉ?
Thứ 2, là mình cũng thích cái MULTI TABBED NAVIGATION WIDGETcủa bạn nhưng vẫn ko làm đc, bạn có thể giúp mình ko?
Cảm ơn bạn rất nhiều

Salipro Phạm

Chào @DH10KM , mình rất sẵn lòng. Nếu có thắc mắc bạn cứ hỏi mình sẽ giải đáp ngay cho bạn. Blog của bạn là gì?? :-/

DH10KM

Blog của mình là http://dh10km.blogspot.com/ , mình rất thích tab menu của bạn, nhưng mình đã thử làm nhưng ko đc, mình cũng rất thích cái thanh menu trang blog của bạn nhưng ko biết phải làm thế nào bạn có thể giúp mình ko?

Salipro Phạm

Hi @DH10KM , bạn thử làm lại lần nữa, từng bước theo bài viết này và đảm bảo bạn đã sử dụng phiên bản jQuery phù hợp với Trình duyệt. Còn về cách tạo ra menu, cũng có khá nhiều bạn hỏi s, để hôm nào rãnh s sẽ post một bài hướng dẫn về nó. Thanks!

Tran Tuyen

Mình đã chèn được nhưng khi click vào các tab tương ứng thì nó không nhảy bài viết. Bạn xem giúp mình vơi.

Salipro Phạm

Hi @Tran Tuyen ! mh đã kiểm tra code trên blog bạn, nó làm việc rất tốt. Bạn chỉ cần thêm nội dung cho các tab là chúng sẽ hiển thị, vào Layout và add widget bạn cần.
Chúc bạn thành công!

Nguyễn Tiến

Cac ban cho minh hoi lam sites.google hay blogspot se dep hon va tot hon cho seo vay

Salipro Phạm

Chào @Nguyễn Tiến , theo s nghĩ thì mỗi cái có một thế mạnh riêng. GS thích hợp hơn với trang thông tin cho một group. Còn Blogspot thì mạnh và tùy biến hơn nếu bạn sử dụng để tạo một site chia sẽ.
Còn về SEO thì s nghĩ cả 2 được hỗ trợ như nhau.

way rich

Cho mình hỏi cách viết bài để vào theo từng trang, hoặc từng menu. Mình có blog copy temple trên mạng. Nhưng ko biết viết bài để đưa vào từng chuyên mục trên menu.
my site: http://www.martlink.info/

Salipro Phạm

Hi @way rich , s cũng chưa thật rõ ý bạn lắm, nhưng mình nghĩ là bạn muốn post bài theo từng chuyên mục đúng k?! Nếu vậy, khi hoàn thành bài viết, bạn chọn tag cho chúng là OK!

Thư viện Thủ thuật

Xin được trao đổi liên kết cùng bạn:

Tên blog: Thư viện Thủ thuật

Link blog: http://www.thuvienthuthuat.com/

Mô tả: Thư viện Thủ thuật - Cập nhật, tổng hợp, sưu tầm và sẻ chia thủ thuật đa ứng dụng.

Rất mong được bạn chấp nhận và sớm hồi âm.

Chân thành cảm ơn!

Việt FunVNN

Mình có cách mà không cần phải can thiệp vào phần giao diện của blog và không cần xác định vị trí cần đặt tab. Nói chung dành cho các bạn không am hiểu lắm về chỉnh sửa HTML trong blogger
Nếu muốn các bạn có thể tham khảo cách sau tại đây

Pon Ali

Không biết bao giờ bạn có thể hồi âm được cho Comment này. Tuy vậy, tôi vẫn cần bạn giúp đỡ.

Tôi muốn tạo một loạt các tab kiểu như bạn. Nhưng không phải đặt ở Sidebar, mà đặt ở phần các bài viết(ở phần Post). Tôi không giỏi về Code lắm.

Rất mong nhận được sự giúp đỡ của bạn.

Salipro Phạm

@Pon Ali , để làm được những gì như bạn mong muốn đòi hỏi bạn nên tìm hiểu một chút về code. Đoạn code trên của mh, nếu bạn hiểu được nó, bạn có thể đặt nó bất cứ đâu và thể hiện bất kì nội dung gì bạn muốn... Hãy thử tìm hiểu một lần ui bạn sẽ thích :D

Nguyễn Hoàng Ân

Hi, mình làm dến bước gần cuối rồi, nhưng đến đoạn

"CSS style cho đoạn HTML trên." thì mình po tay

Bạn xem qua thử blog mình nhé http://sunviewhcm.blogspot.com/

Nó chưa số menu xuống

Trình tự làm của mình
1. add các đoan code vào phần Mẫu.
2. add đoạn Code HTML trực tiếp vào phần bố cục (sau khi add một HTML - Javacrip mới)
... và nó vẫn chưa chạy :(

Thanks

Tran Minh

Bài viết rất bổ ích ! Cảm ơn bạn ^^
......................................
Minh Trần 24h iPhone Services
Chi tiết xem tại : Cửa hàng sửa chữa iphone uy tín tại TPHCM hoặc cua hang sua chua iphone uy tin tai TPHCM

Giải Trí Kênh

Mình muốn chèn vào cột bên phải blog của mình sao không được nhỉ, không thông báo lỗi gì khi chèn code và cũng chẳng thấy gì khi vào trang, giúp mình với trang mình là: hoangvantan.com

Tech Mechvn

Xin chào mọi người.
Giả sử mình thay Tab "Bình luận" bằng Tab "Sản phẩm Nội Thất" thì làm thế nào để khi Click vào Tab "Sản phẩm Nội Thất" sẽ xuất hiện bài của "Sản phẩm Nội Thất" ?
Xin cám ơn!

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))