Cara Membuat Tampilan Wap Menjadi Web
Tutorial ini sedikit ngejlimet, tapi kalau dibaca dan diperhatikan pelan-pelan pasti gampang.
"Sebelum bertempur, kenalilah lawanmu, tiada kemudahan selain belajar terlebih dahulu, ungkapan paling bijak dalam mengawali pekerjaan adalah dengan kalimat "Bismillahirrohmanirrohim". (Oleh Matyasin)
Tutorial
Sebelum melanjutkan baca tutorialnya, download dulu template yang cocok dan bagus menurut ente. Ane rekomendasikan di Sini atau di Sini, karena template-template disitu bagus-bagus dan free tentunya. Dan template-template disitu juga mudah-mudah karena biasanya didalam template tersebut hanya ada file (index.html), (style.css), (folder image), dan file .jss juga ada tapi sedikit, dan amat mudah difahami.
Tahap Pengeditan
Pertama : Download templatenya kemudian extrak filenya.
Kedua : Buatlah folder apa ajah, contoh "folder fotoku" di xtgem/wap ente, "ingat bukan buat file tapi buat folder"Ketiga : Upload semua file "Image" dari template yang di download tadi ke folder "fotoku" yang tadi ente buat di bagian kedua tadi.
Setelah di upload semua imagenya nanti image-image ntu pan punya link kan, kayak gini, contoh :
/fotoku/bg.gif atau /fotoku/header.jpg atau /fotoku/menu.gif dan seterusnya
(kalo di xtgem ntu kalo mao liat linknya klik tanda + pada image ntu). Setelah semua file "Image" dah selesai di upload, ente tutup dulu dah file image kemudian ente menuju ke "file browser" setelah ente dah di file browser lanjut dah kelangkah berikutnya.
Keempat : Upload File "style.css"
Kelima : Buka file "style.css" maka isinya kayak gini :
/*
Design by bla bla bla bla
http://bla bla bla bla
Released for free under a Creative Commons Attribution 2.5 License
*/
a:link {
color: #ffffff;
}
a:hover{
text-decoration: underline;
color: #7c9efc;
}
a:visited {
color: #ffffff;
}
*
{
border: 0;
margin: 0;
}
i{
color: #CCCCCC;
}
body
{
font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #000000;
background: url(<font color="#0000ff">images/bg.gif);
}
#main
{
margin: 0 auto;
width: 999px;
background: #373737 url(images/main.gif) repeat-y center;
border-right: 9px solid #ffffff;
border-left: 9px solid
Ganti yang berwarna biru pada kode itu menjadi gini :
/*
Design by bla bla bla bla bla
http://bla bla bla bla
Released for free under a Creative Commons Attribution 2.5 License
*/
a:link {
color: #ffffff;
}
a:hover{
text-decoration: underline;
color: #7c9efc;
}
a:visited {
color: #ffffff;
}
*
{
border: 0;
margin: 0;
}
i{
color: #CCCCCC;
}
body
{
font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #000000;
background: url(http://alamat wap ente.com/fotoku/bg.gif);
}
#main
{
margin: 0 auto;
width: 999px;
background: #373737 url(http://alamat wap ente.com/fotoku/main.gif) repeat-y center;
border-right: 9px solid #ffffff;
border-left: 9px solid
Edit semua jangan sampai ada yang tertinggal. dan ganti seperti contoh diatas. Setelah semua isi "syles.css" dah selesai diganti, kemudia save dan kembali ke "file manager" lalu tahap selanjutnya....
Keenam : Upload file "index.html" kemudian buka dalam bentuk text, maka akan tampil seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Judul Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page_wrapper">
<div id="header_wrapper">
<div id="header">
<h1>Menu template<font color="#FFDF8C">Portal</font></h1>
Dan seterusnya.....!
Ubah file index.html jadi kayak gini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Membuat Tampilan Wap Menjadi Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://alamat wap ente.com/fotoku/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="page_wrapper">
<div id="header_wrapper">
<div id="header">
<h1>Article terbaru<font color="#FFDF8C">Portal</font></h1>
Setelah semua sudah selesai di edit trus save dan preview lihat hasilnya.........!!!!
Kalo belum berhasil kemungkinan ada beberapa masalah yang salah dalam pengeditannya.
Terkadang ada template bawaan itu sendiri yang agak rumit, maka dari itu disini ane rekomendasikan template yang sederhana ajah seperti yang ane rekomendasikan dibagian paling atas :
Karena pada template yang ane rekomendasikan itu, isi filenya sedikit, biasanya cuma ada file
-image
-index.html
-styles.css
- dan terkadang ada file .js yang gak perlu diedit lagi.
Seperti wap ane ini semua templatenya ane ambil dari situ.
Untuk hasil yang lebih sempurna pada wap yang ente edit itu, lebih baik gunakan PC, maksud ane kalo ente pas ngedit templatenya pake HAPE, sesekali ente ceck juga pake PC, soalnya terkadang template yang ente gunakan itu tidak support buat xtgem.
Dah gitu ajah cara ngedit wap kayak www.majlas.yn.lt ini. Kalo kurang faham ulangi lagi baca tutorialnya. Gunakan kalimat "BELUM BISA" jangan gunakan kalimat "TIDAK BISA".
NB : Untuk mempermudah ngedit file Html gunakan htmlmaker atau sejenisnya.
Okeh Good Luck moga sukses.....!!!! Semoga Article Ini sangat membantu.
"Ya Allah jadikanlah hatiku cahaya, pada mataku cahaya, pada pendengaranku cahaya, dikananku cahaya, dikiriku cahaya, diatasku cahaya, dibawahku cahaya, didepanku cahaya, dibelakangku cahaya, dan jadikanlah aku cahaya."(HR BUKHARI)
Content Title
Berikanlah komentar, gunakan log in untuk memberikan tanggapan
