Cách đơn giản nhất để tạo Tabbed Sidebar 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

1. Dễ dàng để cài đặt.
2. Không cần chỉnh sửa html trong phần Sidebar.
3. 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/AVvXsEhOS8xRGeMmlx-4TtZsHkGU5bvs7rtbl4EhPFqNngsRPhIot77uequddIOguXQPf2-uQvTCtss-DvWuZ1hFiHpjkuA0stPHgcEPIdOtQSmW-_Qf5ZSpaGs-msFUytPTraSJfLXchHznKFnC/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/AVvXsEjuiZnVMjtzqeBu3R_UPjsCMlLnWHjqFJMBrWtO8Vf2ZY2b20SLk-02hpIV6GuzfmnN7XGn6zK3clQnWtDB1_gpU2E9vg-2BQYYi_v-ecNabG0Yb-xxOdROsOzsrHKMnpkARj69JjIoPeMa/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/AVvXsEi1vuJvedIwybKZyabPkNAici6BhMTf4W8hsTNW60TUoSK6IFbXR2fY-TA-Gi9Zno_XxpLontnyLCeECBrwujf97GNPYJ-6-UqNjizhryfhjIxwmMz8d1ugdFItsbjYoAgwQzORGzaGrVpV/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

<!-- jQuery Call -->

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

<!-- End of jQuery Call --> 

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

Tương tự nếu muốn xuất hiện từ tab 1 đến tab 3 ta chỉ việc sửa lại thành

var starttab=1; 

var endtab=3; 

Hi vọng bài viết này sẽ giúp được các bạn phần nào trong việc làm cho blog ngàng càng đẹp và tiện lợi hơn
Bạn có thể tham khảo bài viết gốc tại đây
Nếu có cách nào hay hơn , hãy chia sẻ !