06/02/2012

Cách thêm Tabs vào Sidebar trong Blogspot


Đã có nhiều hướng dẫn về việc thêm Tabs vào Sidebar, nhưng hầu hết đề khá phức tạp. Với tác động của jQuery sẽ cho phép bạn thêm bất kỳ tiện ích sidebar mà bạn muốn có, bao gồm trong các tab. Đây  tiện ích theo thẻ dễ dàng nhất cho phép bạn tạo các tab cho các blogger của bạn .
Sau đây là hướng dẫn cách thêm tabs vào sidebar cho Blogger.

Bước 1: Hãy vào Thiết kế> Chỉnh sửa HTML  sao lưu mẫu của bạn.

Bước 2: Tìm đoạn mã  ]]></ b: skin>  và thêm vào ngay trước nó code dưới đây:

.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(http://i195.photobucket.com/albums/z105/dantearaujo/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(http://i195.photobucket.com/albums/z105/dantearaujo/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(http://i195.photobucket.com/albums/z105/dantearaujo/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;
} 

Bước 3: Thêm code dưới đây vào sau ]]></ b: skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>



Bước 4: Thêm code dưới đây vào trước thẻ </ head>

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/tabbloggerforbeinsight-min.js"></script>


Lưu ý: Bạn cần thay đổi các giá trị có màu đỏ ở code trên.

Giải thích:
starttab - Bắt đầu số cho các widget được chọn của bạn,  được tính từ "0".
endtab - Số lượng cho các widget mới nhất của bạn.
sidebarname - sidebar id của bạn mà bạn tìm thấy. 







Để đặt 3 tiện ích trong tab, số bắt đầu của bạn  0  số kết thúc  2. Hoặc nếu bạn muốn bắt đầu các tab từ các tiện ích thứ hai thì hãy bắt đầu  số 1  kết thúc là số 3.

Bây giờ đến khâu quan trọng là việc tìm id chính xác của sidebar. Trong hầu hết các templates bạn có thể tìm thấy các id của sidebar của bạn bằng cách tìm kiếm "wrapper-sidebar" ở trong phần Edit HTML. Ví dụ, id cho Layout templates  "sidebar" như minh họa dưới.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'> 


Bạn cũng có thể cài đặt Firefox plugin có tên là Firebug để tìm id chính xác,đây là một công cụ tuyệt vời cho các nhà phát triển Web.

Chúc các bạn có được những TAB đẹp cho Blog của mình.

www.netdohoa.com


0 nhận xét:

Đăng nhận xét

Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2010-2012 CON CUA BIEN. All rights reserved.