Cara Membuat Menu Tab View Di Blog,
Sebenarnya ini sudah banyak di publish di blog tetangga, tapi apa salahnya
publih lagi untuk Anda yang belum membuat dan ingin Membuat Menu Tab View Di Blog.
Bagaimana Cara Pasang Tab View Menu Di blog ?, Jangan kemana-mana ikuti terus Master Chef karena Master Chef akan membahas tuntas mengenai resep ini. Berikut langkah-langkahnya :
Bagaimana Cara Pasang Tab View Menu Di blog ?, Jangan kemana-mana ikuti terus Master Chef karena Master Chef akan membahas tuntas mengenai resep ini. Berikut langkah-langkahnya :
- Silahkan masing-masing login kehalaman blog
- Jika semua sudah masuk ke akun blog masing-masing, sekarang Akses halaman Edit HTML Blogspot
- Jangan lupa juga untuk download template lengkap untuk antisipasi kesalahan dalam edit HTML
- Jika sudah masuk hlaman Edit HTML cari kode ]]></b:skin> ( Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode )
- Jika kode sudah ditemukan Copy kode dibawah dan letakan 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: #FF9900; /* Warna background Menu Utama Atas */ } div.TabView div.Pages
{ clear: both; border: 1px solid #6E6E6E; /* Warna
border Kotak Utama */ overflow: hidden; background-color: #FF9900; /* 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; }
6. Kode yang berwana Biru merupakan keterangan dari kode yang bisa kamu
rubah untuk penyesuaian dengan halaman blog kamu
7. Sekarang Klik Simpan template
8. Ok Langkah selanjutnya, Kembali ke dashbord blog kamu pilih "Tata
Letak atau Layout" 9. Klik Add a Gadget atau Tabah a Gadget
10. Tunggu bebera saat akan muncul tampilan seperti dibawah, kemudian pilih
Widget HTML/JavaScript 11. Copy Kode Berikut dan letakan kedalam kolom Widget
HTML/JavaScript
<form action="tabview.html"
method="get"> <div class="TabView"
id="TabView"> <div class="Tabs" style="width: 350px;"> <a>Tab
1</a> <a>Tab 2</a>
<a>Tab 3</a> </div> <div
class="Pages" style="width: 350px;
height: 250px;"> <div
class="Page"> <div class="Pad"> Tab 1.1 <br /> Tab
1.2 <br /> Tab 1.3 <br />
</div> </div> <div class="Page"> <div
class="Pad"> Tab 2.1 <br
/> Tab 2.2 <br /> Tab 2.3 <br /> </div> </div>
<div class="Page"> <div class="Pad"> Tab 3.1 <br /> Tab
3.2 <br /> Tab 3.3 <br />
</div> </div> </div> </div> </form> <script
type="text/javascript"> tabview_initialize('TabView');
</script>
Keterangan :
- Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
- Code yang berwarna Merah adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
Contoh punya
saya: Tab 1 ganti dg BLOG
Tab 2 ganti
dg Facebook
Tab 3 ganti
dg Tips Trik
3. Code yang berwarna Pink diatas adalah
halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar
atau link.
12. Klik Simpan
13. Selesai dan Lihat hasilnya
13. Selesai dan Lihat hasilnya
Sekian
Artikel dari saya, “Selamat Mencoba”!!!