silahkan bergabung dan dapatkan artikel-artikel resep-jitu gratis via e-mail!

EnglishFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

1.22.2010

Cara Membuat Tab View Pada Blog


Menangapi dari beberapa permintaan yang di ajukan kepada saya oleh beberpa sobat blogger. Kali ini saya mencoba untuk berbagi tutorial blog lai kepada temen-temen semua. Da npaa tulisan kali ini kitaakan mencoba untuk membahas tentang cara membuat menu tabview. Bagi
yang belum tahu apa itu menu tab view contohnya dapat temen lihat pada gambar di samping


Sebenarnya ada banyak variasi tampilan dari menu tab view yang dapat kita buat. Tetapi, pada tulisan ini kita bahas duluh cara pembuatan menu tab view dengan tampilan seperti
Gambar diatas. Gimana kira-kira tertarik ngak untuk membuatnya ? yaudah kalau anda merasa tertarik unuk membuat menu tab view di atas silahkan anda ikuti tutorial di bawah ini.



Cara membuat tab view :

1. Login ke blogger lalu klik menu Layout lalu ambil pilihan Edit Html

2. sesampainya dikotak pengeditan Html cari kode ]]></b:skin>

3. setelah ketemu sisipkan kode di berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 65px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 4px dotted #A3A3A3; /* 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: #2A1B0A; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color:#666666; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 4px dotted #A3A3A3; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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;
}


4. setelah kode di atas dipasang, selanjutnya temukan kode </head> dan taruh kode dibawah ini sebelum kode </head>

<script src='http://resep.fileave.com/tabview.js' type='text/javascript'/>


Info Penting :

"Sebaiknya anda upload sendiri kode js ini keserver penyimpanan JavaScript yang anda ketahui agar nantinya tab view anda dapat berfungsi dengan baik.
Fungsi dari kode JavaScript di atas adalah agar tab view anda dapat berpindah tab dari tab satu ketab lainnya. Jadi, jika tab view anda nantiya tidak dapat berpindah tab maka sebaiknya anda upload ulang kode JS ini ke server penyimpanannya dengan account anda sendiri. Anda dapat mengupload file Js ini diantaranya ke www.fileave.com. Untuk cara pengaploadannya Insyaallah akan segera di publish"

5 setelah selesai klik tombol SAVE

6. kemudian pegi ke halaman “Taa Letak” atau "Page Elements" jika anda menggunakan bahsa inggris

7. lalu PIlih "Add a Gadget" >>> "HTML/Javascript"


8. akan muncl sebah kotak kosong, lalu Isikan kode dibawah ini kedlam kotak kosong ersebut ( sama halnya dengan cara memasukkan kode shoutmix/buku tamu )

<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 :

- Angka yang berwarna biru (350px) adalah angka yang menunjukan lebar tab view dapat diganti dengan angka lain sesuai dengan ukuran sidebar blog anda.


- Angka yang berwarna biru (250px ) adalah angka yang menunjukan tinggi tab view dapat diganti dengan angka lain sesuai dengan ukuran sidebar blog anda


- Kode yang berwarna abu-abu adalah tulisan yang akan ditampilkan di menu utama (Menu Atas).


- Kode yang berwarna ungu adalah isi dari tabview. Kamu bisa mengisinya dengan link postingan anda, gambar, kode javascript recent comment, kode java script recent post,dll

Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan Disini:

Komentar :

ada 10 komentar ke “Cara Membuat Tab View Pada Blog”
Rachmat Naimulloh mengatakan...
pada hari 

Terima kasih atas ilmunya.

EKA SAPRI ALVYANTO mengatakan...
pada hari 

askum cara menampilkan jumlah komentar di judul postingan itu gimana, trim's...

anggi mengatakan...
pada hari 

om, mau tukeran link. ni link ku

Free Software, Film Gratis

Kalo uda di pasang, komen gwa di af-software.blogspot.com

info gratis mengatakan...
pada hari 

terima kasih mas,, mantap infonya...

berkunjung ke blog saya juga ya.. he he..

Anonim mengatakan...
pada hari 

mas, mau tanya gimana caranya memasukkan postingan ke menu di blog? trims

usep supriadi mengatakan...
pada hari 

mas ane dah nyoba n hasilnya ox tapi yang ane masih bingung gmn cara masukin artikel ke menu tersebut?
tolong dibantu ya gan
thank before

Budiman mengatakan...
pada hari 

blog walking

_+CRAZY-ELITE+_PRO_>PB mengatakan...
pada hari 

kk saya udah nyoba tapi ggak bisa k

harus gimana k
tolong direct nya ya k kirim ke dik.tyo11@gmail.com

kunjungi blog saya juga ya k

http://fun-crazy-gamers.blogspot.com/

medan mengatakan...
pada hari 

Nice info Bro

putra gerrald mengatakan...
pada hari 

follow yha blog gua, udah tag follow tu blog anda...hhee..terima kasih.. www.putragerald.co.cc

Poskan Komentar

Komentar Anda Adalah Semangat Untuk Kemajuan Saya

 

Editting By candra Since february 2009 | On My Blog | Template by techknowl | Original Wordpress theme byBrian Gardner