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 :
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/AVvXsEjifizp9Yj20lneXhfGGDbAQ7pLCoezC5n3RpFvvQt7Hc7efH7PTsbmO-p8q1yTjlJD-5G7gep8ig5LrtCWmHujHYGVwslFIBg-CXYMCJbZ1q5F2EjuDoEoTaNu4G2ND73oJ11gSFuDyf_i/"); /*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.
haha. Semua ini berawal dari maraknya copy paste dan pembajakan konten di situs ini tanpa mengedit terlebih dahulu kata-kata yang kang salman buat. terlebih para pelaku auto blog yang memirror feed kucoba.com sampai saat ini kang salman sudah melist kurang lebih ada 14 auto blog yang membajak blog ini.
