Membuat Menu Tab View Tanpa Edit HTML

Membuat Menu Tab View Tanpa Edit HTML » The FIM Site kali ini akan sedikit berbagi info mengenai Membuat Menu Tab View Tanpa Edit HTML. Setelah sebelumnya saya memposting Membuat Menu Accordion Tanpa Edit HTML kali ini saya juga akan memposting tutorial yang berkaitan dengan editing blogspot yang saya peroleh dari masternya yaitu www.maskolis.com. Disitus tersebut Anda akan menjumpai beragam tutorial yang membahas editing blog hingga optimalisasi penampilannya dan ini semua bisa Anda dapatkan secara free alias gratis.

Kebetulan saya waktu itu juga secara tidak sengaja mendapatkan tutorial ini karena saya kira tutorial ini sangat bermanfaat jadi saya kira saya posting dan juga tutorial ini saya gunakan pada template saya ini. Oh iya di maskolis.com Anda juga bisa mendapatkan template yang dikhususkan untuk platform blogspot tetapi kalau untuk yang selain itu saya kurang tahu dan template yang saya gunakan ini adalah template yang diberikan secara gratis juga namun sudah saya modifikasi total dari segi SEO hingga penggunaan item-itemnya.

Oiya kenapa jadi melantur kesana kemari ya. Untuk demonya bisa dilihat pada gambar diatas atau dilihat pada sidebar The FIM Site. Langsung saja ke tutorial maklum disini saya mencoba memberikan informasi dimana letaknya untuk bisa berinteraksi mendapatkan tutorial blog secara free dan mudah penerapannya. Berikut adalah tutorialnya:

1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) :
   <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: #000; /* 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: 300px;" class="Tabs"> <a><span style="color: #fff">Tab 1</span></a> <a><span style="color: #fff">Tab 2</span></a> <a><span style="color: #fff">Tab 3</span></a> </div> <div style="width: 300px; height: 200px;" class="Pages"> <div class="Page"> <div class="Pad"> konten 1 </div> </div> <div class="Page"> <div class="Pad"> konten 2 </div> </div> <div class="Page"> <div class="Pad"> konten 3 </div> </div> </div> </div> </form> <script src="https://sites.google.com/site/thefimsite/file/tab_view.js" type="text/javascript"> </script> <script type="text/javascript"> tabview_initialize('TabView'); </script></div>
4. Terakhir Save, lihat hasilnya

Keterangan :

• Tab1, Tab2, Tab3 : Judul heading menu tabview
• konten 1, konten 2, konten 3: Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)