Tổng Hợp Một Số Giao Diện Đẹp Dành Cho Tiện Ích Multiple Tabs Cho Blogspot

Như bài viết trước thì mình đã chia sẻ các bạn tiện ích  Multiple Tabs cho Blogspot. Tuy nhiên nó hạn chế là giao diện ko được đẹp cho lắm. Vậy nên nay Anh Nhím Blog chia sẻ cho các bạn một số mẫu Multiple Tabs cho Blogspot

Mục lục:

• Mục Đích
• Thực Hiện
• Lời Kết

Mục Đích

• Giúp cho blog trong gọn hơn nhưng đầy đủ widget
• Giúp cho Blog đẹp hơn (có thể tùy từng blog)

Thực Hiện

1. Để tạo một cái tiện ích Multiple Tabs Cho Blogspot thì các bạn vào link bên dưới

Tạo Nhiều Tab Chứa Widget trên một Sidebar Trong Blogger - Blogspot

Chú ý: 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> 

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

2. Thay đổi style thì bạn chỉ việc thay phần CSS trong bài hướng dẫn trên thành code bên dưới mình chia sẻ. Tức là thay phần này.

Style 1

CSS/* CSS Tabs */
.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;}

Style 2

CSS/* CSS Tabs */
.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;}

Style 3

CSS/* CSS Tabs */
.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;}

Style 4

CSS/* CSS Tabs */
.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;}

Style 5

CSS/* CSS Tabs */
.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;}

Style 6

CSS/* CSS Tabs */
.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;}

Style 7

CSS/* CSS Tabs */
.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}

Lời Kết

Vậy là mình đã chia sẻ các bạn một số mẫu Multiple Tabs đẹp cho Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.