Malam Sobat Free Download dan Tutorial, Setelah sebelumnya saya share tentang Cara Membuat Recent Post, Cara Membuat Recent Comment serta Membuat Daftar isi di Blog. Pada Kali ini, saya akan share bagaimana menggabungkan ketiga widget Recent Post, Comment dan Daftar isi dalam satu tempat dengan Cara Membuat Tab View. Contohnya bisa sobat lihat pada gambar disamping. Manfaat dengan adanya Tab View, bisa menghemat space atau tempat di sidebar anda. Baiklah, langsung saja untuk membuat Tab View di Blog ikuti langkah-langkah di bawah ini.
- Login ke akun Blogger anda
- Klik Tata Letak > Tambah Gadget pilih HTML/JavaScript
- Copy dan paste Script dibawah ini
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px; /* Lebar Kotak Tab */
height: 30px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #c4c4c4; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #000000; /* 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: 1px; /* 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: 330px;" class="Tabs">
<a><span style="color:white">Judul Widget 1</span></a>
<a><span style="color:white">Judul Widget 2</span></a>
<a><span style="color:white">Judul Widget 3</span></a>
</div>
<div style="width: 330px; height: 390px;" class="Pages">
<div class="Page">
<div class="Pad">
Letakkan Kode Widget 1 disini (Mis : Recent Post)
</div>
</div>
<div class="Page">
<div class="Pad">
Letakkan Kode Widget 2 disini (Mis : Daftar Isi)
</div>
</div>
<div class="Page">
<div class="Pad">
Letakkan Kode Widget 3 disini (Mis : Recent Comment)
</div>
</div>
</div></div></form>
<script style="text/javascript" src="http://projectloss.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');</script> - Keterangan :
- Untuk tulisan yang berwarna Biru, ganti dengan judul tiap widget yang dipasang
- Untuk tulisan berwarna Merah ganti atau isi dengan Kode widget yang ingin anda pasang. misalnya:
- Kode untuk Recent Post bisa anda liat disini
- Kode untuk Daftar Isi bisa anda liat disini
- Kode untuk Recent Comment anda liat disini
- setelah selesai semua, silahkan simpan dan lihat hasilnya.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
2 komentar
Click here for komentarmas ....
Replykode yang bertuliskan warna merah itu ap ya kode widgetnya .....
di bantu ya mas ......
silahkan mas lihat di Point nomor 4, masing" sudah saya buatka artikelnya..
Reply# Silahkan Anda Berkomentar dengan Baik dan Sopan
# Pesan dilarang Mengandung SARA dan Spam
# Terima Kasih Telah berkunjung di Blog Sederhana ini ConversionConversion EmoticonEmoticon