karena melihat para newbei belom faham edit HTML dalam template dan mereka merasa kesulitan memasang menu tab view horizontal ini maka saya pun mencoba cari cara yang paling mudah dan kebetulan saya sudah menemukan cara yang paling mudah karena cara ini sobat tidak perlu masuk ke edit HTML yang ribet,
dengan cara baru ini saya coba menggabungkan kode CCS dan kode HTML langsung ke javascript/HTML dan alhamdulilah jalan dengan baik.
ok langsung saja ikuti langkah2 berikut untuk memasang menu multi tabview horizontal ini'
1-> dalam keadan login blog masing2 silahkan masuk ke menu dasboard->design->dan add a gadget.
2->silahkan pilih javascript/HTML dan paste semua kode dibawah ini tampa terkecuali.
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">
<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 1
</div>
</div>
<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 2
</div>
</div>
<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>
<script style="text/javascript" src="https://projectloss.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
NOTA:
-yang saya beri warna biru diatas silahkan ganti dengan judul menu yang anda pasang
-dan yang saya beri warna merah silahkan ganti dengan kode widget yang anda inginkan ,bisa juga kode banner dan kode iklan
3-> setelah selesai melakukan pengeditan silahkan klik simpan dan lihat hasilnya
demikian lanjutan tutorial blogger cara pasang menu multi viewtab horizontal ini sudah selesai ,cara ini adalah cara yang paling mdah dilakukan miskipun sobat baru saja belajar ngeblog saya yakin sobat pasti bisa melakukan hal diatas.
ok selamat mencoba semoga berhasil ....dan semoga tutorial ini masih bermamfaat...terimakasih