Cara Membuat Tab View di Blogger

Cara Membuat Tab View di Blogger

Tutorial Blog - Jika pada tutorial sebelumnya tentang membuat widget blogroll melayang untuk tutorial kali ini saya akan share cara membuat Tab View di blogger/blogspot. fungsi dari tab view adalah meminimalisasikan widget gadget pada blog agar terlihat simple, dan nyaman untuk dilihat sehinggan dapat mengemat ruang pada blog sehingga tidak terlihat sesak.

Ada 4 tab view cantik yang bisa kamu gunakan dibawah ini. Untuk css style-nya, silahkan kamu masukkan kode di bawah ini sebelum </skin>

Tab slide/view model 1

/* tab model 1 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: right; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 3px 3px 5px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomleft: 10px; -moz-border-radius-topleft: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background:#E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff url('bg-tabateonsoft.jpg') no-repeat bottom right; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

Tab slide/view model 2

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

Tab slide/view model 3

/* tab model 3 ateonsoft.com */
div.Tabateonsoft {margin:25px 0 0 0; font: normal 11px arial;}
div.Tabateonsoft div.TFs
{height:27px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:3px 4px 3px 4px; margin:0 2px 0 0;letter-spacing:-0.01em;
background:#f0f0f0;
color: #333;
border:1px solid #CCCCCC;
}
div.Tabateonsoft div.TFs a:hover
{
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;}
div.Tabateonsoft div.TFs a.Active
{ background: #FFFFFF;
color:#f58220;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:200px; padding:0;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabateonsoft div.Pages div.Page div.floor li { margin:0; padding:0;}

Tab slide/view model 4

/* tab model 4 ateonsoft.com */
div.Tabateonsoft {margin:15px 0 0 0; font: normal 11px arial;}
div.Tabateonsoft div.TFs
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.Tabateonsoft div.TFs a:hover
{ background:#ccc;}
div.Tabateonsoft div.TFs a.Active
{ background: #333; color:#FFFFFF;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabateonsoft div.Pages div.Page div.floor li {
margin:0; padding:0;}

Pada Menu EDIT HTML silahkan masukan kode berikut setelah <head> atau sebelum </head> :

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

Lalu tambah gadget dan pilih HTML/JavaScript dan masukkan kode berikut ini:

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>