Cara Membuat 3 Tab View dengan scroll di Blog

Cara Membuat 3 Tab View dengan scroll di Blog

Cara Membuat 3 Tab View dengan scroll di Blog - Membuat tampilan blog menjadi rapih dan teratur adalah hal yang di inginkan oleh para blogger hal ini bertujuan agar para pengunjung merasa betah untuk berkunjung ke blog tersebut.

Keterbatasan ruang pada blog terkadang membuat sebagian blogger bingung untuk menambah widget di blognya karena takut membuat tampilan blog nya menjadi kurang bagus karena terlalu banyak widget yang ditampilkan, dengan 3 tab view ini anda bisa menghemat ruang yang terpakai di blog anda sekaligus menambah indah tampilan blog anda.

Bukan hanya itu penggunaan 3 Tab view ini juga bisa dibilang efektif dalam menempatkan widget dan memperkecil ruang yang digunakan.

Berikut adalah cara menambah 3 tab view di blogger:

1. Login ke blog anda
2. Mauk ke Tata Letak
3. Pilih Tambah Gadget
4. Pilih HTML/JavaScript => masukan code html 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: 350px; height: 300px;" 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 type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>
5. Simpan.

Catatan:

  • Tanda berwarna Merah adalah keterangan dari kode. Silahkan atur sesuai selera
  • Tanda berwarna orange adalah warna dari judul Tab
  • Tanda berwarna hijau adalah judul Tab
  • Tanda biru muda pada angka 350 pada 'Width' menunjukkan lebar kotak dan 300 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya dan sesuaikan dengan template yang anda gunakan .
  • Tanda Ungu adalah isi dari tab view silahkan isi dengan apa yang akan ada tempatkan disana

Posting ini dapat anda cari dengan keywords:
Tutorial cara membuat 3 tab view dengan scroll di blog
cara membuat 3 tab view dengan scroll
cara membuat tab view di blog


Share This Article



Belum ada komentar untuk " Cara Membuat 3 Tab View dengan scroll di Blog "

Posting Komentar

Silakan Anda mengirim kritik, saran, atau pertanyaan ke :

E-mail:
Facebook:

Syarat dan ketentuan berkomentar :
1. Dilarang menghina siapa pun
2. Dilarang berkomentar sampah. Contoh : Promosi produk
3. Jangan menggunakan link hidup
Maaf bila saya belum bisa membalas komentar atau mengunjungi situs Anda. Terima kasih atas kunjungan atau komentar Anda di blog sederhana ini. Salam kami www.tutorial-kumplit.com...
Konversi Kode Emoticon Folllow

Back to Top