• 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] - Bài viết liên quan đơn giản cho blogspotBài viết liên quan hay nó còn được các blogger gọi nó là Related Posts, đây là một tiện ích khá cần thiết cho bất kỳ mộ ...
  • [Tips] - Popup like box với chỉ dẫn đẹp cho blogspotLike box là tiện ích thiết yếu cho một blogspot nhằm quảng bá thương hiệu cho fanpage cũng như danh tiếng của mình, để ...
  • [Tips] - Câu hỏi tại sao của newbi về seo blogspot Có nhiều bạn hỏi mình tại sao ? Sao em làm seo blogspot theo cách của anh mà 1 tuần, 2 tuần rồi mà không thấy lên top ...
  • [Tips] - Tự làm code chuẩn seo cho blogspotChào các bạn nói đến seo blogspot thì việc đầu tiên chúng ta cần làm là tạo code chuẩn seo cho templates, Bài này mình ...
  • [Tips] - Những thủ thuật blogspot cần phải có cho blogThủ thuật blogspot là gồm những tiện ích giúp làm đẹp cho blogspot và giúp blog trở nên chuyên nghiệp hơn, nhưng cũng t ...
Next
« Prev Post
Previous
Next Post »
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