Blog Lê Trung Hiếu

Just another WordPress.com site

Thủ thuật tạo mutiltab cho Blogger

Thủ thuật tạo mutiltab cho Blogger

1.Đăng nhập vào Blog–> Bố cục- -> Chỉnh HTML(không mở rộng mẫu tiện ích)
2.Tìm (Ctrl + F) ]]></b:skin>
Dán code sau vào trước thẻ ]]></b:skin>

.widgets{width:100%; overflow:hidden; margin-top:5px; padding:0px 0px 0px 0px; background:#FFF; border:1px solid #ccc}

.widgets a{color:#222; text-decoration:none}

.widgets a:hover{color:#009; text-decoration:underline}

ul.tabnav{padding:0px 0px 0px 0px; height:27px; margin:0px 0px}

.tabnav li{display:inline; list-style:none; float:left; text-align:center; margin-right:4px}

.tabnav li a{text-decoration:none; text-transform:uppercase; font-weight:normal; padding:5px 8px; width:90px; line-height:18px; font-weight:bold; font-family:Century gothic,Arial,sans-serif; color:#262B2F; text-decoration:none; display:block}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a{text-decoration:none; background:url(none/catm.pg) repeat-x; color:#0283C7}

.tabdiv{margin-top:2px; padding:5px 5px 5px 5px; font-family: Tahoma,Georgia,Century gothic,Arial,sans-serif; background:#EBF3FB}
.tabdiv a:link, .tabdiv a:visited{color:#333}
.tabdiv a:hover{color:#2676A1}
.tabdiv ul{list-style-type:none; margin:0px 0px; padding:0px 0px}

.tabdiv ul li{height:100%; line-height:28px; padding:0px 0px 0px 0px; color:#333; border-bottom:1px dotted #61696F}
.tabdiv li a:link, .tabdiv li a:visited{margin-left:5px; overflow:hidden; height:18px; line-height:24px; padding:0px 0 0px 0px; margin:3px 0px; color:#99A6AF; font-size:13px}

.tabdiv li a:hover{background:url(none/la.jpg) no-repeat; color:#fff; text-decoration:none}
.ui-tabs-hide{display:none}

.tagcloud{width:300px; float:left; height:100%; padding:5px 15px; margin:0px 0px; background:#fff url(YOUR-IMAGE-HOSTING-LOCATION-HERE/tbody.jpg) repeat-y; font-family:Tahoma,Century gothic,verdana,Arial, sans-serif}

.tagcloud a:link, .tagcloud a:visited{color:#0282D9}
.tagcloud a:hover{color:#BC0C0F}

Bạn có thể chỉnh màu sắc nền ,màu chữ,v.v sao cho phù hợp với Blog của bạn.Như mình chỉnh màu trùng với màu chính của Blog nên rất dễ nhìn…
3.Download các mã sau về và up lên host của bạn
hoverIntent.js
jquery-1.2.6.min.js
jquery-ui-personalized-1.5.2.packed.js
scroll.js
sprinkle.js
spy.js

(gợi ý host free mà cho up file JS …Host

Bây giờ tìm thẻ sau </head>

Dán đoạn code với các đường dẫn chính xác mã Js vào trước thẻ </head>

<script src='http://YOUR-USER-NAME.110mb.com/jquery-1.2.6.min.js&#039; type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/jquery-ui-personalized-1.5.2.packed.js&#039; type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/sprinkle.js&#039; type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/hoverIntent.js&#039; type='text/javascript'/>
<script src='http://YOUR-USER-NAME.110mb.com/scroll.js&#039; type='text/javascript'/>

4.Tìm dòng sau <div id='sidebar-wrapper'>

Chèn đoạn code ngay dưới nó

<div class='widgets' id='tabzine'>

<ul class='tabnav'>
<li class='pop'><a href='#popular'> Recent</a></li>
<li class='fea'><a href='#tags'> Labels </a></li>
<li class='rec'><a href=' #recent'> Followers </a></li>
</ul>

<div class='tabdiv' id='popular'>
<b:section class='cahaya13' id='cahaya16' showaddelement='yes'>
<b:widget id='HTML144' locked='false' title='Recent Post' type='HTML'/>
</b:section>
</div>
<div class='tabdiv' id='tags'>
<b:section class='cahaya4' id='cahaya4' showaddelement='yes'>
<b:widget id='Label122' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div class='tabdiv' id='recent'>
<b:section class='cahaya13' id='cahaya14' showaddelement='yes'>
<b:widget id='Followers152' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>

</div>
<p><font><b>created by</b></font> <a href="http://blogger.com/&quot; target="_BLANK" name="blogger">com</a></p>

Rồi save lại…
Tiếp xong sang Phần tử trang ( tab ngang với Chỉnh sửa HTML)
Bạn chọn và tùy chỉnh 3 cái phần tử trang mới ( Recent,Tag,Follower) là được.(thêm,sửa,xóa ..cái này chắc các bạn đã biết rồi)

Quan trọng nhất vẫn là bước 2 vì nó giúp phần tử của bạn hòa chung với theme mà ko bị “nổi bật” lên
Chúc thành công

Tham khảo thêm tại đây

One response to “Thủ thuật tạo mutiltab cho Blogger

  1. Nguyễn Đăng Quỳnh Tháng Ba 23, 2011 lúc 12:45 chiều

    không down đc bạn ơi ! bạn thử xem lại cho mình với !

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: