• 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] - Viết bài như thế nào là chuẩn seo cho blogspotPhải nói rằng seo blogspot là một cuộc cách mạng cho những blogger, ngoài việc tối ưu cho blog và seo offpage ra thì vi ...
  • [Tips] - Auto Nofollow link trỏ ra ngoài cho blogpsotĐặt thuộc tính Nofollow cho những link trỏ ra ngoài cho blogspot là một điều cần thiết cho việc seo blogspot, một phần ...
  • Cách để bạn bắt đầu với một blog miễn phíTôi rất vui mừng khi nghe điều này mà bạn đang bắt đầu blog của riêng bạn nhưng không may, bạn không biết cách để bạn b ...
  • [Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5W3C là từ viết tắt của World Wide Web Consortium, là nhiệm vụ hướng dẫn World Wide Web với đầy đủ các tiềm năng phát tr ...
  • [Tips] - Menu ghim cố định khi lăn chuột cho blogspot Menu ghim cố định còn có tên gọi khác là sticky menu, là menu được cố định trên top của blogspot, khi lăn chuột lên xu ...
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

  • [Tips] - Thẻ điều kiện trong blogspot là gì?

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