Make a Widget Multi Pages / tabview

0 comments


From this you see the picture next to it, you'd understand what I mean from a multipage / multi tab.

Yup! Make a simple widget that aims to save space, as well as add neatness of the blog / web.

In addition, visitors do not feel tired raising and lowering the scrollbar just to dancethe status of the blog.
Actually this article was published by Mas Herman in his article 'Adds Widget TabView On Blogs'.
Blog lesson without reducing the ethics of blogging, will translate it again.
Actually very simple in its make-tabbed widget tabs, to the uninitiated how to make it, you can follow lagkah follows:


How to Create Multi-Page


Go into Dashboard, select Layout, then select Add New Widget / Gadget Add / NewElement, select HTML / Javascript.
Place the following code
:


<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */ 
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ 
background-color: #222222; /* Warna background Kotak Tab */ 
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ 
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span 
style="color:white">TAB 1</span></a>
<a><span 
style="color:white">TAB 2</span></a>
<a><span style="color:
white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML 
Content  Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>



To code a bold, change and replace your ownwhile the red codejust anexplanation of each code.

Now we just insert the html code you want to put on each tab.
You can put such code, Shout, Recent Comments, Blogroll etc.