» » Cara Buat Tab Menu Versi 1 Di Blogspot

Cara Buat Tab Menu Versi 1 Di Blogspot

Monday, August 10, 2009 | Posted by Admin

Waktu lalu saya lagi jalan-jalan eh ada bahan untuk ngeblog yaitu TAB MENU,salah saru cara untuk menghemat space pada pada tlemplate anda. Bagaimana cara memasang pada template anda?Coba perhatikan dengan santai,berikut ini cuplikannya :
Langkah Pertama :
1-Log in ke account blogger anda.
2-Click Lay Out---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpat pada folder anda.
3-Cari kode didalam template anda,letaknya di bagian atas.
4-Copy pastekan script di bawah ini tepat diatas kode </head>;
<script src=' http://www.hotlinkfiles.com/files/2734091_rgx15/tab_menu1.js' type='text/javascript'/>
Perhatian :
-Ganti Direct Link File JS yang saya tulis dengan warna biru dengan Direct link anda sendiri, agar tidak terjadi over load penggunaan bandwith.


Download

Setelah anda download up load file js tersebut ke account anda sendiri Baca Disini !!.
5-Jika sudah selesai cari lagi kode ]]> di dalam template anda.
6-Kemudian copy pastekan script di bawah ini tepat diatas kode ]]> .


div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }


Catatan: Kode yang saya tandai dengan warna hijau adalah kode warna yang bisa anda ganti dengan warna favorite anda untuk kode warna lihat di akhir artikel ini.
7-Jika sudah selesai klik save.

Langkah Kedua :
1-Log in ke account blogger anda.
2-Click Lay out--->ADD GADGET--->HTML/JAVA SCRIPT.
3-Copy pastekan script di bawah ini kedalam kolom new gadget tadi pada posisi EDIT HTML jangan pada posisi COMPOSE/menulis.
<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #a4e11e;">

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul Tombol Tab 1</a>
<a>Judul Tombol Tab 2</a>
<a>Judul Tombol Tab 3</a>
<a>Judul Tombol Tab 4</a>
</div>
<div style="width: 100%; height: 300px;" class="Pages">

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

Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 1" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>


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


Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 2" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>


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


Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 3" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>


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


Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 4" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
Keterangan :
-Kode a4e11e yg warna hijau adalah kode warna border.
-Ganti tulisan JUDUL TOMBOL TAB 1,2,3 dan 4 dengan judul anda sendiri misalnya untuk tab 1 judulnya free template dan tombol ke 2 ruang chat dan seterusnya, sesuai menu anda sendiri.
-Angka 300 yang warna hijau adalah ukuran tinggi dari kotak TAB MENU,ganti dengan ukuran anda sendiri.
-Tulisan yg warna biru Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 1,2,3 dan 4 adalah ruang untuk anda memasang menu anda bisa banner,widget gambar dan sebagainya.
5-Jika sudah selesai klik save.
Selamat mencoba dan semoga berhasil

Related With:

Trick
Tips

Labels: , , ,  

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)