Membuat Widget Tab View Menu Tanpa Edit HTML

Membuat Widget Tab View Menu Tanpa Edit HTML >> Membuat Widget Tab View Menu Tanpa Edit HTML >> Membuat Menu secara Tab - Sebenernya udah jumlah blog blog berbeda dengan meriset tentang tips membuat tabview ini, namun, pada pendirian tab view menu lazimnya saya harus merawat HTML template sudah pasti sangat merugikan dan waktu tidak berhasil resikonya sanggup merundung template, walaupun tak mungkin susah jika sebelum berbuat pengeditan telah hampir membackup template terlebih lepas.

Gambar Di atas adalah contoh Membuat Widget Tab View Menu Tanpa Edit HTML

Sesudah bereksperimen, lorot aku buktikan secara meletakkan logat script-nya terbuka dalam widget sidebar, ternyata sehat. Secara menggabungkan seluruh logat dengan tersedia, pendirian menu tab view tak butuh saja terik [ki] melarat merawat HTML template.
Sungguh terbuka aja saya praktekkan tahapan langkahnya:

login lalu pada blogger
lalu pada Unsur Halaman seksi Via Gadget
seleksi dengan HTML/Javascript.
Sesudah tersebut tambahkan logat 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>

Realitas:
Vokal berupa Warna orange merupakan realitas dari masing-masing logat. Monggo atur nilainya serasi penerimaan Vokal warna marah merupakan rona titel Tab
Vokal berupa Biru merupakan titel Tab
Timbangan 300 pada 'Width' menampilkan tinggi petak-petak dan 200 pada 'height' menampilkan menjulung petak-petak. Monggo tiru nilainya serasi dimensi template kamu.
Vokal dengan dicetak tebel berupa warna orange tua leler merupakan murad tab view. Monggo tiru secara tulisan, link, banner ataupun logat widget kamu.
Jika kamu mau mengeraskan menu tab bau kencur komplit tambahkan logat dengan berupa kecil dibawahnya. Demikian tadinya teknik Membuat Widget Tab View Menu Tanpa Edit HTML, petunjuk dari tab view ini sanggup kamu amati dalam sidebar blog ini ^_^

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