Cara Membuat Tab Menu View Blog

Kembali lagi kepada kalian para blogger yang ingin menambah aksesoris blog sekaligus menghemat widget. Selain nampak elegan juga dapat mempercepat loading blog dengan mengurangi jumlah widget yang akan ditampilkan, sehingga semua keinginan kalian agar selalu tampil lengkap dengan penambahan Tab Menu View.

Kalian bisa perhatikan gambar Tab Menu View yang ada di bawah ini:

Seperti itulah yang kali ini saya bahas, akan tetapi jumlah tab yang berbeda.

Berikut langkah-langkahnya:

Login ke akun Blogger
Lalu pilih Tata Letak
Klik Sub Menu Edit HTML
Pada Kotak Edit HTML cari Kode ]]></b:skin>

Lalu copy kode di bawah ini dan pastekan tepat diatas kode ]]></b:skin>

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;}

Lalu letakkan script berikut ini tepat dibawah kode <head>

<script src='http://scriptsyam.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>

atau:

<script src='http://h1.ripway.com/andisyam/javascriptku/tabview2atensoft.js' type='text/javascript'/>

Simpan Template
Lanjut ke Element Halaman
Klik Add Widget Element
Pilih Menu HTML/Java Script

Lalu Copy kode di bawah 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 */
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
/* Disini letakkan kode untuk tab 2 */
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
/* Disini letakkan kode untuk tab 3 */
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
/* Disini letakkan kode untuk tab 4 */
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Sampai tahap ini selesai sisa ganti tulisan yang kedap kedip dengan kode.

Selamat mencoba, semoga sukses.

Cara Membuat Tab Menu View Blog

Related Posts →

Open Disqus Close Disqus