Penggunaan Menu Tab View di Blog
ini sangatlah tepat dan bermanfaat terutama bagi kita yang ingin
menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain
yang menarik juga membuat tampilan blog kita terlihat apik dan menawan
ini memungkinkan blog kita seolah profesional. Langkahnya pembuatannya
sangatlah mudah, namun tetap saya anjurkan bila dalam oprek template ini
sebaiknya kita jangan lupa untuk mendownloadnya terlebih dahulu, agar
terhindar dari kesalahan fatal.
Langka yang harus sobat ikuti .1. Masuk ke akun blogger kita masing-masing.
2. Klik Rancangan.
3. Klik edit HTML.
4. Klik Expand Template Widget.
5. Lalu cari kode berikut. ]]></b:skin> Letakan kode berikut di atasnya.
/* Menu Tab View */div.TabView div.Tabs {padding-top: 0px;height: 24px;overflow: hidden;}/* Menu Utama */div.TabView div.Tabs a {float: left;display: block;width: 80px; /*ukuran lebar tabmenu*/text-align: center;height: 24px; /*ukuran tinggi tabmenu*/padding-top: 3px;margin-right:4px; /*jarak antartabmenu*/vertical-align: middle;border: 1px solid #CCC; /*warna border menu*/border-bottom-width: 0;font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/font-size: 12px; /*besar hurup menu*/letter-spacing: -1px;background-color: #0414FC; /*warna latar menu*/color: #FFFFFF; /*warna hurup menu*/-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;}div.TabView div.Tabs a.Active {background-color: #FC0C0C; /*warna background menu aktif*/color: #FFFFFF;}div.TabView div.Tabs a:hover {background-color: #0CFC0C; /*warna background menu hover*/color: #FFFFCC;font-weight: bold;}/* Kotak Utama */div.TabView div.Pages {clear: both;border: 1px solid #CCC; /*warna border kotak utama*/overflow: hidden;background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;font-size: 12px; /*besar hurup kotak utama*/}
6. Cari kode berikut.]]></b:skin>
Letakan javascript berikut di bawahnya.
<script src="http://evawangi.googlecode.com/files/tabviewev.js" type="text/javascript"/>
Sampai sini Save Template sobat, lalu :
7. Langkah Selanjutnya :
Klik menu rancangan.
Klik add gadget.
Pilih HTML/JavaScript.
Masukan kode berikut.
<form action="tabview.html" method="get"><div id="TabView" class="TabView"><div style="width: 100%;" class="Tabs"><a title="Keterangan Menu 1">Menu 1</a><a title="Keterangan Menu 2">Menu 2</a><a title="Keterangan Menu 3">Menu 3</a><a title="Keterangan Menu 4">Menu 4</a></div><div style="width: 100%; height: 200px;" class="Pages"><!--Awal Menu 1--><div class="Page"><div class="Pad">Isi Menu 1.1<br/>Isi Menu 1.2<br/>Isi Menu 1.dst<br/></div></div><!--Akhir Menu 1--><!--Awal Menu 2--><div class="Page"><div class="Pad">Isi Menu 2.1<br/>si Menu 2.2<br/>Isi Menu 2.dst<br/></div></div><!--Akhir Menu 2--><!--Awal Menu 3--><div class="Page"><div class="Pad">Isi Menu 3.1<br/>Isi Menu 3.2<br/>Isi Menu 3.dst<br/></div></div><!--Akhir Menu 3--><!--Awal Menu 4--><div class="Page"><div class="Pad">Isi Menu 4.1<br/>Isi Menu 4.2<br/>Isi Menu 4.dst<br/></div></div><!--Akhir Menu 4--></div></div></form><script type="text/javascript"> tabview_initialize ('TabView'); </script>
<a href="http://evawangi.blogspot.com/2012/06/menu-tab-view-di-blog.html" target="blank">[Get This]</a>
8. Klik Save Gadget dan selesai, mudah khan ? Semoga bisa bermanfaat !
Tidak ada komentar:
Posting Komentar