Cara Membuat Menu Tab View di Blog

Bookmark and Share
Assalamualiakum sobat blogger semuanya, kali ini saya kembali membawakan sebuah tips dan trik blogger terbaru yang pastinya sangat sayang untuk sobat lewatkan. Hehe... yaitu Cara Membuat Menu Tab View di Blog. Menu tab view ini digunakan untuk menghemat tempat di blog karena menu ini merupakan gabungan dari beberapa menu lainnya. Selain itu juga bisa membuat tampilan blog kita lebih terkesan keren dan minimalis. Pastinya sobat sudah pernah lihat semua kan menu tab view ini? Jika belum, coba lihat salah satu contohnya dibawah:


Keren kan sobat blogger? Lalu, bagaimana cara membuatnya? Apakah sulit? jawabannya tentu tidak. Silahkan sobat ikuti langkah-langkah dibawah ini untuk membuat menu tab view di blog sobat:

  • Login dulu ke akun blogger sobat.
  • Langsung menuju ke menu Template
  • Pilih Edit HTML
  • Jangan lupa centang Expand Widget Template
  • Cari kode ]]></b:skin> , kemudian letakkan kode dibawah ini tepat DIATAS kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis huruf menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}
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:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar huruf kotak utama */
}
Tulisan yang berwarna merah adalah bagian-bagian yang dapat sobat modifikasi sendiri.

  • Kemudian letakkan lagi kode berikut ini tepat DIBAWAH kode  ]]></b:skin>
<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>

  • Kemudian simpan template sobat.
  • Sekarang lanjut ke langkah berikutnya, langsung menuju ke menu Layout (tata letak)
  • Klik Add Gadget dan pilih HTML/JavaScript.
  • Lalu copy paste kode berikut di kotak yang disediakan:

form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</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://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

  • Terakhir, simpan.
Nah, gampang bukan? Mungkin cukup sekian dulu postingan saya tentang Cara Membuat Menu Tab View di Blog. Semoga bermanfaat bagi sobat semua. Jika ada sesuatu yang ingin diutarakan, silahkan comment dibawah. 
Mungkin sobat juga tertarik untuk membaca tips dan trik blogger lannya dibawah ini:


{ 15 comments... Views All / Send Comment! }

Relief taman dan ornamen dinding buatan said...

kalo menu tab viwnya berisi widget gimana gan... thank salam blogger

Izye ShFaL said...

Mantab
Thank's Infonya ya om

Lihat Blog gue disana ada banyak info² yang menarik silahkan kunjungi Ln-aa.blogspot.com (Numpang Promosi ya oM)

irwandy pagala said...

tengkyu bro,,, tpi cara bikin link gmn yah..??

Artikel Menarik said...

makasih banyak sob ud share tutorialnya :)

tiyas widyaningrum said...

sangat bermanfaat...:)

eternity love story said...

dear mas...
saya baru belajar buat menu tab view..
tapi kenapa di atas judul saya muncul menu2 pake html ya..? huaaaaaaaaaaa :'(
mohon bantuannya......

mansyur syamsudin said...

makasih gan..saya sudah buat menu tab view sudah berhasil pd tab view prtama tpi ad maslah gan..pd pmbuatan tab view kedua tdk berhasil gan..mhon pncerahan..???
berkunjung ke blog aku gan http://reformasibaru.blogspot.com

Sukiya said...

makasih sob,,,gwa coba dech.

mista rian said...

cheater gmail

mista rian said...

cheater

mista rian said...

cheater gmail

Obat Penyubur Kandungan said...

mengunjungi blog yang bagus dan penuh dengan informasi yang menarik tentang cara membuat menu tab view di blog adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi

gesit said...

salam knal ja

Seo Blogger Pemula said...

manteb sob ilmunya... apa lg buat saya yang baru mulai di blog....

Lalu Zulfakar Hidayat said...

Artikel ini bagus dan bermanfaat.

Jangan lupa untuk berkunjung balik di Blog Saya @ Official Blog Lalu Zulfakar Hidayat's. Karena di Blog Saya itu "Membicarakan Segalanya dan Tempat Semuanya".

Terima Kasih Sebelumnya. Salam manis dari Saya buat penulis Artikel Ini.

Official Blog Lalu Zulfakar Hidayat's | Official Lombok's Hacker Team

Copyright © 2013 - Official Blog Lalu Zulfakar Hidayat's

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Post a Comment

Terima kasih telah berkunjung. Jika ada yang mau disampaikan silahkan tuliskan komentar sobat dibawah ini. Komentar sobat sangat berarti bagi blog ini. Tapi tolong jangan SPAM. Karena saya sangat membenci SPAM.
Best Regards
Tips dan trik Blogger