Tab View Menu Pada Blogger

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Tab View Menu Pada Blogger. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Copy kode CSS di bawah ini

/* Begin Tab View Menu */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 40px; /*ukuran lebar tabmenu*/
text-align: center;
height: 20px; /*ukuran tinggi tabmenu*/
padding-top: 2px;
margin-right:0px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 10px; /*besar hurup menu*/
letter-spacing: -1px;
background:rgba(0, 0, 0, 0.25); /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

div.TabView div.Tabs a.Active {
background:rgba(255, 255, 255, 0.75); /*warna background menu aktif*/
color: #000;
}

div.TabView div.Tabs a:hover {
background:rgba(255, 255, 255, 0.75); /*warna background menu hover*/
color: #FFF;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background::rgba(0, 0, 255, 0.5); /*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;
font-size: 10px; /*besar hurup kotak utama*/
}
/* End Tab View Menu */

5. Paste di atas kode

</b:skin>

6. Setelah itu copy kode di bawah ini

<script src='http://pes-patch.co.cc/TabViewMenu/script.js' type='text/javascript'/>

7. Kemudian letakkan di bawah kode

</b:skin>

8. Simpan Template dulu
9. Kemudian masuk ke Elemen Laman
10. Klik Tambah Gadget
11. Pilih HTML/Javascript
12. Masukkan code di bawah ini pada kotak kontent

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Tab View Menu
Isi Tab View Menu
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Tab View Menu
Isi Tab View Menu
Isi Tab View Menu
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Tab View Menu
Isi Tab View Menu
Isi Tab View Menu
</div></div>
<!--Akhir Menu 3-->

</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');</script>

13. Klik Simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait