Untuk memudahkan pengunjung blog mencari artikel, sebaiknya sediakan daftar isi blog di Sidebar, atau di atas postingan atau dimana saja sesuai keinginan anda. Ada banyak cara membuat daftar isi. Ada Daftar Isi otomatis, ada juga Daftar Isi Yang dibuat secara manual.
Sebelum memulai Tutorial Membuat Widget Menu Tab View di Blog, saya terangkan dulu mengenai MENU TAB VIEW, bagi anda yang masih asing dengan nama Widget ini.
MENU TAB VIEW adalah sebuah widget dengan 1 kotak dan beberapa Menu diatasnya. Dengan satu kotak, MENU TAB VIEW bisa menampung banyak Daftar Isi dengan adanya Scroll. Dengan demikian, ruang di sidebar blog bisa lebih Hemat. Selain itu, menu tab view bisa di modifikasi sesuai keinginan kita mulai dari mengubah besar kotak, mengganti warna, memberi background gambar, dll.
Masih kurang mengerti ??? Perhatikan gambar disamping tulisan ini atau langsung saja lihat LIVE DEMOnya di sidebar BLOGGERBUGIS yang berisi Daftar Isi Blog BLOGGERBUGIS. ( Kalau belum di ganti dengan widget lain )
Selain Daftar Isi Blog, Menu Tab View juga bisa diisi dengan widget lain (Widget dalam widget dong.. hehehe...) Contohnya bisa anda lihat pada FOOTER ( Bagian paling bawah ) BLOGGERBUGIS yang berisi MENU TUKERAN LINK, KONFIRMASI, LINK SOBAT dan BANNER SOBAT. Klik pada Menu Konfirmasi, maka anda akan melihat WIDGET Google Friend Connect dalam WIDGET Menu Tab View.
Jika ingin memasang Widget MENU TAB VIEW pada Blog anda, berikut Langkah – langkahnya :
Copy kode dibawah ini ( Gunakan CTRL+C ) lalu letakkan pada Page Element ( Elemen Halaman ) blog anda.
Copy kode JavaScript dibawah ini :
<script src="https://sites.google.com/site/bloggerbugis/js/tabview-padakodehtml.js" type="text/javascript"/>
Paste dibawah kode ]]></b:skin
Selanjutnya COPAS ( Copy Paste ) Kode Berikut ini diatas kode ]]></b:skin
Sebelum memulai Tutorial Membuat Widget Menu Tab View di Blog, saya terangkan dulu mengenai MENU TAB VIEW, bagi anda yang masih asing dengan nama Widget ini.
Masih kurang mengerti ??? Perhatikan gambar disamping tulisan ini atau langsung saja lihat LIVE DEMOnya di sidebar BLOGGERBUGIS yang berisi Daftar Isi Blog BLOGGERBUGIS. ( Kalau belum di ganti dengan widget lain )
Selain Daftar Isi Blog, Menu Tab View juga bisa diisi dengan widget lain (Widget dalam widget dong.. hehehe...) Contohnya bisa anda lihat pada FOOTER ( Bagian paling bawah ) BLOGGERBUGIS yang berisi MENU TUKERAN LINK, KONFIRMASI, LINK SOBAT dan BANNER SOBAT. Klik pada Menu Konfirmasi, maka anda akan melihat WIDGET Google Friend Connect dalam WIDGET Menu Tab View.
Jika ingin memasang Widget MENU TAB VIEW pada Blog anda, berikut Langkah – langkahnya :
Langkah PERTAMA
Copy kode dibawah ini ( Gunakan CTRL+C ) lalu letakkan pada Page Element ( Elemen Halaman ) blog anda.
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Ganti tulisan ini dengan title tab anda">MENU 1</a>
<a title="Ganti tulisan ini dengan title tab anda">MENU 2</a>
<a title="Ganti tulisan ini dengan title tab anda">MENU 3</a>
<a title="Ganti tulisan ini dengan title tab anda">MENU 4</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
<ul>
<li>
DAFTAR ISI MENU 1.1
</li>
<li>
DAFTAR ISI MENU 1.2
</li>
<li>
DAFTAR ISI MENU 1.3 dst
</li>
</ul>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
<ul>
<li>
DAFTAR ISI MENU 2.1
</li>
<li>
DAFTAR ISI MENU 2.2
</li>
<li>
DAFTAR ISI MENU 2.3 dst
</li>
</ul>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
<ul>
<li>
DAFTAR ISI MENU 3.1
</li>
<li>
DAFTAR ISI MENU 3.2
</li>
<li>
DAFTAR ISI MENU 3.3 dst
</li>
</ul>
</div></div>
<!--Akhir Menu 3-->
<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
<ul>
<li>
DAFTAR ISI MENU 4.1
</li>
<li>
DAFTAR ISI MENU 4.2
</li>
<li>
DAFTAR ISI MENU 4.3 dst
</li>
</ul>
</div></div>
<!--Akhir Menu 4-->
</div></div></form>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/tabview-padapagelement4U.js"></script>
<div style="font-size: 90%; text-align: left; text-shadow: 3px 3px 3px rgb(0, 0, 0);"><a href="http://blogger-bugis.blogspot.com" target="_blank" title="Klik Tab untuk melihat semua Daftar Isi Blog BloggerBugis">Daftar Isi Blog</a></div>
- Jangan lupa Ganti tulisan DAFTAR ISI MENU dengan judul ARTIKEL anda.
- Ganti tulisan "Ganti tulisan ini dengan title tab anda" dengan Title Tab Anda ( Title adalah tulisan yang akan muncul saat mouse menyentuh Link, dalam hal ini TAB MENU
- Ganti tulisan "MENU 1"dengan Nama Tab yang anda inginkan, misalnya, BLOGGER, INTERNET, dll
Langkah KEDUA
Copy kode JavaScript dibawah ini :
<script src="https://sites.google.com/site/bloggerbugis/js/tabview-padakodehtml.js" type="text/javascript"/>
Paste dibawah kode ]]></b:skin
- Kalau belum tahu dimana mencari kode ]]></b:skin , Baca 2. MENAMBAH / MENGHAPUS KODE HTML TEMPLATE di artikel INI
Selanjutnya COPAS ( Copy Paste ) Kode Berikut ini diatas kode ]]></b:skin
/* Menu Tab View Dari BLOGGERBUGIS
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 85px; /*ukuran lebar tab menu*/
text-align: center;
height: 24px; /*ukuran tinggi tab menu*/
padding-top: 3px;
margin-right:2px; /*jarak antar tab menu*/
vertical-align: middle;
border: 2px solid #000000; /*warna border menu*/
border-bottom-width: 0;
font-family: "Trebuchet ms", Times New Roman, Serif; /*jenis huruf menu*/
font-size: 14px; /*besar huruf menu*/
font-weight: bold;
letter-spacing: 0px;
background-color: #000000; /*warna latar menu*/
color: #FFFFFF; /*warna huruf menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: #B40404; /*warna background menu aktif*/
color: #f2f2f2;
font-weight: bold;
}
div.TabView div.Tabs a:hover {
background-color: #f2f2f2; /*warna background menu hover*/
color: #B40404;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 2px solid #000000; /*warna border kotak utama*/
overflow: hidden;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieSoWYxUla-3u7Npp44u3M7FLxXZ9cDLTsWF6y9uhrMRKRRi4-k338tqVk6wVKFoCi7ZC7xxoCfkMPBz3xg7tEloIC1pG2uVpDlthG1xvefg7BkhraqsbQUuzpjhSFXfixwyMBFLTMQg0d/"); /*background kotak utama*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 10px 5px;
font-size: 12px; /*besar huruf kotak utama*/
}
- Anda bisa menyesuaikan pengaturannya sesuai dengan keinginan anda dengan mengganti angka, kode warna, gambar background, dll pada tanda keterangan yang berwarna MERAH.
- Untuk melihat kode warna HTML, anda bisa lihat DISINI
- Tinggal klik warna yang anda inginkan lalu copy kodenya yang ada di bawah kotak KODE WARNA.
