PASAMAN SAIYO

Untuk sebuah yang berbeda dan demi sebuah kenyamanan tampilan halaman wap sangatlah berguna. Css juga bisa menjadi ciri khas dan jati diri dari pemiliknya, sama halnya yang saya lakukan. Tapi saya memiliki banyak css yang saya edit sendiri, tergantung anda suka atau tidak.

pertama, kita akan membahas bagaimana css ini berkerja. Css wap memang berbeda dalam penggunaan nya. Diharuskan memasangnya secara manual demi mendapatkan hasil yang baik dengan cara merangkai 1 kode dengan kode lain yang terhubung dengan script templates atau script css. Jauh berbeda dengan sebuah blog.

Baik sekarang kita akan membahas lebih dalam bagaimana menggunakannya. Seperti berikut ini, saya menggunakan script css default mobile yang saya buat sendiri. Pertama yang harus dilakukan adalah meletakan link atau script css didalam file yang menjadi bagianheader wap kita. Khusus xtgem script css bisa anda simpan pada root " _global_stylesheet.css" tanpa harus menghapus template asli. Tapi file yang harus disimpan di _global_sylesheet.css haruslah script utuh. Jika menggunakan link impor lebih baik meletakannya dibagian root_header. Dan untuk wapka, wenru dan wapego head biasanya diambil dari file lain dengan cara mengincludenya atau memisahkan dari halaman post. Tidak jauh berbeda dengan xtgem. Hanya saja xtgem menginclude dengan otomatis sedangkan di wapka, wenru maupun wapego kita harus menginclude secara manual. ini bertujuan agar tampilan head menjadi sama disetiap halamannya dibuat, tentunya setiap kali membuat halaman dibagian atas selalu include / atau sertakan file dimana rancangan header berada.

Berikut kode css (khusus xtgem): salin kode dibawah bagi pengguna xtgem

<link rel="stylesheet" href="http://saiyo.hexat.com/myfiles/saiyocss/09999_254123652147/09999-xt-d1/saiyo.css" type="text/css" />

Berikut kode css untuk wapka, wenru, wapego

<link rel="stylesheet" href="http://saiyo.hexat.com/myfiles/saiyocss/09999_254123652147/09999-xt-d1/saiyo_wapka_wenru_wapego.css" type="text/css" />

Silahkan bagi anda salin dan pastekan link diatas dibagian header wap anda.

sekarang kita akan membahas cara menggunakan atau mengaktifkan class nya. Untuk script ini kebanyakan menggunakan div class, button hover, dan div style yang dirangkai membentuk tampilan khusus. Lihat caranya dibawah ini.

• Tampilan Header dengan div class, div style dan button hover

Lihat tampilanan : Preview

Dibagian header terdapat beberap element seperti title, diskripsi, tool menu. untuk membuat tampilan header seperti dipreview silahkan ikuti langkah berikut.

• Bagian title dan diskripsi wap

<div class="header"><font size="14px"><font color="darkgrey"> TITLE WAP KAMU </font></font><div class="desk"><h4> Deskripsi wap kamu disini </h4></div></div></div>

Ada dua div class yang digunakan. Untuk bagian tittle menggunakan class="header" dan bagian diskripsi menggunakan class="desk". Dan tampilan font dibagian header gunakan font size="14px" dan diskripsi menggunakan h4.

• Bagian menu bar
kode yang digunakan div class dan button hover. Lihat kode dibawah.

<div class="header"><div class="p1left"><center> <a href="/index" class="button">HOME</a> | <a href="http://link kamu" class="button">MENU</a> | <a href="http://LINK KAMU" class="button">ADMIN</a> </center></div></div> <b>Apa yang anda cari?</b> <div class="p1left"> <a href="http://" class="kat"> TEKS 1 </a> </div> <div class="p1left"> <a href="http://link kamu" class="kat"> TEKS 2 </a> </div> <div class="p1left"><a href="http://link kamu" class="kat"> TEKS 3 </a></div>

Pada menu ini kita menggunakan button hover dengan atribute class="button" dan html div dengan atribute class="p1left". Untuk menggunakan button hover. Cukup menambahkan atribut class="button" pada text link seperti contoh berikut ini

Cara pertama : <a href="link kamu" class="button">TEXT KAMU</a> Cara kedua : <a class="button" href="http://link kamu">TEXT KAMU</a>

hasilnya akan seperti ini : TEXT KAMU DISINI

Ada dua atribute html button dalam bagian css. Atribute pertama class="button" dan atribute kedua class="kat". Memberikan tampilan button hover yang berbeda disetiap classnya.

Keseluruhan Kode Rancangan Header

Dari keseluruhan kode untuk rancangan header wap akan seperti dibawah ini.

<div class="header"><font size="14px"><font color="darkgrey"> PASAMAN SAIYO </font></font><div class="desk"> <h4>Deskripsi wap kamu disini</h4> </div></div><div class="header"> <div class="p1left"><center> <a href="http://" class="button"> HOME </a> | <a href="http://link" class="button"> MENU </a> | <a href="http://link" class="button"> ADMIN </a></center></div></div> <b>Apa yang anda cari?</b> <div class="p1left"><a href="http://" class="kat"> TEXT MENU 1 </a></div> <div class="p1left"><a href="http://link" class="kat"> TEXT MENU 2 </a></div> <div class="p1left"><a href="http://link" class="kat"> TEXT MENU 3 </a></div>

jangan lupa untuk menempatkan link stylesheet dibagian teratas.

Untuk masalah header sudah teratasi. Selanjutnya kita akan membahas untuk tampilan Tubuh Wap. Ini akan lebih menarik.

PAGE-01

NEXT PAGE