• 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] - Làm đẹp widget nhãn (label) blogpsotNhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagera ...
  • [Tips] - Menu Responsive BlogspotNhư những bài trước mình cũng nói khá nhiều về Responsive cho các bạn và cũng có những bài hướng dẫn cách tích hợp Resp ...
  • [Tips] - Hướng dẫn tích hợp AncPlayer cho BlogspotAncPlayer là trình chơi nhạc hay xem phim cho blogspot cực kỳ chuyên nghiệp mà bất kỳ blog phim hay nhạc đều phải có, t ...
  • [Tips] - Đặt backlink như thế nào là đúng?Chào các bạn khi chúng ta nói đến backlink thì hầu như seoer nào cũng dùng tới nó vì đây là một lối seo blogspot nói ri ...
  • Recent Post Widget For Blogspot chuyên nghiệpRecent post là widget trình diễn bài viết theo label tùy chỉnh của nhà thiết kế, nếu bạn có một label (nhãn) muốn nằm t ...
Next
« Prev Post
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