Dari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari
multi halaman/multi tab tersebut.
Yup! Membuat
Widget sederhana yang bertujuan untuk menghemat tempat,sekaligus menambah kerapian dari
blog/web tersebut.
Selain itu,pengunjung tidak merasa lelah menaikan maupun menurunkan
scrollbar hanya untuk sekedar menari status dari blog tersebut.
Nah! kesempatan kali ini,akan membahas tentang
widget multi tab tersebut.
Sebenarnya
artikel ini sudah di publikasikan oleh Mas Herman di artikelnya ’
Menambahkan Widget Tab View Pada Blog’.
Pelajaran Blog tanpa mengurangi etika blogging,akan menjabarkannya lagi.
Sebenarnya sangat sederhana dalam membuat
widget bertab-tab ini,untuk yang belum tahu
cara membuatnya,anda bisa ikuti lagkah berikut:
Cara Membuat Multi Halaman
Pergilah ke
Dashboard,lalu pilih
Tata Letak,kemudian pilih
Add New Widget/Tambah Gadget/Element Baru,pilih
HTML/Javascript.
Letakkan kode berikut:
<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 style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">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 ANDA TAMPILKAN PADA TAB 1
</div>
</div>
<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>
<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>
<script style="text/javascript" src="http://scriptforyou.googlecode.com/files/tabview.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
Untuk kode yang berwarna
hijau, ubahlah dan gantilah sesuai keinginan anda,sedangkan kode yang berwarna
merah,hanya sebuah penjelasan dari masing-masing kode.
Sekarang tinggal menyisipkan kode-kode html yang ingin anda letakkan pada masing-masing
tab.
Anda bisa meletakkan seperti,kode
Shout,Recent Comment,Blogroll dll.
Semoga berhasil ya..
Oh ya..Special..makasih buat mas Herman :D
(Sumber : http://pelajaran-blog.blogspot.com)