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:
  1. Login ke akun Blogger
  2. Lalu pilih Tata Letak
  3. Klik Sub Menu Edit HTML
  4. Pada Kotak Edit HTML cari Kode ]]></b:skin>
  5. 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;}
  6. 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'/>
  7. Simpan Template
  8. Lanjut ke Element Halaman
  9. Klik Add Widget Element
  10. Pilih Menu HTML/Java Script
  11. 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>
  12. Sampai tahap ini selesai sisa ganti tulisan yang kedap kedip dengan kode.

Selamat mencoba, semoga sukses.

Related Posts →


Open Disqus Close Disqus

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Blogger Cookies