Thành công!
TRUCBLOG JOURNAL GÓC ĐỌC • GÓC VIẾT
Bài viết / Góc chia sẻ
Blogspot Widget

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

Đỗ Trực tháng 11 07, 2016 2 phút đọc 2 bình luận … Lượt xem


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>
    3. <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
Chia sẻ bài viết:
Ảnh đại diện tác giả

Đỗ Trực Tác giả / Admin

Chia sẻ kiến thức lập trình, phát triển web, công nghệ và các thủ thuật thực tế. Cảm ơn bạn đã ghé thăm Truc Blog.

Trang chủ Email Zalo WhatsApp

Thảo Luận & Nhận Xét (2)

Công cụ bình luận nâng cao:
Nội quy bình luận của blog

Hãy cùng giữ phần thảo luận thân thiện, hữu ích và an toàn cho mọi người.

  1. Trao đổi lịch sự, tôn trọng người khác; góp ý vào nội dung, không công kích cá nhân.
  2. Bình luận đúng chủ đề bài viết; tránh spam, quảng cáo lặp lại hoặc đường dẫn đáng ngờ.
  3. Không đăng mật khẩu, số giấy tờ, thông tin liên hệ riêng tư hay dữ liệu nhạy cảm.
  4. Khi chia sẻ mã nguồn, hãy dùng công cụ mã hóa code để giữ nguyên ký tự và dễ đọc.
  5. Chỉ chia sẻ hình ảnh, video và tài liệu mà bạn có quyền sử dụng; không đăng nội dung vi phạm pháp luật.
  6. Quản trị viên có thể ẩn hoặc xóa nội dung spam, xúc phạm, không an toàn hoặc không phù hợp.
Biểu tượng cảm xúc nổi bậtChạm để sao chép
Công cụ Mã hóa HTML & Chèn Code vào Bình luận
* Nhấn Chèn Ảnh/Video, dán liên kết công khai rồi sao chép URL vào bình luận. Sau khi bình luận được đăng, mẫu sẽ tự hiển thị ảnh trực tiếp, video MP4/WebM hoặc video YouTube nếu URL thuộc định dạng được hỗ trợ. Blogger không cho tải tệp trực tiếp lên bình luận.

Nhận xét

  1. Địa lí VIệt Nam22:39:00 22 thg 9, 2017

    Bạn ơi, khi mình đưa đoạn code vào blog sao no không hiện ra nhỉ

    Trả lờiXóa