Membuat Daftar Isi Blog dengan menggunakan Menu Tab View

Kali ini kita akan membahas tips untuk membuat menu tabview yaitu menu yang biasanya berada di side bar dengan 3 atau 4 menu pada satu halaman. Singkat nya untuk menghemat tempat di sidebar. 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.

Membuat Daftar Isi Blog dengan menggunakan Menu Tab View

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.

Jika ingin memasang Widget MENU TAB VIEW pada Blog anda, berikut prosedurnya :

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">


<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>



<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>



<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>



<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>


</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 :

Paste dibawah kode ]]></b:skin>

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/AVvXsEg4h0Fpwr_tohT8emGPPQj5igpcmS28TAARK_BWNGHYPFuiuOK1dfQ4fpKyFMSkUR72spT3N9U-o_jUlKYwLZFp_pTbrsorDu237RK9ohsh94l3FF_j71Ioy_lb_BopqaNmyYmzLUKV3-FI/"); /*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
. 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.

Dapatkan berbagai informasi menarik dengan mengunjungi link yang ada dalam blog ini mulai dari bisnis online, lowongan kerja, tips blogging dll. Pilih berdasarkan kategori yang anda minati lalu masukkan kata kuncinya dan klik cari informasi sekarang

Blog ini tidak memiliki kerja sama dengan pihak manapun semua hasil yang didapatkan berasal dari kerja keras penulis mengoptimalkan blog secara berkala. Anda bisa siapapun juga bisa asal ada usaha

Kekayaan sesungguhnya adalah ilmu yang terus di kembangkan tidak pernah bosan belajar hal baru terlebih ilmu itu bermanfaat bagi orang lain. Percayalah ilmu yang anda bagi kepada mereka sampai kapanpun tidak pernah berkurang justru semakin bertambah.

Pages

Panduan Lengkap Ipanelonline

Labels

Kamis, 06 Oktober 2011