Cara Mudah Membuat Menu Tab View Blog Tanpa Edit HTML

Cara Mudah Membuat Menu Tab View Blog

   Membuat menu tabview sebenarnya hanya untuk menghemat tempat di blog, masalah penting dan tidak pentingnya itu tergantung kebutuhan masing-masing blogger, karena setiap blogger punya tujuan sendiri-sendiri untuk mebuat blog, untuk mereka yang butuh banyak widget untuk ditampilkan di sidebar blog membuat menu tabview ini mungkin sangat dibutuhkan disamping untuk menjaga tampilan blog agar kelihatan lebih profesional ( kata sebagian blogger ) juga untuk memudahkan pengunjung mendapatkan informasi yang dicari dan tentunya memberi kemudahan pada pengunjung ada nilai seo-nya.

   Ada beberapa cara untuk membuat menu tab view, yang susah dan yang gampang, yang susah adalah dengan cara masuk langsung ke template blog, ini susah bagi yang belum banyak tahu tentang HTML ( blogger pemula like me ) dan untuk mereka yang pengalaman gak usah dibahas mereka sudah bisa jadi guru. Disini adalah cara yang mudah karena kita tidak akan mengedit template.

   Untuk caranya seperti biasa masuk ke dasbor, karena kita tidak akan mengedit HTML template jadi kita pilih  Tata Letak . Kemudian Add / Tambahkan Gadget lalu pilih HTML/javascript. Pastekan semua kode dibawah ini:

 <style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 99px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
margin: 1px 1px 1px 0px; /* Posisi Kotak Tab */
background-color: #444444; /* Warna background Kotak Tab */
padding-top:8px; vertical-align:middle; border-top:2px  #DC1E25; /* Warna border Menu Atas */
border-bottom-width:9px; text-decoration: none; font-family: "Lucky typewriter", Serif; /* Font Menu Utama Atas */
font-weight: 90; color: #FFFFFF; /* Warna Font Menu Utama Atas */-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #DC1E25; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border-top:2px solid #DC1E25; } /* Warna border Kotak Utama */ overflow:hidden; background-color: none; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden }
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript' src="http://yourjavascript.com/15110504241/andonesitabview.js">
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi Menu 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi Menu 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

   Ganti yang berwarna hijau dengan judul tab view sobat, dan yang berwarna biru dengan kode script sobat entah itu gambar, komentar, widget alexa atau yang lainnya tergantung kebutuhan sobat.

   Silahkan atur yang lainnya dan sesuaikan dengan template sobat, untuk bagian-bagiannya sobat bisa melihat keterangan kode scriptnya diatas, karena ini bukan pada HTML template jadi sobat gak usah takut templatenya berantakan, otak-atik aja kalo gak bisa ulangi kalo bingung mana yang sudah berubah tinggal hapus kodenya ambil lagi disini.

   Sedikit tambahan: Untuk menambahkan garis pembatas setiap judul postingan seperti yang terlihat pada gambar ( opsi saja karena setiap template berbeda, ada yang otomatis dan ada juga yang harus menggunakan opsi ini ) sobat perlu masuk HTML blog sobat dan menambahkan kode kode yang berwarna merah dibawah ini ( copas yang berwarna merah saja dan letakkan diatas ]]></b:skin> ) kemudian save template.

div.Pad ul li {
border-bottom:1px dotted #b3b3b3; }
]]></b:skin>

  Demikian cara mudah membuat menu tabview  blog semoga bermanfaat.