membuat tab view dengan css tab design

Membuat Tab View dengan CSS Tab Designer (bagian2)

Sebagai kelanjutan dari posting Membuat Tab View dengan CSS (bagian1)

Tab Designer (bagian1) berikut ini saya coba deskripsikan langkah-langkahnya
sebagai berikut :

1. pertamax download softwarenya disini

2. install sampai selesai

3. jalankan aplikasi CSS Tab Designer

Untuk membuat tab view caranya :

1.     pilih style untuk menentukan modelnya, caranya tinggal klik salah satu dari pilihan model yang ada pada menu “Tab style”

2.     klik add item (bertanda +) pada menu item

3.     isikan Tab text dengan nama tab yang diinginkan misalnya (HOME, PROFIL, TUTORIAL atau yang lain)

4.     isikan Tab URL dengan link yang akan dituju

5.     klik OK

6.     ulangi langkah 2 – 5 sebanyak jumlah tab yang akan dibuat

7.     Hasilnya bisa dilihat di Preview

8.     klik code (berada di sebelah kanan Preview)

9.     copy codenya mulai dari code:

<style type="text/css">

sampai dengan code:

</div>

10. Paste ke notepad untuk diedit dulu sebelum dipasang diblog

11. upload gambar dari computer ke image hosting semisal Photobucket

caranya :

1. login Photobucket
2. upload from computeràbrowse
3. cari di C:\Program Files-->CSS-->Tab Designer 2-->styles-->Tab Menu H
4. klik tableftH dan tabrightH
5. upload
6. save and get code

12. cari code berikut ini

background:url("tableftH.gif")

13. ganti code tableftH.gif dengan code yang tadi didapat dari photobucket

14. copy paste code yang sudah diedit di notepad ke blog anda

15. letakkan di bawah header dengan cara drop and drag.

16. SELESAI

Artikel Yang Berhubungan

Widget by Hoctro | Support by designer blog

About The Author

Bie, that's my name. Im just an ordinary blogger.Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones.

Share This

• 
• 
• 
• 
• 
• 
• 

Subscribe Here