Cara Membuat Menu Tab View

10/31/2010 Blogger Tips Trik Blog Tutorial Blogger Widget
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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

7 comments

kang ,, gimana cara ngebuat marquee berkedip di artikel ? mohon jwabannya ya kang ,, from Fikry -->> http://fikrypbnicks.blogspot.com

Balas

@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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas