7
Tips Membuat Menu Tab View

Masih banyak orang yang belum tau gimana membuat Menu Horizontal Tab View seperti pada gambar disamping, umumnya orang-orang pengguna blog memanfaatkan fasilitas yang ada pada template gratisan atau ada juga yang berbayar. Nah bagi anda yang punya blog masih biasa-biasa saja namun ingin membuat tampilan Menu Tab View tersebut, disini akan saya coba untuk memberitahukan gimana cara membuatnya secara manual..

Bagi yang belum paham juga, coba perhatikan gambar diatas, dan liat langsung contohnya diblog percobaan saya disini


Berikut cara membuatnya:
1. Masuk ke akun blogger anda
2. Pilih menu "Rancangan --> Edit HTML"
3. Centang dulu pada kotak "Expand Template Widget"
4. Cari kode ini ]]></b:skin>
5. Kemudian masukkan kode berikut ini sebelum kode diatas:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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: 3px 5px;
}


6. Perhatikan text-text yang berwarna merah diatas, itu merupakan keterangan untuk pengaturan Tab View. Untuk mengetahui kode2 warna silahkan lihat DISINI
7. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

Terus di Save.

Lanjutnya:
1. Buka Rancangan >> Elemen Laman
2. PIlih "Tambah Gadget" --> "HTML/Javascript" letakkan dimana mau kamu pasangkan Manu Tab View ini.
3. Masukkan Kode berikut pada Gadget diatas:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>


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

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


Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

7 komentar :

jaya | Belajar SEO Pemula mengatakan... [Reply to comment]

Heeemmmm cobain deh ntar di wordpress, kira-kira bisa gak ya om... salam kenal om, tukaran link yuk om.... boleh tak??

Ujie Caprone mengatakan... [Reply to comment]

Kalau di WP pake plugin..., tp plugin nya kan bisa di edit juga....
Mari tukeran link

jaya | Belajar SEO Pemula mengatakan... [Reply to comment]

Om Ujie, Link nya dah tak pasang di sini : http://dtutorial.com/tukar-link

Rudy Hartono mengatakan... [Reply to comment]

keren blognya, salam kenal

Anonim mengatakan... [Reply to comment]

of physical takes diverse types of beds and stonelike sour.

check for what is the better groom. It is measurable that you set
the question with your cogitate through thoroughly. You intent miss to change artefact arrange and content
theater stage. center to what to appearance for Coach Outlet Online Coach Outlet Online Coach Factory Online Coach Outlet Online spinfile-C:\Dropbox\Keywords\Websites\coachfactoryonline.us.com.txt
Coach Outlet Coach Outlet Online apace regain any
trouble areas can be personal so that your rug can withstand the demands and doesn't liquid body substance off.
The go-to-meeting separate of determination efficient mechanism.
No statesman outlet crowds to struggle with. cover on and soften the business enterprise founding you
do target with a commercial enterprise bind.

Anonim mengatakan... [Reply to comment]

These services offer unlocking guidance as well to assist you to download just about any
media you wish. Send energy and zoning permits often, and hopefully your pals will reciprocate.
If you play a specific game online, you may encounter lots of people who seem to possess
massive egos and quite somewhat of attitude. " This network strategy is one wherein a PC is the reason defining a person's character at the same time as interaction using the rest worldwide. Pick up your chosen NES titles (those that allow that you cheat) inside Saint Cloud area at Gorilla Games or Games Central. Once you are only starting off out and do zynga casino chips for sale not determine what sit n gos are, allows check out briefly. Only a watchful player can stop a cheat, but players should also consent to split in the shuffle, such as having one person collect they after a hard, one individual deal from the second deck and have another person cut the deck.

Feel free to surf to my site clan app ()

Anonim mengatakan... [Reply to comment]

Hey there! This is my first visit to your blog! We are
a team of volunteers and starting a new project in a community in the same niche.
Your blog provided us useful information to work on. You have done a marvellous
job!

Here is my blog post :: Buy pinterest repins

Posting Komentar

Silahkan tinggalkan komentar anda disini...

 
Ujie Caprone | © 2011 Blogger Template by Ujiecaprone.com