Membuat Tab View/Widget Multi halaman Di blog

Advertisemen
Pastinya sudah pada tahu kan apa itu tab Multi Halaman/Tab View?? selain menarik, tab view ini jg berfungsi untuk menghemat halaman, khususnya di bagian Sidebar web/blog.
sebelumnya saya ucapkan terimakasih buat sobat @Dadi Kasih yang sebelumnya sudah Requez trik ini.
karena udah ada yng nungguin jadi langsung saja ke TKP.... hihihii

demo:


Ikuti langkah-langkah berikut:

  • Loginke akun blogger sobat
  • Masuk ke rancangan/design
  • Pilih Tata Letak
  • Pilih Add New Widget/Tambah Gadget/Element
  • klik HTML/Javascript.
  • Kemudian copy paste kode 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: #222222; /* 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: 385px;" class="Tabs">
<a><span >TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span >TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN SOBAT TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="https://sites.google.com/site/kodeblogger/javascript/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

  • Jangan lupa Simpan widget. Silahkan edit warna, ukuran dan seterusnya menurut seleera sobat sendiri.

Untuk mempermudah mengedit warna silahkan DISINI
Selamat mencoba.....
Advertisemen

Disclaimer: Gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
Related Posts
Disqus Comments