blogcongnghe: Menu nhiều tab cho blogger

Nếu bạn tìm kiếm từ Google, bạn sẽ tìm thấy nhiều cách để làm Sidebar Tabbed cho blog nhưng thật sự hơi khó khăn để thực hiện trong blogger, bởi vì ta phải thay đổi HTML hay XML trong Phần Sidebar.Nhưng thủ thuật sau đây mà mình giới thiệu rất dễ dàng chỉ việc chèn code CSS và JS. JS tự động sẽ làm cho cấu trúc Tabbed.

Vì vậy,nó sẽ không gây rối loạn cho html và sidebar của bạn. Sau khi js đặt Bạn có thể thay đổi vị trí hoặc nội dung của sidebar một cách dễ dàng.

Demo

Dưới đây là một số tính năng của tiện ích này

Dễ dàng để cài đặt.
Không cần chỉnh sửa html trong phần Sidebar.
Chỉ việc sắp xếp lại tại Bố cục

Các bước thực hiện

Bước 1. Blogger > Mẫu >Chỉnh sửa HTML >Mở rộng mẫu tiện ích

Lưu ý: trước khi thực hiện nhớ lưu template của bạn vào nhé!

Bước 2. Dán code bên dưới trước thẻ ]]></b:skin>

/* Tabbed Sidebar Widgets

--------------------------------- */

.widget-wrapper2{

border:1px solid #494e52;

background-color:#636d76;

padding:8px;

}

.widget-tab {

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-moz-border-radius-topright:5px;

-webkit-border-radius-bottomleft:5px;

-webkit-border-radius-bottomright:5px;

-webkit-border-radius-topright:5px;

background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAHzTN8KdehmA6rrICAxtLO5NvpGK7rwZRp6vN5D9brFZbjqtApvsnpNv6YxVRj4oAY1N5tsLBa_iETvfFsjI8ex2dc9SdpfvmBIujQxbGWXxmn-ttAAW8czam3NQbP9Xp9m5QjLEqPIm/h120/tabcontentbg.gif) repeat-x scroll left bottom !important;

border:1px solid #CFCFCF;

font-family:Arial,Helvetica,sans-serif;

padding:15px !important;

}

.widget-tab ul {

margin:0px;

padding:0px 20px 0px 20px;

}

.widget-tab ul li {

list-style:none;

border-bottom:1px solid #d6dde0;

padding-top:10px;

padding-bottom:10px;

font-size:13px;

}

.widget-tab ul li:last-child {

border-bottom:none;

}

.widget-tab ul li a {

text-decoration:none;

color:#3e4346;

}

.widget-tab ul li a small {

color:#8b959c;

font-size:9px;

text-transform:uppercase;

font-family:Verdana, Arial, Helvetica, sans-serif;

position:relative;

left:4px;

top:0px;

}

.tab-content ul li a:hover {

color:#a59c83;

}

.tab-content ul li a:hover small {

color:#baae8e;

}

.active-tab{

background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkuDxUlZ2N9EMcX6-RAIbghK9VRQbeHXCxYouUxyATs5RAXxtVA6UzeNd061Hd61Em5KYvM3n-RudavLtB2v38p0RA_E-MGIlzIWJw_SwIjwHZoddQPZZr78Dy29dDUOsR16AFw3a_ifDW/h120/tabtopbg.gif) repeat-x scroll left top !important;

border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;

border-style:solid !important;

border-width:1px 1px 2px !important;

color:#282E32 !important;

}

ul.tab-wrapper {

margin:0px; padding:0px;

margin-top:5px;

margin-bottom:6px;

}

ul.tab-wrapper li {

-webkit-border-radius-topleft:5px;

-webkit-border-radius-topright:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZBGjkiunoHzN6fbvV5irMtzqZIy4quTA6WKbK2iM3OJRevEFE4M_Tmssd7_I5mLerS5mhIU_e7hJxj62w6fy7jNTWxo_GYiLzQBksd_c3RqDUxIfdvc7iZVcYWzmtMveyucligPphbZ4/h120/tabinactivebg.gif) repeat-x scroll left top;

border:1px solid #464C54;

color:#FFFFFF;

cursor:pointer;

display:inline;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:9px;

font-weight:bold;

line-height:2em;

list-style-image:none !important;

list-style-position:outside !important;

list-style-type:none !important;

margin-right:1px;

padding:8px 14px;

text-align:center;

text-decoration:none;

text-transform:uppercase;

}

Thay đổi 3 link hình ảnh bôi màu xanh sao cho phù hợp với màu của toàn bộ blog của bạn

Bước 3. Trước </head> dán code sau

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Nếu bạn đã cài jquery.min.js rồi thì bỏ qua bước này nhé!

Bước 4.Cuối cùng bạn cũng dán code sau trước </head>

<script type="text/javascript">

var starttab=0;

var endtab=2;

var sidebarname="sidebar";

</script>

<script type="text/javascript" src="http://trollfile.googlecode.com/files/bloggertabv1.0-min.js"></script>

Chú ý một số thông số cần sửa trong code trên

Starttab: Là tab đầu tiên sẽ xuất hiện trong Tabbed Sidebar
Endtab: Là tab cuối cùng sẽ xuất hiện trong Tabbed Sidebar
Sidebarname: Là id của sidebar

*Cách lấy id của sidebar

Như hình trên thì id của sidebar chính là sidebar-right-1 .

Bạn nhìn hình dưới đây để biết cách thiết lập các thông số sao cho phù hợp với blog của mình

Nếu muốn trong Tabbed Sidebar sẽ xuất hiện tab 0,1 và 2 ta sẽ sửa code phía trên như sau

<script type='text/javascript'>

var starttab=0;

var endtab=2;

var sidebarname="sidebar-right-1";

</script>

<script src='http://trollfile.googlecode.com/files/bloggertabv1.0-min.js' type='text/javascript'/>

Ta sẽ có kết quả như sau