Pasang Menu Tab View

Pasang Menu Tab View - Menu Tab View adalah Menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak di pakai oleh Para Blogger, Di karenakan Menu Ini mempunya nilai yang lebih dan meng-hemat tempat sehingga blog/ website anda tidak terlalu ramai oleh script-script atau widget lainnya. Untuk lebih jelasnya anda bisa melihat tampilan Menu Tab View pada blog saya sebelah kiri atau perhatikan gambar Menu Tab View dibawah ini :



Apakah menurut anda Menu Tab View Sangat Bermanfaat pada blog / website anda ?
Jika "ya"... Silahkan ikuti Tahap-tahap Cara Pasang Menu Tab View sebagai berikut :

TAHAP I
1. Login ke Blogger
2. klik Tata Letak / Layout
3. klik Edit Html
4. Selanjutnya COPY PASTE code CSS dibawah ini, sebelum kode ]]></b:skin>

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;
}


Kalimat yang bercetak tebal diatas adalah sebagai Keterangan dalam mengatur Kode Warna.

5. Silahkan anda Copy Paste kode dibawah ini, tepat sebelum / di atas kode </head>
<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>


6. Klik Simpan / Save.

TAHAP II

1. Klik Elemen Halaman / Page Elements
2. Klik Tambah Gadget / Add New Gadget
3. Pilihlah Menu Html/Java Script
4. Copy Paste Kode di bawah ini, pada table Html/Java Script
<center>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 370px;" class="Tabs">
<a>Tutorial</a>
<a>OrLaNd</a>
<a>BPR</a>
<a>friend</a>
</div>
<div style="width: 370px; height: 250px;" class="Pages">

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

</div>
</div>

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

</div>
</div>

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

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 4.1
Tab 4.2
Tab 4.3

</div>
</div>

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

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


Kalimat yang bercetak tebal diatas adalah: Keterangan untuk mengganti Tab 1.1 ... s/d 4.1... Menjadi Link .
Sebagai contoh : anda bisa mengganti Tab 1.1 menjadi Link seperti kode dibawah ini:
<a href="http://OrLaNd.web.id" target="new">FREE ORLAND'S TEMPLATE </a><br/>

5. Klik Simpan / Save.
6. Selesai
Saya mendapatkan Informasi ini dari Nara Sumber :Trik-Tips Thanks atas tipsnya.


Terima Kasih atas kunjungan dan kepercayaan anda dalam mempercantik blog anda.
Semoga Bermanfaat buat anda dan selamat hari yang indah
Best Regard,

OrLaNd

28 komentar:

TUKANG ARSIP Friday, March 20, 2009  

nice info mas orland...keep sharing

OrLaNd Friday, March 20, 2009  

tukang arsip: thanks atas komentarnya kang tukang arsip.

yanuar catur rastafara Friday, March 20, 2009  

sepertinnya agak susah sich nerapinnya
tapi mencoba adalah keharusan,,.....aq coba dulu ya bung orland

OrLaNd Friday, March 20, 2009  

ok deh bro yanuar.. jika kurang dimengerti.. cobalah chat dgn orland menggunakan id yahoo massenger.. agar lebih jelas lagi...
ini tutorial sudah orland gunakan,,, dan hasilnya liar biasa :D

thanks atas komentarnya bro yanuar :D

Kucing Bunted Friday, March 20, 2009  

ini yang sya cari cari... ^__^

OrLaNd Friday, March 20, 2009  

Kucing Bunted: Thanks atas komentarnya.
Semoga berhasil
Sukses buat anda... dan blogger indonesia semua...

Kath Saturday, March 21, 2009  

Hey thank you for you kind comments Kath (muckypaws)

OrLaNd Saturday, March 21, 2009  

Kath: You're Welcome
thanks for coming

Shalaine Chan Saturday, March 21, 2009  

Err hi how did you get my blog website? And you ask me to visit your blog i don't understand malay or tamil which i don't understand the language you are using

OrLaNd Saturday, March 21, 2009  

SHalaine,,,, i know your blog from google....
thanks for coming n i hope you learning indonesian speak.
to easy for finding your blog

Arton Saturday, March 21, 2009  

sangat bermanfaat.. lam kenal:d

OrLaNd Saturday, March 21, 2009  

Arton: thanks komentarnya...
sukses terus ya...

Praveen Saturday, March 21, 2009  

Nice tutorial man..It seems you visited my blog..
Now i have visited yours in turn.. So far this type of menu widget i have not seen.. Its unique and good.. Keep up the work.
http://www.praveenweb.blogspot.com

OrLaNd Saturday, March 21, 2009  

Praveen: thanks for ur coment and coming to my blog..
Best regard,
OrLaNd

bening Saturday, March 21, 2009  

hemmm..
mbulet memang kaya'e, tapi aku langsung praktek deh, mode meluncur ke TKP On

OrLaNd Saturday, March 21, 2009  

bening: semoga berhasil ta doain sukses dan bekerja sebagaimana mestinya :)

OrLaNd Saturday, March 21, 2009  

helping.... knp mesin absen :S

ada yg bs saya bantu :)

Jacinto Castrillo Sunday, March 22, 2009  

JEEEEEEEEEY HERMANO SALUDOS DESDE CARACAS VENEZUELA.

OrLaNd Sunday, March 22, 2009  

Jacinto: thanks for join with us

Nizar Zulmi Sunday, May 24, 2009  

salam kenal jangan lupa kunjungi blogku juga yaaa
aplikasi-freeware.blogspot.com

mwiyono Monday, May 25, 2009  

wah isi blog mu mantab broo..lanjutkan, yups sebelum melanjutkan ngeblog, mmpir sejenak di blog ku, and follower...i am blogger of beginer

Bang Ancis Sunday, October 11, 2009  

Hmmmm thanks atas penjelasan detailnya..... mampir ya ke blogku, yaaaahhh, sekedar liat hasil dari tutorial ini....


Salam kenal

http://ancispengelana.blogspot.com/

Achmad Tuesday, November 24, 2009  

Salam Damai...saya kok belum ngerti yach..cara memasukkan Artikelnya ke dalam Tab...Thank Good Luck

Abu Syifa Sunday, March 07, 2010  

thanks bro tips nya sangat berguna salam kenal...

Mr. Awalk Saturday, August 07, 2010  

Gimana cara memasukkan shoutbox kedalam TAb View ???

puluthriau Wednesday, February 09, 2011  

om, cara masukkin gadget ke dalamnya, bagaimana?? misalnya, label, recent komen, recent post, label, dll . . Terimaksaih

Post a Comment

Popular Posts

⎝★★★⎠ COPYRIGHT © 2008 - 2018 .:: Created and Designed by OrLaNd ::. All Rights Reserved ⎝★★★⎠