Cara Membuat Widget Tab View Menu Tanpa Edit HTML di Blogger

Bagikan Artikel Ini :

Membuat Menu dengan Tab - Sebenarnya sudah banyak blog blog lain yang membahas tentang cara membuat tabview ini, namun dalam pembuatan tab view menu biasanya kita harus mengedit HTML template yang pasti sangat merepotkan dan apabila gagal resikonya bisa merusak template, meskipun tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.

Gambar Di atas adalah contoh Membuat Widget Tab View Menu Tanpa Edit HTML
Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di widget sidebar, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template.
Baiklah langsung saja kita praktekkan langkah langkahnya :

1. login dulu ke blogger 
2. kemudian pada Elemen Halaman klik Tambah Gadget
3. pilih yang HTML/Javascript. 
4. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<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="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:
Tulisan berwarna Orange merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan berwarna Merah merupakan warna judul Tab
Tulisan berwarna Biru merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kotak. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal berwarna orange tua merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau kode widget anda.
Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berwarna hijau dibawahnya. Demikian tadi tips  Membuat Widget Tab View Menu Tanpa Edit HTML

thanks to : iptek-4u

TERIMAKASIH SUDAH BERKUNJUNG KE BLOG INI, SEMOGA ARTIKEL INI MENAMBAH WAWASAN & MEMBERIKAN MANFAAT BAGI KITA SEMUA YANG MEMBACANYA...JANGAN LUPA UNTUK SELALU BERKUNJUNG KEMBALI...KARENA MASIH BANYAK ARTIKEL MENARIK LAINNYA YANG MENUNGGU UNTUK DIBACA OLEH PARA SOBAT SEMUA.
SELURUH ISI BLOG INI BOLEH DI COPY-PASTE DENGAN SYARAT MENCANTUMKAN LINK SUMBER DARI BLOG INI ( JIKALAU SOBAT TIDAK KEBERATAN ) THANKS... !
 

ARTIKEL TERKAIT :