Cara Membuat Menu Tab View - Blog Kang Fatur

Cara Membuat Menu Tab View

Pada kesempatan malam ini saya akan curat coret di postingan walaupun hanya sekedera memberi Tips Trik sederhana pada sahabat Blogger semuanya. Kali ini saya memberikan sebuah trik "Cara Membuat Menu Tab View" Apa dan Seperpti apa sii mahluk yang bernama Menu Tab View ini?? Jawabannya cuukup tengok ke sebelah kanan blog ini. Saya isikan dengan Tips-tips dan Artike-artikel di dalamnya. Kotak menu ini sangat berguna bagi kita karena Menu ini dapat membuat ngirit tempat pada blog kita dan sekaligus memudahkan pembaca/pengunjung mencarinya.

Ini adalah gambar yang akan kita hasilkan melalui tutorial ini. kok gak sama ya ma yang di blog ini?? karena yang punya saya dah banyak diutak atik dan di gunta ganti jenis warnanya. Tadinya sama saja punya saya juga seperti itu, tinggal nanti sobat atur sendiri warna warninya sesua dengan keinginan dan selera sobat semua.

OK, saya tidak akan panjang lebar lagli kita langsung aja ke TKP.

1. Seperti biasa Loggin ke Blogger => Layout => Edit HTML dan cari kode ni ]]></b:skin> kalau nak cepat jumpa klik je Ctrl+F dan cari.

2. Masukkan kode dibawah sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tajuk */ text-align: center;
height: 24px; /* Tinggi Kotak Tajuk */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna Border Kotak Tajuk */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */
font-weight: 900;
color: #000; /* Warna Tulisan Kotak Tajuk */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFF66; /* Warna Background Kotak Tajuk */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */
overflow: hidden;
background-color: #FFFF66; /* Warna Background Kotak Isi */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


3. Lihat keterangan pada tulisan berwarna merah. Just tukar tulisan yang berwarna biru. Untuk kode warna boleh dapatkan DiSINI

4. Seterusnya tambahkan kode berikut sebelum kode </head>


<script src='https://sites.google.com/site/efekefek/file-js/tabview.js' type='text/javascript'/>


5. Cukup untuk bahagian ini. Klik Save Template.

6. Seterusnya pergi ke Page Elements => Add Gadget => HTML/Javascript dan tambahkan script dibawah.


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

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 1.1">Tajuk Isi 1.1</a></li>
<li><a href="Url Isi 1.2">Tajuk Isi 1.2</a></li>
<li><a href="Url Isi 1.3">Tajuk Isi 1.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 2.1">Tajuk Isi 2.1</a></li>
<li><a href="Url Isi 2.2">Tajuk Isi 2.2</a></li>
<li><a href="Url Isi 2.3">Tajuk Isi 2.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 3.1">Tajuk Isi 3.1</a></li>
<li><a href="Url Isi 3.2">Tajuk Isi 3.2</a></li>
<li><a href="Url Isi 3.3">Tajuk Isi 3.3</a></li>
</div>
</div>

</div>
</div>
</form>

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

7. Lihat kode2 diatas.
#Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
#Text yang berwarna Merah Adalah text bagi kotak tajuk.
#Text yang berwarna Ungu adalah isi menu ini. Sobat boleh isikannya dengan link, gambar, banner, script dll.


PENTING
Menu Tab View pada tutorial ini hanya terbagi tiga kolom jika sobat ingin menambahkannya copy kode yang berkedip dan paste di bawahnya.


Selamat Mencoba Semoga Berhasil dan Bermanfaat. Jangan lupa comentnya

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

6 comments:

  1. @fikry ramadhan gampang sob tinggal nambah sedikit kode berkedip yaitu blink misalkan kode markue seperti ini <marquee bgcolor="#0000ff">INI MARQUEE BERKEDIP</marquee> ganti rubah menjadi seperti ini <marquee bgcolor="#0000ff"><blink>INI MARQUEE BERKEDIP</blink></marquee> OK moga berhasil

    ReplyDelete
  2. Makasih gan infonya ,btw blog ente ada di page one baris ke-1 loh

    ReplyDelete
  3. Mas saya uda coba
    Tapi kok tulisan tahuk 1, tajuk 2, tajuk 3
    ga bisa di klik

    ReplyDelete
  4. @Sigit Sobat Sigit saya minta maaf, karena postingan ini postingan lama saya, saya belum sempat Update, ternyata tempat penyimpan Scriptnya sudah diblokir. tapi sekarang sudah saya Update tinggal di coba lagi OK.

    ReplyDelete
  5. WUaaahhh.,. D sini Banyak Ilmunya euy,.,.
    Matur Nuwun Kang!!!

    ReplyDelete
  6. Yang Mau Banklink Super Gratis :-bd ^o^ http://waoneenoaw.blogspot.com/2012/05/backlink-super-gratis.html?utm_source=BP_recent

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo