Cara Memasang Widget Multi Tab di Blogger
Banyaknya widget atau gadget yang
ingin dipasang pada blog tentunya dapat memenuhi ruang pada sidebar di
blog. Agar tak memakan tempat dan untuk menghemat ruang pada blog, kita dapat
memasang multi tab pada sidebar untuk meletakkan widget-widget tersebut.
Jumlah tab dalam widget multi tab
ini adalah sebanyak 3 tab. Script widget multi tab ini dipasang langsung
pada menu “HTML/JavaScript”. Jadi, kita tidak perlu mengedit HTML template
blog.
Berikut ini langkah-langkah dalam
memasang widget multi tab di Blogger. Silakan disimak dan semoga berhasil dan
juga bermanfaat.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan
>> Elemen Laman >> Tambah Gadget
>> HTML/JavaScript.
3. Copy kode di bawah ini dan
paste di kolom “Konten”.
<style
type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px; /* 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: 0px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", verdana; /* 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: 390px;" class="Tabs">
<a><span style="color:white">Judul TAB 1</span></a>
<a><span style="color:white">Judul TAB 2</span></a>
<a><span style="color:white">Judul TAB 3</span></a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
<div>
ISI KONTEN TAB 1
</div>
</div>
</div>
<div class="Page">
<div class="Pad">
ISI KONTEN TAB 2
</div>
</div>
<div class="Page">
<div class="Pad">
ISI KONTEN 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>
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px; /* 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: 0px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", verdana; /* 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: 390px;" class="Tabs">
<a><span style="color:white">Judul TAB 1</span></a>
<a><span style="color:white">Judul TAB 2</span></a>
<a><span style="color:white">Judul TAB 3</span></a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">
<div class="Page">
<div class="Pad">
<div>
ISI KONTEN TAB 1
</div>
</div>
</div>
<div class="Page">
<div class="Pad">
ISI KONTEN TAB 2
</div>
</div>
<div class="Page">
<div class="Pad">
ISI KONTEN 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>
- Silakan ubah “Judul TAB 1,2,3” dengan judul tab yang Anda inginkan.
- Masukkan konten Anda di “ISI KONTEN TAB 1,2,3”.
- Mengenai atribut yang lainnya, Anda dapat mengaturnya sendiri sesuai keadaan template blog Anda.
4. Klik tombol SIMPAN.
5. Klik dan geser gadget ini ke
tempat yang Anda inginkan.
6. Klik tombol SIMPAN.
7. Selesai.
Update:
Kalau ingin memasukkan link posting, coba ganti "ISI KONTEN TAB" dengan kode HTML di bawah ini.
<ol>
<li><a href="URL posting 1">anchor</a></li>
<li><a href="URL posting 2">anchor</a></li>
<li><a hef="URL posting dst">anchor</a></li>
</ol>
Contoh:
<ol>
<li><a href="http://klikmunadi.blogspot.com/2012/02/daftar-stasiun-televisi-lokal-di.html">Daftar Stasiun Televisi Lokal di Jakarta</a></li>
<li><a href="http://klikmunadi.blogspot.com/2012/02/tips-berkomentar-pada-form-komentar.html">Tips Berkomentar pada Form Komentar yang Terpotong</a></li>
</ol>
Tips+Trick:
TB
Top 5
Blog Archive
-
2012
(51)
-
Juni(51)
- Jun 19(28)
- Jun 12(2)
- Jun 10(2)
- Jun 09(2)
-
Jun 08(16)
- Membuat Menu Serta Sub Menu(Tanpa jQuery)
- Download 200+ Game house dll.(IDWS)
- Free Download Artisteer 3.1.0.48375 Full Version +...
- Free Download AIMP 3.00 Build 985
- Flash Player Pro v5.1 + Serial Key
- ESET NOD32 Antivirus + Smart Security 5.2.9.1 Fina...
- Connectify 3.4 Pro Full + Keygen
- CCleaner Professional 3.19.1721 Full Version + Cra...
- Cara membuat Twitter follower Box\kotak follow twi...
- Cara Membuat Share Button facebook,twitter,mig33 M...
- Cara Membuat Judul BLog Pada Tab Browser Seperti D...
- Cara Memasang Widget Multi Tab di Blogger
- Buku Tamu Tersembunyi Di samping Blogger
- BitDefender Antivirus Plus 2012 Build 15.0.38.1605...
- Avira Antivirus Premium 2012 12.0.0.114 Full Versi...
- Avast Pro Antivirus 7.0.1407 Final Full + License Key
- Jun 01(1)
-
Juni(51)