Liên hệ Zalo 0948.713.329 Để Nhận Tư Vấn Hỗ Trợ
Thanh toán Chính sách Liên hệ

7 Giao Diện Đẹp Dành Cho Tiện Ích Multiple Tabs Cho Blogspot

7 Giao Diện Đẹp Dành Cho Tiện Ích Multiple Tabs Cho Blogspot

Cập nhật ngày Bởi

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 Yingvn chia sẻ cho các bạn một số mẫu Multiple Tabs cho Blogspot.

7 Giao Diện Đẹp Dành Cho Tiện Ích Multiple Tabs Cho Blogspot

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> 
<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 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 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 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 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 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 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 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

Comments

Post a Comment

Liên quan

Call
0948713329
Contact Me on Zalo