Một số mẫu để tạo nhiều tab trên sidebar Blogspot

Tính năng nổi bật

• Tiết kiệm được không gian hiển thị
• Blog sẽ trở nên chuyên nghiệp hơn.
• Có nhiều mẫu để bạn thay đổi
• Dễ dàng tùy biến nếu bạn biết về CSS

Cách thực hiện

1. Để tiện ích "Tạo nhiều tab chứa widget trên sidebar cho Blogspot" hiển thị thì các bạn phải thực hiện thành công theo bài viết này trước nhé =>  Tạo Nhiều Tab Chứa Widget trên một Sidebar. Nếu chỉ copy các đoạn CSS bên dưới và dán vào Blog thì sẽ không hiển thị được.
2. Một số mẫu bên dưới có sử dụng font awesome (là font chứa các icon dành cho HTML). Vì vậy nếu các bạn thấy sau khi áp dụng các mẫu dưới đây mà hiện ra chữ hình vuông thì các bạn chèn đoạn code sau vào trước thẻ đóng </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Dưới đây mình chia sẻ 7 mẫu để các bạn tùy chọn. Các bạn thích mẫu nào thì copy vào blog của mình nhé. Lưu ý nên kiểm tra các đoạn css có trong template để không bị đụng CSS.

Mẫu số 1

 

/* CSS Tabs  1*/ .tabs, .tabs-list {margin:0;} .tabs .tabs-list {padding:0;} .tabs-menu {padding:0;margin:0;border-bottom:0;} .tabs-menu li{margin:0;font-size:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all .3s} .tabs-menu li:nth-child(3) {background:#374760;color:#fff;} .tabs-menu li:hover {background:#37b185;} .tabs-menu li:nth-child(3):hover {background:#2a3950;} .tabs-menu .active-tab,.tabs-menu .active-tab:nth-child(3){background:#fff;color:#858d8f;transition:all .3s} .tabs-menu .active-tab:hover,.tabs-menu .active-tab:nth-child(3):hover {background:#fff;color:#333;} .tabs-menu li:before{font-family:Fontawesome;text-align:center;margin-right:5px} .tabs-menu li:nth-child(1):before {content:'\f006';} .tabs-menu li:nth-child(2):before {content:'\f09e';} .tabs-menu li:nth-child(3):before {content:'\f0e6';} .tabs-content{padding:10px;background:#fff;margin-bottom:15px;border-top:0;} .tabs-content .sidebar li {margin:0;padding:0;} .tabs-content .widget li {background:#fff;color:#333;float:none;} .tabs-content .widget li:last-child {border-bottom:none;} .tabs-content .widget ul {background:#fff;color:#333;overflow:visible;}

Mẫu số 2

 

/* CSS Tabs 2 */ .tabs, .tabs-list {margin:0 0;} .tabs .tabs-list {padding:0 0;} .tabs-menu {color:#666;padding:0 0;margin:0;margin-bottom:0;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Oswald';font-weight:400;height:30px;line-height:30px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#444;color:#fff; cursor:pointer;position:relative;transition:all 0.1s linear;} .tabs-menu li:hover {background:#555;color:#fff;} .tabs-menu .active-tab {background:#f9f9f9;color:#666;box-shadow:inset 0 4px #eac965;} .tabs-menu .active-tab:hover {background:#f9f9f9;color:#2ba6e1;} .tabs-content {padding:10px;background:#f9f9f9;margin-bottom:15px;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget li {background:#f9f9f9;color:#666;float:none!important;} .tabs-content .widget li a {color:#666;} .tabs-content .widget ul li a {color:#666;} .tabs-content .widget ul {background:#f9f9f9;color:#666;overflow:visible;} .tabs-content .Label li {background:#f9f9f9!important;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;} .tabs-content .Label li:hover {background:transparent;color:#eac965;} .tabs-content .Label li a {color:#666!important;transition:.3s linear;} .tabs-content .Label li a:hover {color:#eac965;transition:.3s linear;} .tabs-content .Label ul li a {color:#666!important;}

Mẫu số 3

/* CSS Tabs 3 */ .tabs, .tabs-list {margin:0 0;} .tabs .tabs-list {padding:0 0;} .tabs-menu {color:#fff;padding:0 0;margin:0;margin-bottom:0;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Roboto';font-weight:300;height:40px;line-height:40px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:0;background:#f9b256;color:#fff;cursor:pointer;position:relative;transition:all 0.1s linear;} .tabs-menu li:hover {background:#fac888;color:#fff;} .tabs-menu .active-tab {background:#fff;color:#53606f;} .tabs-menu .active-tab:hover {background:#fff;color:#f97e76;} .tabs-content {padding:10px;background:#fff;border-bottom:2px solid #dadada;margin-bottom:15px;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget ul {background:transparent;color:#666;overflow:visible;} .tabs-content .widget li {background:#fff;color:#666;float:none!important;}

Mẫu số 4

/* CSS Tabs 4 */ .tabs, .tabs-list {margin:0 0;} .tabs .tabs-list {padding:0 0;} .tabs-menu {color:#e25756;padding:0 0;margin:0;margin-bottom:0;border:1px solid #eceeee;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Oswald';font-weight:400;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:3px 0;background:#2e3639;color:#fff;cursor:pointer;position:relative; transition:all 0.1s linear;} .tabs-menu li:hover {background:#23292b;color:#fff;} .tabs-menu .active-tab {background:#ea5c35;color:#fff;} .tabs-menu .active-tab:hover {background:#db5632;color:#fff;} .tabs-menu .active-tab:after {top:100%;left:50%;border:solid transparent; content: " ";height:0;width:0;position:absolute;border-color: rgba(136,183,213,0);border-top-color:#ea5c35;border-width:7px;margin-left:-7px;} .tabs-content {padding:10px;background:#fff;border:1px solid #eceeee;border-top:none;margin-bottom:15px;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget li {background:#fff;color:#666;float:none!important;} .tabs-content .widget ul {background:#fff;color:#666;overflow:visible;} .tabs-content .Label li {background:#fff!important;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;} .tabs-content .Label li:hover {background:transparent;color:#eac965;} .tabs-content .Label li a {color:#666!important;transition:.3s linear;} .tabs-content .Label li a:hover {color:#eac965;transition:.3s linear;} .tabs-content .Label ul li a {color:#666!important;}

Mẫu số 5

/* CSS Tabs 5*/ .tabs, .tabs-list {margin:0 0;} .tabs .tabs-list {padding:0 0;} .tabs-menu {padding:0 0;margin:0;margin-bottom:0;box-shadow:0 0 0 1px #eee;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:12px;font-family:'Open Sans'; font-weight:normal;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#fff;color:#aaa; cursor:pointer;position:relative;transition:all 0.6s ease-out;border-bottom:2px solid #eee;} .tabs-menu li:hover {opacity:0.9;color:#888;border-bottom-color:#ddd;} .tabs-menu .active-tab {background:#fff;color:#f56954;border-bottom-color:#f77c6a;} .tabs-menu .active-tab:hover {opacity:0.9;background:#fff;color:#f56954;border-bottom-color:#f77c6a;} .tabs-menu li span {display:none;} .tabs-menu li:before {font-family:Fontawesome;text-align:center;font-size:16px;} .tabs-menu li:nth-child(1):before {content:'\f09e';} .tabs-menu li:nth-child(2):before {content:'\f006';} .tabs-menu li:nth-child(3):before {content:'\f0e6';} .tabs-content {padding:10px;background:#fff;border-top:none;margin-bottom:15px;box-shadow:0 0 0 1px #eee;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget li {background:#fff;color:#333;float:none!important;} .tabs-content .widget ul {background:#fff;color:#333;overflow:visible;} .tabs-content .Label li {background:#fff!important;color:#333;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;} .tabs-content .Label li:hover {background:transparent;color:#f56954;} .tabs-content .Label li a {color:#333!important;transition:.3s linear;} .tabs-content .Label li a:hover {color:#f56954;transition:.3s linear;} .tabs-content .Label ul li a {color:#333!important;}

Mẫu số 6

/* CSS Tabs 6 */ .tabs, .tabs-list {margin:0 0;} .tabs .tabs-list {padding:0 0;} .tabs-menu {padding:0 0;margin:0;margin-bottom:0;border-bottom:4px solid #4791d2;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Ruda';font-weight:700;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:3px 0;background:#222;color:#fff;cursor:pointer;position:relative; transition:all 0.1s linear;} .tabs-menu li:hover {opacity:0.9;background:#222;color:#fff;} .tabs-menu .active-tab {background:#4791d2;color:#fff;} .tabs-menu .active-tab:hover {opacity:0.9;background:#4791d2;color:#fff;} .tabs-content {padding:10px;background:#fff;border-top:none;margin-bottom:15px;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget li {background:#fff;color:#666;float:none!important;} .tabs-content .widget ul {background:#fff;color:#666;overflow:visible;} .tabs-content .Label li {background:#fff!important;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;} .tabs-content .Label li:hover {background:transparent;color:#eac965;} .tabs-content .Label li a {color:#666!important;transition:.3s linear;} .tabs-content .Label li a:hover {color:#eac965;transition:.3s linear;} .tabs-content .Label ul li a {color:#666!important;}

Mẫu số  7

/* CSS Tabs 7 */ .tabs,.tabs-list{margin:0} .tabs .tabs-list{padding:0} .tabs.tabs-1{border:1px solid #e3e3e3} .tabs-menu{background:#f1f1f1;padding:0;margin:0} .tabs-menu li{font-size:14px;font-weight:700;height:45px;line-height:45px;width:33.3%;margin:0;list-style:none;text-align:center;display:inline-block;padding:0;color:#999;cursor:pointer;position:relative;border-bottom:1px solid #e3e3e3;transition:all 0.1s linear} .tabs-menu li:hover{color:#2ecc71} .tabs-menu .active-tab{background:#fff;color:#2ecc71;border-bottom:1px solid transparent} .tabs-menu .active-tab:hover{color:#222} .tab-content{padding:10px;background:#fff;margin-bottom:15px} .tab-content .sidebar li{margin:0;padding:0} .tab-content .widget ul{background:transparent;color:#666;overflow:visible} .tab-content .widget li{background:#fff;color:#666;float:none!important}

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

Theo Anh Nhím Blog