Cari Artikel Blog Ini

Total Tayangan Halaman

CARA MEMBUAT MENU TAB VIEW

Menu Tab View sangat berguna sekali untuk dipasang pada sebuah blog. Bentuknya kecil tapi isinya padat sekali, berarti sangan cocok untuk blog yang telah memilki banyak label dan postingan.
Cara menampilkan menu tab view sebenarnya sangat mudah, tapi karena tips dari blog sahabat, ada script yang digunakan tidak berfungsi. Akhirnya EPG Studio berulang kali mencoba dengan berbagi cara dari tips yang berbeda. Setelah berhasil EPG Studio mencoba mengganti script yang tidak berfungsi tadi dengan script simpanan EPG Studio.

Anda ingin menampilkan Menu Tab View, ikuti langkah-langkah dibawah ini.
  1. Masuk ke Blogger
  2. Pilih Rancangan
  3. Pilih Edit HTML
  4. Download Template Lengkap terlebih dahulu jika takut gagal
  5. Copy seluruh kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>


    div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000; /* Warna Font Menu Utama Atas */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #66B5FF; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #66B5FF; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }



    Kode yang berwarna kuning merupakan pengaturan untuk ukuran dan warna dari penampilan menu tab view. Silahkan anda ganti sesuai dengan keinginan anda. Kode Warna dapat anda lihat disini atau disini
  6. Selanjutnya, copy kode dibawah ini kemudian paste tepat diatas kode </head>

    <script src='http://sites.google.com/site/epgstudiosite/javascript/tabview.js' type='text/javascript'/>



  7. Klik Simpan Template
  8. Selanjutnya anda pilih Elemen Halaman.
  9. Klik Tambah Gadget
  10. Klik tanda + pada HTML/Java Script
  11. Copy kode dibawah ini kemudian paste pada kolom konten yang tersedia

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 98%;" class="Tabs">
    <a>Tips Untuk Blogger</a>
    <a>Free Download</a>
    <a>MP3 Terbaru</a>


    </div>
    <div style="width: 98%; height: 250px;" class="Pages">

    <div class="Page">
    <div class="Pad">

    <a href="URL/alamat link target" target="_blank">Isi Tips Untuk Blogger 1</a> <br />
    <a href="URL/alamat link target" target="_blank">Isi Tips Untuk Blogger 2</a> <br />
    <a href="URL/alamat link target" target="_blank">Isi Tips Untuk Blogger 3</a> <br />


    </div>
    </div>

    <div class="Page">
    <div class="Pad">

    <a href="URL/alamat link target" target="_blank">Isi Free Download 1</a> <br />
    <a href="URL/alamat link target" target="_blank">Isi Free Download 2</a> <br />
    <a href="URL/alamat link target" target="_blank">Isi Free Download 3</a> <br />


    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    <a href="URL/alamat link target" target="_blank">Isi MP3 Terbaru 1</a> <br />
    <a href="URL/alamat link target" target="_blank">Isi MP3 Terbaru 2</a> <br />
    <a href="URL/alamat link target" target="_blank">Isi MP3 Terbaru 3</a> <br />


    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>



    Catatan :
    1. Kode angka yang berwarna merah merupakan ukuran lebar dan tinggi dari tab view, silahkan anda atur.
    2. Kode URL/alamat link target ganti dengan Url/alamat link target dari postingan yang anda tampilkan
    3. Kode yang berwarna pink adalah kode yang tampil di menu utama (bagian atas). Anda dapat menambahkan menu lainnya yang diletakan dibawah menu yang suda ada.
    4. Kode yang berwarna kuning merupakan isi dari tab view. Anda mengisi dengan link, banner, atau apa saja sesuai dengan keperluan anda. Anda juga dapat menambahkan isi dari dari tab view dibawah kode yang berwarna merah.
  12. Setelah anda selesai mengedit, klik Simpan
  13. Lihat Blog anda...!!


Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
10 Comments

10 komentar :

Seti@wan Dirgant@Ra mengatakan...

Boleh dicoba nih bang,... makasih yah..

diamond0 mengatakan...

KERENNNNNNNNNNN =))

Bachabe mengatakan...

kebetulan pingin pake TAB VIEW bakalan suport ngak bang beberapa kali bikin ngak jadi jadi muda mudahan yang ini bisa makasaih bang tak cobain

lerry mengatakan...

ok Bos Dicoba Dulu.

blackmore mengatakan...

semuanya berhasil...terimakasih banyak bang..
masih ada ganjalan nih...
gimana ya ? cara nampilin kotak komentar...
kode-kode html yang di maksud (di layoutku)kok gak ada ya?
layout-ku tu ambil dari finalsense.com
ada apa gerangan ?

aab73 mengatakan...

thank's.......

A. Jauhari mengatakan...

kenapa member google jadi cuma 8 kamanain tuh..

Anonim mengatakan...

P'misi gan, mau nanya.. kalau bikin link 'facebook' di menu utama kayak punya'nya agan yang ada diatas (menu utama), itu kek mana ya??? bingung niiih... mohon bantuannya..

AYU mengatakan...

berhasil...terimakasih bro ...

Rudy Hartono mengatakan...

mantap tutorialnya,salam kenal

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!