CARA MEMBUAT WIDGET MENU TAB VIEW PADA BLOG

BAGAIMANA CARA MEMBUAT WIDGET MENU TAB VIEW PADA BLOG?

Ok kita langsung saja ketahap pembuatan Tab View Di blog. Hal utama yang perlu Anda lakukan adalah login ke akun blogger Anda. Setelah berhasil login, pada dashboard blog pilih “Template“⇒”Edit HTML” lalu cara kode ]]></b:skin> (Gunakan CTRL+F untuk mempercepat pencarian).

Sudah ketemu belom kodenya? Kalau sudah silahkan copy kode dibawah ini lalu pastekan kode tersebut diatas kode ]]></b:skin>.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: “Times New Roman”, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna 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;
}

Siahkan perhatikan perhatikan pada text yang saya tandai dengan warna merah, itu adalah bagian keterangan untuk mengatur tampilan Tab View. Seperti pengaturan warnadll. Untuk mengetahui kode warna bisa mengunjungi disini.

Lanjut ke tahap berikutnya, silahkan cari kode, silahkan copy kode dibawah ini kemudian pastekan kode tersebut sebelum kode </head>.

<script src=’http://kendhin.googlepages.com/tabview.js’ type=’text/javascript’/>

Jika sudah, silahkan “Simpan“. Sekarang pergi ke “Tata Letak“⇒”Tambah Gadget“⇒”HTML/JavaScript“. Masukan kode dibawah inikedalam kotak “HTML/JavaScript“.

<form action=”tabview.html” method=”get”>
<div class=”TabView” id=”TabView”>
<div class=”Tabs” style=”width: 350px;”>
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class=”Pages” style=”width: 350px; height: 250px;”>

<div class=”Page”>
<div class=”Pad”>
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class=”Page”>
<div class=”Pad”>
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class=”Page”>
<div class=”Pad”>
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script>

Keterangan:

• Kode warna biru adalah ukuran tinggi dan lebar Tab View
• Kode warna hijau adalah text yang berada di menu atas
• Kode warna merah adalah isi dari tab tersebut. Anda apat mengisinya dengan link atau gambar.

Share

Tweet