Saturday, 14 June 2008

Cara Membuat Website di 000webhost

Seperti yang sudah dijelaskan pada artikel sebelumnya (baca disini), 000webhost merupakan layanan webhosting gratis yang top abis. Dengan memakai layanan webhosting ini kamu bisa membuat web yang support database. Sedangkan untuk keperluan blog km bisa mengupload file2 kamu seperti gambar, animasi, suara dll untuk digunakan di dalam blogmu. Tapi dalam ketentuan mereka, kita tidak boleh hanya menaruh file-file kita di hosting tersebut tanpa membuat webnya, jika tidak maka account kita akan dihapus. Nha pada tutorial kali ini, akan aku coba jelaskan sedikit tentang bagaimana cara membuat web di 000webhost. Mungkin tutorial kali ini akan menjadi pengalaman baru bagi yang belum pernah membuat website, karena website itu sedikit beda dibanding dengan blog.
OK kita mulai aja tutorialnya.

1. Bagi yang belum punya account di 000webhost silahkan daftar DISINI. Bagi yang sudah punya, silahkan login di account webhost kamu.
2. Bagi yang baru mendaftar maka akan langsung disuguhi form pendaftaran yang salah satu isinya adalah kita disuruh untuk memasukkan domain yang kita inginkan. Ada 2 pilihan domain yang akan kita pakai, yg pertama yaitu dengan menggunakan domain yang sudah kita beli (biasanya nama domainnya "www.domain.com" / "www.domain.net" dll) , yang kedua yaitu dengan menggunakan sub domain gratisan yang dari webhosting tsb (biasanya nama domainnya "www.domain.net78.net" ato "www.domain.890m.com" dll). Pilihan tersebut ada pada kolom "I want to host my own domain" dan "or, I will choose your free subdomain"

Iklan: Bagi yang ingin beli domain silahkan beli di dodoldomain.com, murah lho.

3. Kemudian isikan data2 yang diminta di kolom2 yang lain, trus klik tombol "Create My Account"
4. Kemudian masuk ke "Enter Control Pannel".
5. Pada dasarnya ada dua pilihan dalam pembuatan website ini, yaitu dengan membuat sendiri webnya kemudian kita upload atau dengan menggunakan fasilitas "Website Builder" yang ada. Jika kamu sudah mahir dan pintar bikin web maka "Upload" file adalah pilihan yang tepat. Tapi jika kamu belum bisa membuat web sendiri, maka pilihlah "Website Builder", karena dengan fasilitas ini kita bisa membuat web tanpa harus mendesain terlebih dahulu, kita tinggal memilih template yang disediakan kemudian isi dengan menu2 dan konten yang kita inginkan.





6. Untuk "website builder" disana nanti sudah ada petunjuknya, silahkan diikuti.
7. Kalo sudah jadi jadi webnya silahkan dicek dengan mengetikkan alamat domain / URL kamu di browser. Nha seperti itu lah tampilan webmu.

"CARA UPLOAD FILE DI 000WEBHOST"

Berikut ini akan dijelaskan cara menguplaod file di 000webhost.

1. Login di 000webhost.
2. Kemudian klik link "Go to CPanel"



3. Kemudian pilih "File Manager" (lihat gambar no.5 diatas).
4. setelah itu klik link "Public Html"




5. Untuk upload file klik pada tombol "Upload"
6. Kemudian nanti akan muncul tombol2 seperti "Browse", Klik tombol tersebut kemudian cari file yg ingin diupload. Jika sudah lalu klik tombol/icon "Centang/Cek".
7. Klik tombol "Back" (gambar panah ke kiri) untuk kembali ke menu sebelumnya dan melihat apakah file yang km upload tadi sudah ada atau belum.
8. Kamu bisa mengupload file2 gambar, suara, video, html, php, javascript dll.
9. Untuk mendapatkan link gambar atau file yg lain, misal untuk keperluan membuat float image (gambar sonic yg dipojok), banner, atau yg lain caranya yaitu km klik kanan pada link "open" (di deretan file gambar tersebut) kemudian pilih "copy link location" (bagi yg menggunakan Mozilla). Nha link yg km copy itulah URL atau alamat gambar yg bisa kamu gunakan untuk mengganti misal gambar sonic yang ada di "float image".

Lho...tutorialnya kok jadi begini ya :t
Apa gak nyimpang dari judulnya tuh? :D
Ah gak papa deh....


Jangan Lupa Baca Juga Yang Ini :
Hosting

* Web Hosting Gratis Tanpa Iklan
* Web Hosting Information Provider
* Alternatif Tempat Hosting Gratis Dan Unlimited?

Tuesday, 20 May 2008

Cara Membuat Template di Blogger

Membuat Template Blogger". Mulai dari mana ya? nnnngg.. ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya (caranya download klik kanan trus "save as"). Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer. seperti yang ada dalam gambar berikut:



Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://kendhin.890m.com/template/bg.jpg') repeat-x top left; }

4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://kendhin.890m.com/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......