Slide Show Menu sangat berguna bagi anda yang ingin menambahkan sejumlah widget dalam satu tempat, misalkan Recent Post, Recent Comments, Link Blogroll, Link Banner teman, dll.
Tab View adalah salah satu alternatif dimana kamu bisa menghemat tempat dengan isi yang sama. Nahh..dengan tampilan sederhana dengan isi blog lengkap tentu terlihat lebih menarik khan........????
Pengen Praktekin caranya....Ikuti aja deh langkah dibawah ini...>>>>>
Langkah Pertama >>>>>
- Silahkan Login ke akun Blogger anda.
- Dari halaman dashboard, pilih Edit HTML.
- Pada halaman Edit HTML, centang "Expand Template Widget",
- Kemudian >>>>> cari kode ]]></b:skin> pada script template blog kamu.
Nah sudah dapat kode ]]></b:skin>
- Silahkan Copykan script berikut Kemudian letakkan di atas kode ]]></b:skin> tersebut..
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* 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;
font-size: 12px; /* besar hurup kotak utama */
}
Keterangan : >>>>>
Pada bagian yang diberi tanda keterangan(tulisan Berwarna * besar hurup kotak utama * , anda dapat mengubahnya sesuai dengan kata atau keterangan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.
Langkah Kedua >>>>>>
- Setelah itu letakkan kode berikut di bawah kode ]]></b:skin> >>>>>>>>>>
<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>
<script src='http://enes-sc.googlecode.com/files/tabview.js' type='text/javascript'/>
<script type='text/javascript'>
- Simpanlah hasil editing tersebut.
Langkah Ketiga >>>>>
Setelah kedua langkah diatas telah anda lakukan semua .......ikuti petunjuk selanjutnya.....
- Pilih tab Elemen Halaman ( Page Element ).
- Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
- Copykan script berikut dan letakkan pada kotak Content yang tersedia:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview
Widget">HDesign-comm</a></div>
Keterangan :
Silahkan anda ganti kata atau kalimat yang ada sesuai dengan keinginan dan kebutuhan anda termasuk jenis ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran %, atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.
Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar
Selanjutnya silahkan atur sedemikian rupa sehingga terlihat menarik.....Kemudian jika anda ingin melihat tampilannya ....silahkan KLIK pratinjau dahulu ...dan Kalau anda sudah puas dengan hasilnya .....silahkan Simpan.......
0 komentar:
Posting Komentar