Cara Mudah Membuat Tab View Pada Blog

Nah kali ini saya akan membahas bagaimanaCara Mudah Membuat Tab View Pada Blog, sekaligus menjawab pertanyaan sobat yang kemarin meng-email saya bertanya bagaimana membuat widget tab view? Maaf baru sempat ngasih tutorialnya karena masih sibuk dengan aktivitas offline. Nah sobat tau gak tab view itu apa? Tab View adalah tambahan widget yang berbentuk tab. keuntungan dari tab wiew ini selain menghemat ruang pada blog, tab wiew ini juga mampu membuat blog kita semakin ringan saat loading, selain itu tab wiew menjadikan blog kita terlihat rapi dan menarik. Nah sebernarnya cara  nya cukup mudah, sobat tinggal ikuti langkah2 berikut ini :

1. Login ke blogger dengan akun sobat

2. Masuk ke " Perancangan "

3. Pilih " Edit HTML "

4. Centang Expand Template Widget

5. Cari kode berikut ]]></b:skin> gunakan Ctrl + F untuk memudahkan pencarian

6. Copy kode berikut dan paste tepat di atas kode ]]></b:skin>

/* 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: 0px;
}
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;}

7. Copy kode berikut dan paste kode tersebut tepat di atas </head>

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

8. Kemudian save template
9. Lanjut ke langkah selanjutnya yaitu masuk ke " Elemen Laman "
10. Tambahkan widget " HTML/Java Script "
11. Copy dan paste kode di berikut di dalam widget HTML/Java Script

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab 1</a>
<a>tab 2</a>
<a>tab 3</a>
<a>tab 4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
<a href="http://rockmanticks.blogspot.com/" target="blank">Rockmanticks</a>
Letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

12. Simpan template dan lihat hasilnya.
Silahkan mencoba sobat, Semoga artikel kali ini bisa bermanfaat bagi sobat..


Jika tidak keberatan mohon kontribusinya untuk menambahkan google plus 1 pada artikel ini.