Membuat Menu Tab View Blog

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...!!

Posted in: Umum