Membuat Widget Tab View Menu Tanpa Edit HTML

Membuat Widget Tab View Menu Tanpa Edit HTML >> Memproduksi Widget Tab View Menu Tanpa Edit HTML >> Memproduksi Menu dengan Tab - Sebenarnya udah banyak blog blog lain yang membahas akan halnya cara memproduksi tabview itu, namun dalam pembuatan tab view menu biasanya kita kudu mengedit HTML template yang pasti begitu merepotkan serta apabila gagal resikonya sanggup merusak template, meskipun tidak barangkali rusak kalau sebelum melakukan pengeditan sudah membackup template terlebih dahulu.

Gambar Di atas adalah contoh Memproduksi 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:

login dulu ke blogger
kemudian dalam Elemen Pekarangan klik Tambah Gadget
pilih yang HTML/Javascript.
Setelah itu tambahkan kode script menu tab view-nya diantaranya dibawah itu:

<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 adalah keterangan daripada masing-masing kode. Silahkan atur nilainya sesuai keinginan Tulisan berwarna Merah adalah warna judul Tab
Tulisan berwarna Biru adalah judul Tab
Angka 300 dalam 'Width' menunjukkan panjang kotak serta 200 dalam 'height' menunjukkan tinggi kotak. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal berwarna orange tua adalah isi tab view. Silahkan ganti dengan teks, link, banner atau kode widget anda.
Kalau anda ingin menambah menu tab baru cukup tambahkan kode yang berwarna hijau dibawahnya. Demikian tadi tips Memproduksi Widget Tab View Menu Tanpa Edit HTML, contoh daripada tab view itu sanggup anda lihat di sidebar blog itu ^_^

Sumber : IPTEK-4U | TECHNOLOGY INFORMATION CENTER: Membuat Widget Tab View Menu Tanpa Edit HTML

Share on :

Bagikan

share

Diposkan oleh Unknown di 20:02 | 20 Apr 2012 | 0 komentar