Cara Membuat Tab Menu

Kali ini saya akan menjelaskan cara membuat Tab Menu. Tab Menu sangat bermanfaat sekali karena kita bisa menghemat ruang yang ada di blog kita dan kita juga bisa meletakan beberapa gadget ataupun beberapa banner ataupun teks didalam halaman yang sama tetapi dipisahkan oleh kolom tersendiri dan kolom inipun hanya bisa dibuka bergantian.

Sebenarnya memang agak rumit dalam pembuatan Tab Menu ini dikarenakan banyaknya script yang harus kita copy dan paste ke template maupun gadget, tapi bagi anda yang suka ngutak-ngatik script, saya pikir bukan hal baru bagi anda. Andapun bisa meedit script tersebut untuk menyesuaikan dengan halaman blog anda. Untuk itu silahkan ikuti langkah-langkah berikut ini :

Langkah Pertama :

1. Login ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
6. Persis sebelum kode tersebut, pastekan script di bawah ini

<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>

7. Cari lagi di dalam template anda kode ]]></b:skin>
8. Persis sebelum kode tersebut, pastekan script di bawah ini

div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }

9. Klik Simpan Template

Langkah Kedua :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilihan HTML/JavaScript
6. Pastekan ke dalam kolom Konten script di bawah ini

<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 1"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 2"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 3"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 4"

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom "Judul 5"

</div>
</div>


</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>

7. Klik Simpan

Kode script di atas yang di awali dengan tanda # menyatakan warna, seperti #000000 #FFFFFF #999999 #2E2EFE #E6E6E6 #0B516E #DF0101, silahkan anda ganti dengan warna pilihan anda, untuk mendapatkan variasi kode warna silahkan anda surfing di sini [ html-color-codes ]

Jika pada saat ini anda tidak mendapatkan hasilnya sebagaimana yang telah saya tulis di atas, berarti file JavaScript tersebut sudah OverLoad. Silahkan surfing [ di sini ] untuk mendapatkan file JavaScript terbarunya.

Selamat mencoba, semoga bermanfaat

Cara Membuat Menu Tab View Slide

Ternyata yang diminta sobat blogger (Nova Imut) tutorial cara membuat menu tab view slide yang contohnya bisa dilihat pada sidebar sebelah kanan blog ini atau seperti pada image disamping.
Caranya mudah saja hanya butuh ketelitian dan sedikit kesabaran karena kodenya cukup banyak dan panjang. Jadi biar entar tidak ada kesalahan kecil yang bisa jadi biang keringat. Ikuti Tips berikut:

• Download lengkap template sobat, agar bisa dikembalikan lagi seperti semula jika sobat tidak berhasil/ salah dalam pengeditan.
• Setelah memasukkan kode tambahan sebelum menyimpan template pratinjau dulu, jika tidak ada pesan error atau template ditampilkan seperti awalnya/ tdk amburadul tata letaknya, berarti langkah-langkahnya sudah benar.
• Saat mencari suatu code klik  Ctrl+F kemudian cari. Agar mudah menemukan codenya
• Terakhir langsung cara membuat menu tab view slide

1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ini ]]></b:skin> letekkan kode berikut diatas  ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}

-----------------------------------------------
2. Download kode selanjutnya, KLIK DI SINI
3. Copi kode tersebut dan paste sebelum kode </head>
4. Simpan template
5. Selanjutnya pilih elemen halaman=> tambah gadget=> HTML/JavaScript=> Masukkan code berikut pada kolom content

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat artikel keempat kamu disini [...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>

Silahkan edit sesuai selera sobat, kemudian simpan dan lihat hasilnya.
Semoga bermanfaat.

Cara Membuat Menu Tab View

Barusan posting cara memasang widget recent post atau postingan terbaru, komentar pertama yang diterima dari sahabat blogger pada postingan itu disertai lagi dengan pertanyaan cara membuat tabel, walau blm begitu ngerti jelas pertanyaannya mengarah ketabel yang mana? Mungkin yang ditanya, bagaimana cara membuat wmenu tab View atau justru tab view slide?

Baiklah anaa coba posting satu persatu, yang pertama bagaimana cara membuat menu tab view seperti diatas:
Seperti biasa dalam keadaan loggin, klik tata letak=> edit HTML
masukkan kode berikut pada bagian header, antara <head> dan </head>, kalau bingung letakkan saja dibawah kode <head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>

kemudian letakkan kode berikut diatas kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
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:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}

Janganlupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </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://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Widget by Indahnya Berbagi</a></div>

Silahkan sobat ganti dan edit kode diatas, judul tab dan untuk warna bisa lihat kodenya disini.
Save, kemudian save lagi. Liat blog untuk melihat hasilnya!