Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara Membuat Widget Menu TAB View Pada Blog

Cara Membuat Widget Menu TAB View Pada Blog-Selamat sore sob, kembali lagi admin mau berbagitip untuk blogger, pada postingan kali ini saya ingin memberikan tutorila cara membuat Tab View. Ini sangat berguna, terutama kotak mungil ini mampu memuat widget yang cukup banyak seperti Anda lihat pada sidebar blog ini terdapat tapilan tabview”Popular“, “Recent“, “Comments“.

Untuk pemasangannya pun tidaklah begitu sulit, yang perlu Anda lakukanhanyalah memasang kode scipt yang saya brikan dibawahini dan penempatanya yang perlu Anda cermati secara seksama supayatidak mengalami kesalahan atau tidak terjadi hal-hal yang tidak diinginkan.

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.
Loading...

Add a Comment

Your email address will not be published. Required fields are marked *

More in Blogger
Cara Mengubah Link Logo Header

Cara Mengubah Link Logo Header-Setelah saya mencoba migrasi dari blogger ke...

Close