• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips Blogger-Widget Thu-Thuat [Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)

[Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)

Đỗ Mạnh Hồng June 19, 2015 Blog Series Blog-Tips Blogger-Widget Thu-Thuat
Đỗ Mạnh Hồng
Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thường hay tích hợp. Là tiện ích chia widget trên blog của bạn ra thành 3 hay 4 tab rất chuyên nghiệp.

Làm sao để thêm tabber widget vào blogspot?

1. Thêm css

Thêm đoạn css sau trên thẻ ]]></b:skin> trong templates blogspot
/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}

2. Thêm script

Thêm đoạn js sau trên thẻ </head>
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>

3. Tìm vị trí đặt tabber widget

Thường thì tiện ích tabber widget này chúng ta thường thấy nằm ở sidebar,nên các bạn tìm đến sitebar trên blogspot, thường thì một blog cơ bản thì đoạn code sidebar sẽ là
<div id='sidebar-wrapper'>
Tùy mỗi blog mà có mỗi đoạn code khác nhau, và chúng ta chèn đoạn code sau ngay bên dưới nó
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
 Cuối cùng là lưu templates blogspot của mình lại và vào phần bố cục trên blogspot tìm đến phần sidebar và các bạn sẽ thấy điều bất ngờ. Chúc các bạn thành công.

Bài Viết Cùng Chủ Đề

  • [Tips] - Slider Image đơn giản cho blogspotSlider Image (slider ảnh) là một tiện ích được các blogger thường hay dùng để thêm phần chuyên nghiệp cho blog của mình ...
  • [Tips] - Tối ưu css và js cho blogspot Trong việc seo blogspot thì tối ưu css và js là một điều khá cần thiết cho một blogger. Trong cộng đồng blogger việc n ...
  • [Tips] - Lấy data và cách phòng tránh bị ăn cắp data blogspotChào các bạn, việc ăn cắp data blogspot hiện nay là vấn đề đâu đầu cho các blogger hiện nay, vì toàn bộ bài viết trên b ...
  • [Tips] - Làm sao để blogspot không bị lỗi hình ảnhLỗi hình ảnh (image) là lỗi thường gặp nhất hiện nay, hiện nay đối với nhà mạng VNPT đã chặn hình ảnh đối với blogspot, ...
  • Widget top comments for blogspot (bài viết comments nhiều nhất)Widget top comments có nghĩa là một widget thống kế số comments cho từng bài viết, bài viết nào nhiều comments nhất sẽ ...
Next
[Tips] - Mẫu PopularPosts đẹp mà bạn nên dùng
Previous
[Tips] - Menu chuyên mục Css full Responsive cho Blogspot
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

4 nhận xét

Write nhận xét
PHÚC NGUYEN
AUTHOR
10 October 2015 at 20:46 delete

đù. không cho chuột phải thì chia sẻ = niềm tin ))

Reply
avatar
Đỗ Mạnh Hồng
AUTHOR
11 October 2015 at 01:35 delete

Thưa bạn là code vẫn coppy được bình thường mà bạn.

Reply
avatar
Unknown
AUTHOR
16 November 2015 at 16:27 delete

mình đã dùng một multi tab khác cho web bóng đá tivi của mình là tivi.ketquabongda.asia không biết mình dùng tiếp cái multi tab như hướng dẫn ở trên có bị xung đột code không

Reply
avatar
Đỗ Mạnh Hồng
AUTHOR
16 November 2015 at 22:27 delete

Mình nghĩ là được bạn à, với lại bạn thêm thử thì coi có ok không

Reply
avatar

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu