Find info about electronics prices, discounts, top deals in link, like US below.

Create multi Tab View on blogger


Multi tabview it is very useful, because with the relatively small size of the box but can contain a lot of content. Actually always wanted to post about it, but because of who her partner was way harder so I can not explain. Then finally I found a new method of manufacture.
multi tabview has three tabs, each of which has different content in accordance with our course content.

Tab view it for example like this:
multi tab view with code example


Here's how to create menu tabs that view

1. Log in to blogger, go to "Layout -> Edit HTML"
2. Then find this code ]]></b:skin>
3. Then enter the following code before ]]></b:skin> tag or into the CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Main menu top width */
text-align: center;
height: 24px; /* Main menu top height  */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* main menu border top */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Main Menu Top Fonts */
font-weight: 900;
color: #000; /* Main Menu Font Color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* main menu top background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* border color main box */
overflow: hidden;
background-color: #FF9900; /* background color main box */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. The red text, it is testimony to the settings Tab View. There are sizes, colors, etc..
5. Next step is to attach the following code before the code.
</head>
<script src='http://http://corderdrive.com/wp-content/uploads/2011/09/tabview.js' type='text/javascript'/>
6. Then save
7. Then go to the "Page Elements"
8. Then choose "Add a Gadget" -> "HTML / Javascript" in place that will be in place this Menu View Tab.
9. This is the script that must ye pairs copy and paste to new "HTML/Javascript" on sidebar or whatever you want:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>
10. Finally save your new "HTML/Javascript" see the result.
sources http://trik-tips.blogspot.com/2008/07/cara-membuat-menu-tab-view_31.html


Description: Create multi Tab View on blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Create multi Tab View on blogger

Posted by: Zein Okeh Share Everything, Updated at: Friday, September 30, 2011

0 komentar:

Post a Comment

Sorry if my english is bad

Related Posts Plugin for WordPress, Blogger...
Powered by Blogger.