Hosting Miễn Phí
Headlines News :
Home » » How to created Tabview widget on blogger

How to created Tabview widget on blogger

Written By Kelvin on June 10, 2009 | Wednesday, June 10, 2009







Hôm nay tôi sẽ giới thiệu cho các bạn tạo 1 Tabview trên blogger giúp tiết kiệm không gian cho blog và trình bày được nhiều thứ hơn.





Trước tiên các bạn đăng nhập vào blog --> chọn Layout --> Edit HTML và tìm đoạn ]]></b:skin> rồi copy đoạn Css này vào phía trên nó




/*----------Tab view css-----------*/
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:12px;
-moz-border-radius-topright:12px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: url(http://img2.pict.com/f5/18/8d/c0c7240dfdb297e223b1d806e4/ff5Xf/tim.png);
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #202020;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


rồi tiếp tìm đoạn </head> đặt đoạn code này phía trên

<script src='http://sites.google.com/site/love4all1080/3-button/tabview.txt' type='text/javascript'/>


Click Save Template

Rồi tiếp theo vào phần Page Elements cũng trong phần Layout tạo mới 1 cái HTML/Javascipt và copy đoạn code này vào

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs">
<a>Recent Post</a>
<a>Top Cmt</a>
<a>Chat</a>
</div>
<div style="width: 330px; height: 350px;" class="Pages">

<div class="Page">
<div class="Pad">
Noi dung tab 1
</div>
</div>

<div class="Page">
<div class="Pad">
Noi dung tab 2
</div>
</div>

<div class="Page">
<div class="Pad" align="center">
Noi dung tab 3
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Save lại. Tùy theo nội dung của bạn mà trong từng tab bạn đặt code vào đó. Chúc thành công !
Share this post :

Post a Comment

Bạn có ý kiến thắc mắc hay bình luận gì về bài viết này vui lòng để lại lời nhắn.Cám ơn bạn đã ghé thăm !

 
Support : Creating Website | Demo Template
Copyright © 2011. Free Style Love - All Rights Reserved
Template Created by Creating Website Published by DemoTemplate
Proudly powered by Blogger