IcHiNx Warehouse Old

Membuat Penggalan Artikel

2009-08-09T17:41:00.003+07:00

Kali ini saya akan membahas cara pembuatan tentang penggalan artikel. Semoga para sobat tertarik, kalau tidak juga ya sekedar pengetahuan saja juga kan tidak ada ruginya. Penggalan artikel ialah bukan suatu tulisan hasil posting, melainkan hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya. Maksudnya pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke Link yang lain.

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://learn-website.blogspot.com/2009/08/perlunya-ie-dan-firefox.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Perlunya IE dan FireFox

Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.

Maka kode yang kita buat adalah sebagai berikut :

  <span style="color:#FD8403"><font size="6">Perlunya IE dan FireFox</font></span>
<hr width="100%" align="left">
<br/>
Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain. You some among them? <a href="http://learn-website.blogspot.com/2009/08/perlunya-ie-dan-firefox.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>

Kode tersebut hasilnya akan seperti ini :

Perlunya IE dan FireFox

Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain. You some among them? ...Read more...

Biar lebih faham, sedikit saya uraikan :

<span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
<font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
<br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.

Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

Cari kode seperti di bawah ini :

  <div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :

  <span style="color:#FD8403"><font size="6">Perlunya IE dan FireFox</font></span>
<hr width="100%" align="left">
<br/>
Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain. You some among them? <a href="http://learn-website.blogspot.com/2009/08/perlunya-ie-dan-firefox.html"><b>...Read more...</b></a>
<hr width="90%" align="left">
<br/>
<div class="post"><a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>

Klik tombol Preview untuk melihat perubahan yang baru di lakukan

Apabila sudah OK, klik tombol save Template Changes

Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.

Untuk template baru :

Klik menu Layout

Klik menu Page Elements

Klik Add a Page Element

Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

Copy paste kode penggalan artikel yang telah kita buat tadi

Klik tombol SAVE CHANGES

Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

Bila sudah OK, klik tombol SAVE

Selesai.

Selamat mencoba ! ! !

Perlunya IE dan FireFox

2009-08-09T16:53:00.001+07:00

Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng saya pinjem tuh kompi nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya. setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan Internet Explorer yakni si FireFox ini lebih kebal terhadap virus-virus semacam Trojan dan teman-temannya.

Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar apa, blognya ancur begitu. Setelah kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi. Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.

Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini : Buset deh, kebiasaan pake FireFox pas dilihatdi IE, blog ku ancur begini ya.

Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat, berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab tadi dari perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.

Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan (marquee), hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena kelebihan quota space. Bagi yang suka pake kode untuk mengedipkan hurup buat narik perhatian pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.

Oke, thanks ya sobat, semoga infonya bermanfaat..

Membuat Banner Animasi

2009-08-08T18:56:00.001+07:00

Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.

bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

Contoh banner animasi :

selamat mencoba.

Pasang Jam di Blog

2009-08-08T17:51:00.003+07:00

Salah satu aksesoris yang bisa kita tambahkan pada blog kita adalah memasang jam. Kita bisa mendapatkan aksesoris ini dengan secara gratis. Silahkan klik disini . Salah satu contoh jam yang tersedia adalah sebagai berikut :

Dan bagi anda yang ingin blognya di pasang jamjuga, silahkan ikuti langkah-langkah berikut :

Silahkan kunjungi situs http://www.clocklink.com
Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
Klik tombol yang bertuliskan Accept
Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
Set ukuran jam yang anda sukai di samping tulisan size
Copy kode HTML yang di berikan pada notepad
Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
Selesai

Sekarang blog anda tampak cantik dan menarik untuk di lihat.

Selamat mencoba.

Blogger Emoticons

2009-08-08T17:42:00.003+07:00

Supaya postingan kita makin mantap, saatnya kita memberikan emoticons pada blog kita..

Blogger Emoticons

<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">

<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">

Kali ini blog para sobat pasti jadi lebih hidup..

Membuat Link Untuk Download

2009-07-08T13:58:00.003+07:00

Dalam blog, kita tidak bisa menyimpan file exe untuk di download oleh para pengunjung. Tetapi kita bisa membuat suatu link yang disediakan oleh para jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan bisa di download oleh para pengunjung.

Caranya, pertama kita harus mempunyai account / akun pada situs tersebut, kemudian setelah mempunyai account, baru kita bisa meng-upload data yang ingin kita simpan, lalu setelah proses upload berhasil, kita adan diberi URL address dari file yang kita upload. Langkah kedua, kita harus memasang link yang menghubungkan dengan URL address file yang kita upload tadi.

Agar tidak terlalu lama mencari situs-situs yang menyediakan space untuk upload file, saya akan memberikan situs penyedia layanan space untuk upload file, yaitu www.snapdrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

Silahkan klik http://www.snapdrive.net

Klik tulisan Register

Isi formulir yang disediakan dengan data diri sobat

Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat.

Password --> isi dengan password yang di inginkan.

Confirm password --> isi kembali dengan password yang tadi di tuliskan.

Email address --> isi dengan alamat email sobat, tentunya yang masih valid.

First name -->isi dengan nama depan sobat

Last name --> isi dengan nama belakang sobat

Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia

Postcode --> isi dengan kode pos daerah sobat

Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)

Date of birth --> pilih tanggal kelahiran sobat

Preferances isi dengan tulisan yang tertera di situ

Klik tombol Register

Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi

Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum

Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut

Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih

Klik tombol OK

Silahkan Login dengan username serta password yang tadi di tuliskan saat register

Setelah berada di halaman account sobat, klik tulisan Upload

Klik tombol Add Files

Pilih file yang ada dikomputer sobat yang mau di upload

Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung

Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya

Klik tulisan HTML Code

Copy kode yang di berikan lalu paste pada program notepad

Klik tulisan Logout untuk keluar dari situs tersebut

Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>

Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :
<br/><br/>
<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Maka nanti di blog kita akan tampil seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :

download

Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!

Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba !

Daftar dan Pasang Mybloglog

2009-07-08T12:45:00.003+07:00

Jika para sobat masih bingung dengan yang namanya Mybloglog, silahkan para sobat lihat ke bagian sidebar sebelah kanan yang bertuliskan mybloglog atau recent visitors. Disitu terdapat photo-photo para tamu yang pernah berkunjung ke blog ini, mereka juga sama-sama anggota yg terdaftar di mybloglog. Mungkin jika anda sering singgah di blog ini, foto anda pun sudah berada di sana !!!

Dalam arti kata berarti mybloglog itu ialah, suatu situs yang menyediakan layanan untuk melacak ( tracking ) para pengunjung atau website, apabila pengunjung tersebut merupakan anggota situs mybloglog maka secara otomatis terdeteksi dan di cantumkan dalam menu Recent Readernya ( pembaca terbaru ).

Banyak manfaat yang kita dapatkan dari mybloglog itu sendir, contohnya kita bisa menambah trafic ke blog kita, kita juga bisa mengetahui link mana yang banyak di klik, dan yang pastinya manfaat dari mybloglog adalah bisa mempererat tali silaturahmi antar pengguna blog atau pemilik blog.

Saya rasa para sobat sudah mengerti banyak tentang mybloglog, maka dari itu kita langsung saja membahas tentang cara bergabung di mybloglog, silahkan ikuti langkah-langkah berikut ini :

Silahkan buka situs http://www.mybloglog.com

Isi form yang telah di sediakan di bawah tulisan Sign Up Now

Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Ichinx

Email --> Isi dengan email sobat ( yang valid)

Password --> Isi dengan password yang di inginkan.

Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://learn-website.blogspot.com

Klik Tombol Register

Terlihat beberapa form yang harus diisi lagi

Blog/Site Title --> Isi dengan judul blog sobat

Blog platporm --> pilih blogspot.com

Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai

Klik tombol yang bertuliskan Complete Registration

Klik tulisan Go to Your page

Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas

Isi semua data diri sobat

Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile

Klik tulisam MY HOME untuk kembali ke home

Klik tombol yang bertuliskan Get Widget

Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna background heading

Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading

Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom

Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160

Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh

Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh

Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)

Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja

Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu

Kembali ke bagian atas

Klik tombol bertuliskan Preview and Get Code

Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad

Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat

Silahkan close window situs tersebut.

Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita atau widget blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML.

Lets Try !!!!

Pasang Video

2009-07-07T04:36:00.008+07:00

Selain memasang gambar pada postingan atau page, kita juga dapat memasang video yang kita inginkan. Dengan adanya video tentu akan lebih mempercantik dan memberikan informasi yang akurat. Memang jika kita memasang video dan image yang berlebihan, blog kita akan jadi lebih lambat dari sebelumnya. Tapi itu terserah bagi para sobat.. Untuk membuatnya kita harus melakukan langkah-langkah seperti berikut :

Untuk membuat sebuah video, kita bisa menggunakan situs layanan pembuatan video, salah satunya adalah http://www.youtube.com. Ikuti langkah-langkah berikut ini :

Untuk daftar silahkan kunjungi http://www.youtube.com
Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
Isi semua data diri anda pada form yang di sediakan, jangan lupa beri tanda tik/cek pada kotak di samping tulisan »» Sign me up for the "Broadcast Yourself" email - I agree to the terms of use and privacy policy. lalu klik tombol Sign Up
Setelah berhasil, anda diminta untuk veryfikasi, silahkan cek email yang anda daftarkan tadi untuk melakukan veryfikasi
Jika email dari youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm your email addres
Dengan meng klik tulisan tadi, secara otomatis anda sudah masuk kedalam halaman account anda dan siap untuk upload video
Klik tulisan Upload Video yang berada pada layar sebelah atas
Isi form yang di sediakan
Klik tombol bertuliskan Continue Uploading
Klik tombol Browse, masukan file video yang ingin anda masukan
Beri tanda tik/cek pada radio button, public »» jika video anda bisa dilihat oleh umum. Private »» Jika video anda bersifat pribadi yang hanya bisa di lihat oleh orang yang anda tunjuk
Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
Setelah proses upload selesai, anda tinggal mengcopy kode HTML yang di berikan. lalu paste pada Notepad
Silahkan klik Log Out untuk keluar dari situs tersebut
Selesai. anda sudah mempunyai video yang bisa di simpan pada artikel anda

Untuk memasukan kode video yang telah anda copy tadi, caranya yaitu anda tinggal posting artikel seperti biasa lalu sisipkan kode tersebut pada tempat yang anda inginkan. Cuma saat copy n' paste kode tersebut posisi posting harus pada Edit HTML jangan pada posisi Compose. Jika sudah selesai memasukan artikel, Tinggal klik Publish dan video anda siap di lihat oleh para pengunjung blog anda.

Jika para sobat masih bingung memasukan kode video, caranya cari kode embed (di bawah url) lalu copy kode embed tsb, dan masukan kode embed pada tempat yg kita mau..

Ex :

<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/2F3MAqO79Yk&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2F3MAqO79Yk&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

Selamat bereksperimen ! ! !

Pasang Icon Yahoo Messenger ( YM )

2009-07-07T04:20:00.003+07:00

Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :

Style ID 1 Style ID 2 Style ID 3 Style ID 4 Style ID 5

masing-masing gambar mempunyai URL adddress sendiri yaitu :

 http://opi.yahoo.com/online?u=YahooID&m=g&t=1  
Untuk Style ID 1

http://opi.yahoo.com/online?u=YahooID&m=g&t=2  
Untuk Style ID 2

http://opi.yahoo.com/online?u=YahooID&m=g&t=3  
Untuk Style ID 3

http://opi.yahoo.com/online?u=YahooID&m=g&t=4  
Untuk Style ID 4

http://opi.yahoo.com/online?u=YahooID&m=g&t=5  
Untuk Style ID 5

itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :

<img src="URL address">

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :

  <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">
Untuk Style ID 1

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
Untuk Style ID 2

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">
Untuk Style ID 3

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">
Untuk Style ID 4

 <img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">
Untuk Style ID 5

Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :

Kirim Instant Messenger.

Kodenya sebagai berikut :

<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Kirim Instant Messenger dengan pesan

Kodenya sebagai berikut :

<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

 <a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Menambahkan link ke chat room favorit

Kodenya sebagai berikut :

<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

 <a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.

Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :

<a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>

dan yang akan tampil seperti ini :

Icon akan menyala jika anda sedang online di yahoo messenger.

Selamat mencoba ! ! !

Memasang Gambar pada Judul Artikel

2009-07-07T03:10:00.006+07:00

Untuk membuatnya, ada beberapa step yang harus dilakukan, antara lain :

Langkah pertama

Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet.

Langkah kedua

langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com.

Langkah ketiga

langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :

http://bima.ipb.ac.id/~anita/bendera.gif

Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :

<img src="URL image">

Sehingga kodenya akan jadi seperti ini :

<img src="http://bima.ipb.ac.id/~anita/bendera.gif">

dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :

tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :

<img src="http://bima.ipb.ac.id/~anita/bendera.gif" width="45" hight="45" border="0">

sehingga image yang tadi akan berubah jadi seperti ini :

Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.

Langkah keempat

langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

Untuk yang memakai template klasik :

Klik menu Template

Klik menu Edit HTML

Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template

Cari kode berikut pada kode HTML sobat :

<$BlogItemTitle$>

Edit

Find

<$BlogItemTitle$>

judul postingan

<img src="http://bima.ipb.ac.id/~anita/bendera.gif" width="45" hight="45" border="0">  <$BlogItemTitle$>

Klik tombol Preview untuk melihat perubahan yang dilakukan

Jika sudah OK, klik tombol Save Settings

Selesai

Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.

Untuk yang memakai templat baru :

Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

  <img src="http://bima.ipb.ac.id/~anita/bendera.gif" width="45" hight="45" border="0">

kode image tersebut tag nya harus ditutup dengan tag penutup :

</img>

Sehingga kode image jadi bertambah menjadi :

<img src="http://bima.ipb.ac.id/~anita/bendera.gif" width="45" hight="45" border="0"></img>

Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting

Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya

Tunggu beberapa saat sampai proses selesai

Cari kode berikut pada template sobat :

  <a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

Sisipkan kode gambar yang kita miliki diantara kode :

  <a expr:href='data:post.url'> dan kode <data:post.title/></a>
<b:else/>

  <a expr:href='data:post.url'> <img src="http://bima.ipb.ac.id/~anita/bendera.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a>
<b:else/>

Klik tombol PREVIEW untuk melihat perubahan

bila sudah OK, klik tombol SAVE TEMPLATE

Selesai

Selamat mencoba !

Membuat Blogroll

2009-07-06T04:07:00.003+07:00

Jika para blogger belum mengerti apa itu blogroll, akan saya jelaskan terlebih dahulu. Blogroll ialah tool yang digunakan untuk menyimpan link blog dengan cara menghemat space.
Dalam tutorial blogroll ini, terdapat beberapa cara, yaitu :

Blogroll dengan marquee

Biasanya kebanyakan para blogger membuat blogroll dengan menggunakan perintah marque, karna bentuknya yang bisa membuat blog kita lebih bagus untuk di lihat.

Contoh membuat blogroll dengan perintah marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://learn-website.blogspot.com" target="_blank">Ichinx Warehouse</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/webmaster" target="_blank">Webmaster</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/blogging" target="_blank">Blogging</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/promosi-website" target="_blank">Promosi Website</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/tips-n-trick" target="_blank">Tips & Trick</a>
<br/><br/>

</marquee>

Maka nanti yang akan tampil pada blog kita adalah seperti ini :

Ichinx Warehouse

Webmaster

Blogging

Promosi Website

Tips & Trick

Kode diatas tidak harus di tuliskan persis seperti di atas, tapi bisa di sesuaikan dengan kondisi dan keinginan sobat. Kode yang bisa di rubah adalah :

scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5"

direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" , width="100%"

height="200" --> tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" , height="400" , height="250" .

Ada variasi lain, yaitu dengan memakai tabel, contoh :

<table border="3" width="155" height="130" cellpadding="2">

<tr>

<td align="left">

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://learn-website.blogspot.com" target="_blank">Ichinx Warehouse</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/webmaster" target="_blank">Webmaster</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/blogging" target="_blank">Blogging</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/promosi-website" target="_blank">Promosi Website</a>
<br/><br/>
<a href="http://learn-website.blogspot.com/search/label/tips-n-trick" target="_blank">Tips & Trick</a>
<br/><br/>

</marquee>

</td>

</tr>

</table>

Maka hasilnya akan seperti di bawah ini :

Ichinx Warehouse

Webmaster

Blogging

Promosi Website

Tips & Trick

Blogroll dengan menu dropdown

Untuk membuat blogroll pada menu dropdown, silahkan lihat contoh di bawah :

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://learn-website.blogspot.com">Ichinx Warehouse</option>

<option value="http://learn-website.blogspot.com/search/label/webmaster">Webmaster</option>

<option value="http://learn-website.blogspot.com/search/label/blogging">Blogging</option>

<option value="http://learn-website.blogspot.com/search/label/promosi-website">Promosi Website</option>

<option value="http://learn-website.blogspot.com/search/label/tips-n-trick">Tips & Trick</option>

</select>

</form>

Hasilnya akan seperti ini, silahkan klik pada menu dropdownnya :

Contoh variasi lainnya :

<h3> Blogroll </h3>

<div align="left">

<select style size=5="font-weight: normal; font-size: 13px; width="135"; font-family: Verdana,Tahoma,Arial; background-color: rgb(229, 229, 229);" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu">

<option style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="" selected="selected">--Teman-temanku--</option>

<option value="http://learn-website.blogspot.com">Ichinx Warehouse</option>

<option value="http://learn-website.blogspot.com/search/label/webmaster">Webmaster</option>

<option value="http://learn-website.blogspot.com/search/label/blogging">Blogging</option>

<option value="http://learn-website.blogspot.com/search/label/promosi-website">Promosi Website</option>

<option value="http://learn-website.blogspot.com/search/label/tips-n-trick">Tips & Trick</option>

</select>

</form> </div>

Hasilnya akan seperti ini :

User Online Status

2009-07-06T03:30:00.003+07:00

Berapa banyak orang yang online di blogmu? Anda tahu atau tidak? jika para sobat tidak tahu berapa banyak orang yang online di blogmu, para sobat bisa menggunakan sebuah tool untuk mengetahuinya. Untuk mendapatkan tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com, untuk langkah-langkahnya silahkan ikuti langkah berikut :

Silahkan buka www.geovisite.com

Klik tulisan Register yang berada di bawah gambar Geo counter Flash

Tulis alamat email sobat pada kotak kosong di samping tulisan Email

Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com

Tulis kata untuk login di samping tulisan Login (4/12). Contoh : ichinx

Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : warehouse

Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)

Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet

Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada, belum di akui bo)

Pilih judul blog sobat disamping tulisan Title. Contoh : Berita Blog

Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to service the equipment of electronic

Klik tombol yang berlogo disket

Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad

Silahkan close window browser sobat

langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat

Selesai.

Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :

http://www.neoworx.net

http://www.webfooted.net

http://www.fastonlineusers.com

http://www.histats.com

Selamat mencoba y....!!!!

Readmore pada template baru

2009-07-06T02:54:00.002+07:00

Sesuai janji saya pada waktu itu, kali ini saya akan menjelaskan tutorial tentang membuat perintah readmore pada template yang baru. Untuk caranya silahkan ikuti langka-langkah berikut :

Klik Setting

Klik Formatting

Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi text area kosong tersebut dengan kode di bawah ini :

<div class="fullpost">


</div>

Klik tombol yang bertuliskan Save Settings

Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :

Klik menu Dasboard

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula

Beri tanda centang pada kotak di samping tulisan Expand Widget Template

Tunggu beberapa saat ketika proses sedang berlangsung

Silahkan Sobat cari kode berikut pada kode template milik sobat :

<div class='post-body'>

Copy kode HTML di bawah ini kemudian paste di bawah kode tadi

 <b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :

<p><data:post.body/></p>

Copy kode HTML di bawah ini kemudian paste di bawah kode tadi

 <a expr:href='data:post.url'>Read More......</a>

</b:if>

klik tombol bertuliskan Save Template
Selesai.

Cara Posting Artikel

Klik menu Posting

Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :

 <div class="fullpost">


</div>

Tulisankan artikel yang ingin tampak pada blog sebelum kode :

<div class="fullpost">

Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :

</div>

Klik tombol bertuliskan PUBLISH POST

Klik tulisan Open New Window untuk melihat hasil dari postingan kita, kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas

Selamat mencoba !

Catatan :
Untuk kata Readmore, kita bisa menggantinya dengan kata yang kita mau. Contoh, kita bisa mengubah dengan kata Selengkapnya.., Baca selengkapnya.., Lanjutannya…

Membuat Foto Animasi

2009-07-05T21:37:00.004+07:00

Untuk membuat foto animasi kita bisa menggunakan jasa situs-situs pembuatan animasi. Banyak sekali situs pembuat animasi foto di internet, jumlahnya ribuan atau bahkan jutaan. Sebagai contoh anda bisa kunjungi salah satu situs yaitu, http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka situs www.slide.com

Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut

Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)

Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan

Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat

Langkah selanjutnya adalah melakukan pembuatan animasi

Klik style, untuk memilih gaya dari animasi

klik skin, untuk memilih bingkai animasi

klik Size untuk memilih ukuran

Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan

klik tombol Upload untuk melakukan proses upload foto

Jika proses upload selesai, klik tombolSave

Copy kode HTML yang di berikan, lalu paste pada program notepad

Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser

Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat.

Atau para sobat bisa juga daftar di http://www.flickr.com dan http://www.picturetrail.com

Selamat Mencoba...!!!

Memasang Statistik dan Tracker

2009-07-05T21:22:00.003+07:00

Dengan memasang statistik dan tracker, kita dan pengunjung bisa mengetahui berapa pengunjungkah yang pernah berkunjung ke blog kita, dan kita bisa mengetahui si pengunjung blog kita datang dari mana, apa dari search engine, blog lain ataupun darimana saja kita dapat mengetahuinya.

Kita bisa menggunakan dengan cara yang mudah yaitu kita menggunakan situs penyedia statistik. Di internet banyak sekali situs penyedia statistik gratis, sebagai contoh adalah situs http://www.sitemeter.com. Berikut adalah contoh tool yang bisa kita pilih :

Untuk mendapatkannya silahkan ikuti langkah-langkah berikut :

Silahkan kunjungi situs http://www.sitemeter.com.

klik tulisan Sign Up untuk melakukan pendaftaran

klik tombol bertuliskan Next

Klik tombol Next lagi

Isi semua tabel yang ada lalu klik tombol Next lagi

Isi lagi tabel yang ada, lalu klik tombol Next lagi

klik tombol Next lagi

klik tombol Next lagi ( cape dech next..next melulu )

Setelah ada keterangan proses sign up selesai, anda harus melakukan veryfikasi, silahkan buka email yg anda berikan

Buka email yang datang dari sitemeter.com, di dalamnya ada username dan password anda untuk login ke sitemeter.com

Silahkan login dengan id anda

Bila sudah login, Klik menu Manager

Klik Menu Meter Style untuk memilih gaya dari site meter anda

Pilih style yang anda sukai, kemudian klik tombol Select

Klik menu HTML Code

Klik tulisan Adding site Meter to a Blogger.com Site

copy semua kode HTML yang di berikan lalu paste pada Notepad

Klik menu Logout untuk keluar dari situs tersebut

Selesai, tinggal memasukan kode yang kita dapat ke dalam blog kita

Sekarang tugas kita adalah memasukan kode yang sudah kita dapat ke dalam blog, ikuti langkah- langkah berikut :

khusus blog dengan template klasik :

Klik menu TEMPLATE

Klik Edit HTML

Klik Edit (yang ada pada bar menu browser anda)

Klik Find (on this page)... ⇒ untuk mempercepat pencarian

Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah blogger (karena dekat dengan tombol blogger) klik Find

Copy & paste kode yang telah di simpan di notepad tadi, lalu klik tombol Preview untuk melihat perubahan yang terjadi

Jika sudah cocok dengan perubahan tadi, Klik Save Template Changes. Selesai

Sedikit tambahan, bila anda ingin site meter posisinya berada di tengah-tengah, tinggal tambah kode <center> ...kode site meter... </center>

Untuk blog dengan Template baru :

Klik menu layout

Klik Elemen Halaman

Klik Tambahkan sebuah Elemen Halaman

Klik TAMBAHKAN KE BLOG pada menu HTML/JavaScript

Tulis Judul site meter anda pada isian di sebelah form judul (bila ingin ada keterangan. kalau tidak, ya kosongkan saja)

Copy & paste kode Site meter pada kolom isian

Klik tombol Simpan Perubahan

Klik Elemen yang baru anda buat tadi, tahan lalu pindahkan ke tempat yang anda inginkan ( di drag & drop)

Klik tombol PRATINJAU untuk melihat perubahan yang baru di lakukan

Bila sudah cocok dengan perubahan tadi, klik tombol SIMPAN

Selesai

Untuk fungsi site meter sebagai tracker, silahkan anda login ke sitemeter.com trus ya acak-acak deh isinya pasti ketemu....

Membuat Buku Tamu ( Shoutbox / Guestbook )

2009-07-05T20:36:00.003+07:00

Salah satu sarana untuk berinteraksi antara yang punya blog dengan si pengunjung blog tsb adalah dengan memasang buku tamu pada sebuah blog. Di buku tamu, para pengunjung bisa menulis komentar tentang blog yang anda buat, bisa berisi pujian, pertanyaan, sekedar iseng, bahkan ada juga merupakan kritikan terhadap isi blog anda.

Untuk mendapatkan buku tamu sangat mudah, kita bisa tinggal mencari pada mesin pencari semisal google atau yahoo. Atau anda bisa menggunakan alamat situs yang servernya lumayan bagus, yaitu, Bagaimana caranya mendapatkan sebuah buku tamu. Untuk mendapatkannya sangat mudah, http://www.shoutmix.com. Untuk caranya silahkan anda ikuti langkah-langkah berikut ini :

Seperti biasa anda harus daftar terlebih dahulu dengan cara mengklik tulisan Get One noe, free>>, ataupun dengan mengklik tulisan Sign Up, silahkan anda tulis data-data anda pada form yang telah di sediakan.
Jika sudah tedaftar, dan di terima jadi anggota shoutmix, silahkan anda login dengan id anda
Pada kolom yang berjudul Style, klik menu appearance.
Silahkan klik menu pulldown di samping tulisan Load From Preset untuk mengatur tampilan buku tamu anda, silahkan pilih yang sesuai dengan keinginan anda. Jika sudah selesai klik Save Setting.
Untuk mendapatkan kode HTML dari shoutbox anda, silahkan klik Use Shoutbox yang berada di bawah menu Quick Start
Klik tulisan Place Shoutbox on web page. Isi lebar dan tinggi shoutbox yang di inginkan
Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda. Silahkan close situs tersebut.
Selesai

Untuk menempatkan kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.

Untuk blogger dengan template klasik :

Log in terlebih dahulu ke blogger.com dengan id anda
Klik menu Template
Klik Edit HTML
Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
Untuk jelasnya saya ambil contoh dengan shoubox milik saya, untuk menempatkannya tinggal klik Edit pada browser lalu pilih Find (on this page).. trus tuliskan kata buku tamu lalu klik find, maka kita akan langsung di bawa ke tulisan tersebut. Jika sudah ketemu tulisan tadi silahkan paste kode HTML shoutbox nya.
Klik tombol Preview untuk melihat perubahan yang kita buat.
Jika sudah cocok dengan perubahan tadi, klik Save Template Changes
Selesai

Anda bisa merubah ukuran lebar ataupun tinggi dari shoutbox , caranya anda tinggal merubah angka Width (untuk lebar) dan Height (untuk tinggi) dari dalam kode HTML shoutbox tersebut.

Untuk Blogger baru :

Silahkan Login dengan id anda
Klik menu Layout
Klik Page Element
Klik Add a Page Element
Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
Tuliskan judul shoutbox anda pada form title. Contoh : Buku tamu ku, atau my guestbook atau apa saja yang anda suka
Copy paste kode HTML shoutbox anda di dalam form Content
Klik tombol Save Changes
Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
Tekan tombol Save
Selesai

Selamat mencoba !

Sebagai tambahan, guestbook yang sering dipakai para blogger lainnya :

http://oggix.com

Untuk langkah-langkahnya hampir sama dengan langkah diatas.

Membuat Banner Animasi

2009-07-05T20:30:00.001+07:00

Memberikan Simbol Yahoo ( Emoticons )

2009-06-30T22:09:00.002+07:00

Untuk para sobat yang ingin memberikan icon / simbol yahoo, kalian bisa copy source code dibawah ini.

:)happy

 <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0>

:(sad

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0>

;)winking

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0>

:Dbig grin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0>

;;)batting eyelashes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0>

>:D

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0>

:-/confused
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=42 height=18 border=0>

:xlove struck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=42 height=18 border=0>

:">blushing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=42 height=18 border=0>

:Ptongue
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=42 height=18 border=0>

:-*kiss
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=42 height=18 border=0>

=((broken heart
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=42 height=18 border=0>

:-Osurprise
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=42 height=18 border=0>

X(angry
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=42 height=18 border=0>

:>smug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=42 height=18 border=0>

B-)cool
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=42 height=18 border=0>

:-Sworried
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=42 height=18 border=0>

#:-Swhew!
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=42 height=18 border=0>

>:)devil
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=42 height=18 border=0>

:((crying
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=42 height=18 border=0>

:))laughing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=42 height=18 border=0>

:straight face
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width=42 height=18 border=0>

/:)raised eyebrow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=42 height=18 border=0>

=))rolling on the floor

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=42 height=18 border=0>

O:-)angel
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=42 height=18 border=0>

:-Bnerd
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=42 height=18 border=0>

=;talk to the hand
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=42 height=18 border=0>

Yahoo hidden emoticons

:o3puppy dog eyes - New!

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/108.gif" width=31 height=18 border=0>

:-??I don't know
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/106.gif" width=40 height=18 border=0>

%-(not listening
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/107.gif" width=52 height=18 border=0>

:@)pig

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/49.gif" width=18 height=18 border=0>

3:-Ocow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/50.gif" width=18 height=18 border=0>

:()monkey
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/51.gif" width=21 height=18 border=0>

~:>chicken
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/52.gif" width=18 height=18 border=0>

@};-rose
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gif" width=18 height=18 border=0>

%%-good luck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/54.gif" width=18 height=18 border=0>

**==flag

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/55.gif" width=25 height=18 border=0>

(~~)pumpkin

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/56.gif" width=17 height=18 border=0>

~O)coffee
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/57.gif" width=18 height=18 border=0>

*-:)idea
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/58.gif" width=30 height=18 border=0>

8-Xskull

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/59.gif" width=18 height=18 border=0>

=:)bug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/60.gif" width=20 height=18 border=0>

>-)alien
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/61.gif" width=18 height=18 border=0>

:-Lfrustrated
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif" width=18 height=18 border=0>

[-O

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif" width=18 height=18 border=0>

$-)money eyes

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/64.gif" width=18 height=18 border=0>

:-"whistling
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif" width=22 height=18 border=0>

b-(feeling beat up
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif" width=18 height=18 border=0>

:)>-peace sign
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/67.gif" width=22 height=18 border=0>

[-Xshame on you

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif" width=22 height=18 border=0>

\:D/dancing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif" width=26 height=18 border=0>

>:/bring it on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/70.gif" width=23 height=18 border=0>

;))hee hee
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" width=18 height=18 border=0>

:-@chatterbox
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/76.gif" width=36 height=18 border=0>

^:)^not worthy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif" width=32 height=18 border=0>

:-joh go on
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/78.gif" width=26 height=18 border=0>

(*)star

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/79.gif" width=18 height=18 border=0>

o->hiro
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/72.gif" width=18 height=18 border=0>

o=>billy

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/73.gif" width=18 height=18 border=0>

o-+april
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/74.gif" width=18 height=18 border=0>

(%)yin yang
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/75.gif" width=18 height=18 border=0>

Selamat mempercantik postingan nya...

Posting Kode HTML di Artikel

2009-06-30T20:05:00.007+07:00

Bagi para pemula pasti bingung bagaimana cara memposting artikel dengan mengisi kode html agar tidak dianggap perintah. Untuk mengisi kode HTML agar muncul di postingan, ada tiga cara untuk melakukannya, yaitu :

Cara Pertama, anda harus mengganti karakter-karakter perintah dari program HTML dengan notasi tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :

Karakter	Notasi	Keterangan
<	<	Kurung runcing terbuka
>	>	Kurung runcing tutup
&	&	Tanda Dan
"	"	Tanda petik ganda
±	±	Tanda plus minus
Spasi		Tanda Spasi
©	©	Tanda hak cipta (copyright)
®	®	Tanda terdaftar (Registered)

Agar lebih paham akan saya beri contoh, misalkan dalam postingan anda berisi kata-kata seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<meta http-equiv="refresh" content="10">

</meta>

Jika anda ingin tampilkan kode yang seperti diatas, maka jangan menuliskan kode seperti yang diatas, karna tulisan kode tersebut tidak akan muncul di postingan, justru yang ada hanya menimbulkan dari efek kode tersebut. Nah caranya seperti yang saya tuliskan pada tabel, anda harus mengganti karakter-karakter perintah yang ada dengan notasi penggantinya, jadi yang harus anda tuliskan pada postingan adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

&ltbr/><br/> <code>
<meta http-equiv="refresh" content="10">
<br/>
</meta>
</code>

Pembubuhan perintah <code> dan </code> adalah untuk menandakan bahwa yang anda tulis adalah sebuah kode HTML, dan nantinya pun tulisan-tulisan yang berada dalam perintah ini akan tanpil beda dengan tulisan-tulisan yang lainnya, sebagai contoh silahkan anda lihat postingan saya yang lainya yang membubuhkan kode-kode HTML. pembubuhan perintah <br/> adalah untuk membuat tulisan berpindah kebawah, jika anda tidak membubuhkan perintah <br/> tadi, walaupun di posting-an anda tulis jauh kebawah, hasilnya akan tetap bersatu.

Memang agak sedikit pusing dengan cara yang pertama. Tapi tenang aja, disini menyediakan cara yang kedua.

Cara kedua, dengan menggunakan text area. Jika masih belum tahu cara membuat text area silahkan klik disini. Sebagai contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<br/><br/>
<p align="left"><textarea name="code" rows="6" cols="400"><meta http-equiv="refresh" content="10"> </meta></textarea></p>

Maka yang akan tampil di blog anda adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<background-color: white;><br /><meta http-equiv="refresh" content="10"> </meta>

Jika masih pusink mengerjakannya, tenang para sobat, saya masih punya cara ketiga yang lebih simple dan mudah.

Cara Ketiga, kita bisa menggunakan layanan ENCODE / DECODE untuk mengconvert HTML code menjadi HTML entities.

Untuk menggunakan layanan ini banyak sekali yang bisa kita jumpai, untuk contoh, klik disini.

Coba perhatikan gambar di atas, pada area teks terdapat kode html yang akan di convert, untuk mengkonvertnya, klik tombol encode..

Pada gambar diatas, menunjukan bahwa kode html sudah di convert. Jika ingin mengembalikan kode seperti semula, tinggal klik saja decode. Lebih mudah kan, tapi apa salahnya kan jika kita mengetahui dasarnya.

Catatan : untuk cara pertama dan kedua, anda harus pada posisi Edit HTML jangan pada posisi compose/tulis.

Selamat mencoba.......!

Membuat efek Refresh

2009-06-30T19:53:00.002+07:00

Para sobat tentunya sudah tau kan, apa itu yang disebut dengan "Refresh", fungsinya digunakan untuk membuat " penyegaran " kembali dalam halaman blog atau website. Fungsi refresh ini sama saja dengan fungsi refresh yang ada pada browser internet, cuma fungsi ini memiliki perbedaan, yaitu jika refresh seperti biasanya kita harus menekan tombol refresh yang ada pada tool bar, tetapi jika refresh ini anda tidak perlu menekan tombol refresh, karna fungsi ini dibuat bekerja dengan otomatis.

Cara membuatnya cukup dengan memberikan kode di bawah ini :

<meta http-equiv="refresh" content="10"/>

Simpan kode di atas di antara <head> .... </head>

sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>

Selamat mencoba....!

Membuat Link dan Memodifikasi Link

2009-06-30T18:15:00.004+07:00

Tentunya anda sebagai bloger sudah tau apa itu " Link ". Membuat link bagi para bloger hukumnya wajib ( agamis banget sih ), karna jika anda tidak membuat link, bisa-bisa berakibat blog anda akan tidak di kenal oleh blog lainnya. Dalam arti kata link bisa menaikan page rank blog anda. Dalam isi postingan ini terbagi dalam beberapa sub, yaitu :

Link pada posting-an

Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :

Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.

Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :

Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.learn-website.blogspot.com/?id=ichinx

Klik OK. Selesai

Link dengan window baru

Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :

Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu yang ada pada toolbar.

Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.learn-website.blogspot.com/?id=ichinx :

<a href="http://www.learn-website.blogspot.com/?id=ichinx">klik disini</a>

maka disini anda harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah :

<a href="http://www.learn-website.blogspot.com/?id=ichinx" target="new">klik di sini</a>

atau :

<a href="http://www.learn-website.blogspot.com/?id=ichinx" target="new">klik di sini</a>

atau bisa juga seperti ini :

<a href="http://www.learn-website.blogspot.com/?id=ichinx" target="_blank">klik di sini</a>

Buat Links di sidebar

Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)

Klik menu TEMPLATE

Klik Edit HTML

Klik Edit

Tekan CTRL+F… --> untuk mempercepat pencarian

Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find

Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode yang di tulis adalah :

<a href="http://learn-website.blogspot.com" target="_blank">ichinx warehouse</a>

Klik Save Template Changes. Selesai

Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

Klik menu Layout

Klik Page Elements

Klik Add a Page Element

Klik ADD TO BLOG pada menu Link List

Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya Adalah “ Link partner” atau silahkan terserah anda

Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi silahkan di kosongkan saja.

Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat, silahkan pilih Don’t Sort

Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//learn-website.blogspot.com

Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name. contoh : Ichinx Warehouse.

Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.

Klik SAVE CHANGES bila sudah selesai

Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda inginkan ( di drag & drop ) .

Klik SAVE. Selesai

Membuat link dari gambar atau image

Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya seperti di bawah ini :

Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com.

Jika anda sudah mengupload gambar anda, maka gambar tersebut akan di beri alamat URL, copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping mempunyai alamat URL :

http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427212325.gif

Nah jika anda ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis adalah :

<a href="http://learn-website.blogspot.com"><img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427212325.gif"></a>
(kode dalam satu baris)

jika ingin dalam window baru :

<a href="http://learn-website.blogspot.com" target="_blank"><img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427212325.gif"></a>
(kode dalam satu baris)

Link berjudul

Mungkin anda bingung, dalam sebuah link ada kata-kata untuk menekankan ajakan anda kepada para pembaca untuk mengklik link tersebut. Untuk membuat judul link ini sangat mudah, yakni anda hanya harus menambahkan title=" ... " pada link yang anda buat. Contoh seperti yang saya berikan di atas :

<a href="http://www.learn-website.blogspot.com/?id=ichinx target="new" title="tutorial blog untuk pemula silahkan klik di sini">ichinx warehouse</a>

Akhir kata, jangan pernah menyerah untuk mencoba ya...

Membuat Text Berjalan ( Marque )

2009-06-30T17:22:00.004+07:00

Text berjalan atau istilah tenarnya " Marque ", ialah suatu program dengan menggunakan HTML code sehingga menghasilkan sebuah teks / tulisan yang bisa bergerak atau berjalan. Kebanyakan dari para bloger menggunakan marque, karna disamping untuk menghemat tempat pada halaman blog, marque juga sangat dinamis dan menarik untuk dilihat.

Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.

Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.

SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik

LOOP="angka|-1|infinite" --> Mengatur jumlah loop

WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Agar lebih jelas akan saya sertakan contohnya :

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

teks berjalan / marque

</MARQUEE>

hasilnya :

teks berjalan / marque

ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

text berjalan / marque

</MARQUEE>

text berjalan / marque

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

text berjalan / marque

</MARQUEE></b></FONT></div>

hasilnya :

text berjalan / marque

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

text berjalan / marque

</marquee>

hasilnya :

text berjalan / marque

Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">

<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://learn-warehouse.blogspot.com" target="new">Blog Rubric </a><br/>

</marquee>

hasilnya :

Rubrik Elektronik

Electronic Rubric

Blog Rubric

Jika masih kurang jelas, silahkan tuliskan dalam comment.
Dan para sobat bisa mengutak-atik dengan keinginan sobat sendiri.

Selamat Mencoba y....

Membuat Menu Dropdown

2009-06-30T11:32:00.002+07:00

Dengan menambahkan fasilitas menu dropdown dalam blog, manfaatnya sangat besar. Apalagi bagi para sesepuh blogger ( alias blogger yang sudah lama berdiri ), pasti sangat membutuhkan menu ini. Karna setiap posting di blog, setiap bulan maka postingan kita akan terarsip otomatis secara rapi, dan arsip akan tampil di sidebar. Kendalanya, bagaimana jika kita sudah ngeblog setahun, maka arsip januari akan tampil berjejer di sidebar kita. Untuk mengantisipasinya, kita bisa membuat pull-down menu seperti dibawah ini:

Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama "Archives", baru setelah di klik, akan muncul nama bulan arsip-arsip kita.

Untuk membuat arsip pulldown ini ada dua yakni untuk blogger dengan template klasik, dan template baru. Untuk template klasik langkahnya yaitu :

1. Login ke blogger.com dg id Anda

2. Klik Template

3. Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

&<BloggerArchives>

<a href="<$BlogArchiveURL$"$gt;'><$BlogArchiveName$></a>

</BloggerArchives>

4. Nah, ganti kode di atas dg kode html di bawah ini:

<select name="archivemenu"
onchange="document.location.href=this.options[this.selectedIndex].value;">

<option selected>- Archives -</option>

<BloggerArchives>

<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>

</BloggerArchives>

</select>

5. Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.

6. Selesai.

Untuk anda yang memakai template baru, langkahnya lebih mudah yaitu :

1. login dulu, tentunya dengan id anda

2. klik LAYOUT

3. Klik PAGE ELEMENTS, cari element (kotak) yang bertuliskan Blog Archive

4. Klik Edit pada kotak Blog Archive tadi

5. Di samping tulisan Style ada beberapa radio button, pilih radio button yang bertuliskan Dropdown Menu dengan cara memberi tanda tik/cek

6. Klik Save Changes

7. Selesai

Nah keterangan di atas tadi merupakan langkah-langkah untuk membuat menu Dropdown untuk Arsip, Sekarang bagai mana caranya membuat menu dropdown yang di dalam nya ada linknya, saya ambil contoh untuk menu Dropdown milik saya pribadi yang berada di sebelah kanan atas yang berisi tulisan “ blog tutorial “. Untuk membuatnya silahkan anda copy kode HTML di bawah :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION>

<option value="isi dengan addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Sebagai contoh untuk menu Dropdown milik saya :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Ichinx Warehouse -</option>

<option value="http://learn-website.blogspot.com/search/label/webmaster">Webmaster</option>

<option value="http://learn-website.blogspot.com/search/label/blogging">Blogging</option>

<option value="http://http://learn-website.blogspot.com/search/label/promosi-website">Promosi Website</option>

<option value="http://learn-website.blogspot.com/search/label/tips-n-trick">Tips N Trick</option>

<option value="http://learn-website.blogspot.com/search/label/free-download">Free Download</option>

</select></form>

Hasilnya akan seperti ini :
Selamat Mencoba...!!!

Text Area

2009-06-30T09:05:00.004+07:00

Text Area ialah suatu area yang fungsinya untuk menyimpan tulisan dengan membentuk area baru. Jika para sobat belum tau tentang Text Area, sebagai petunjuk, coba anda perhatikan kolom di bawah kanan layar, di bawah tulisan Tukar Link, ada area yang berisi kode-kode HTML, itulah yang disebut dengan Text Area. Kebanyakan para blogger menggunakan text area adalah untuk menyimpan HTML Code / tulisan lain agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Sebagai contoh :

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

Sebagai contoh :

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

<div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

<p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
<text style="WIDTH: 300px"> -->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode<HEAD> dan </HEAD> selamat mencoba.

Readmore pada template klasik

2009-06-30T08:53:00.002+07:00

Apa maksud judul diatas.?? “Readmore”..?? pasti para bloger pernah melihat di suatu blog dengan postingan artikel yang hanya menampilkan judul atau satu dan dua paragraf dari artikel tersebut, dan biasanya dibawah artikel tersebut ada suatu link yang bertuliskan Readmore >>, atau Selengkapnya >>, fungsinya adalah untuk melihat keseluruhan artikel tersebut.

Untuk para bloger yang memposting artikel satu atau dua artikel saja pasti tidak ingin menyingkat artikel. Tapi jika artikel anda sudah banyak, maka ada baiknya sobat membuat menu ini.

Karna sudah kebanyakan intermezo, mending langsung tancap gas saja, ok.
Untuk membuatnya kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan baca pada postingan selanjutnya.

Silahkan ikuti langkah-langkah berikut :
• Login ke blogger.com dengan id sobat

• Klik menu bertuliskan Template

• Klik menu Edit HTML

• jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.

• Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :

<MainOrArchivePage>

div.fullpost {display:none;}

</MainOrArchivePage>

<ItemPage>

div.fullpost {display:inline;}

</ItemPage>

Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
• langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody• langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :
amp;gt; :

<MainOrArchivePage><br/>
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
• Klik tombol yang bertuliskan SAVE SETTINGS

• Langkah selanjutnya adalah klik menu Setting

• Klik menu Formatting

• Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini :

<div class="fullpost">

</div>

Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.

• kemudian jangan lupa klik tombol Save Settings

• Selesai

Cara Posting Artikel

Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.
• Klik menu Posting

• klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :

<div class="fullpost">

</div>

simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">
, kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost">
dan sebelum kode </div>

Agar lebih jelas, saya beri contoh, misal artikelnya begini :

Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more.
</div>

Hasilnya yang akan tampak pada blog kita adalah seperti ini :

Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.

Read more!

Catatan :
Untuk kata Readmore, kita bisa menggantinya dengan kata yang kita mau. Contoh, kita bisa mengubah dengan kata Selengkapnya.., Baca selengkapnya.., Lanjutannya…

Tutorial ini khusus bagi para bloger yang masih menggunakan template klasik, untuk yang memakai template baru silahkan baca pada postingan selanjutnya.

Selamat mencoba…

Posting Artikel

2009-06-30T08:49:00.001+07:00

Kali ini IW akan mengulas sedikitnya tentang memposting artikel di blog. Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.

Toolbar yang ada ketika posting :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar(upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Langkah-langkah dalam memposting suatu artikel:

Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.

Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).

Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.

Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.

Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Setting Huruf dan Warna

2009-06-30T08:46:00.001+07:00

Untuk mengatur jenis huruf serta warna huruf, para bloger bisa mengaturnya dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai

2. Text Color --> pengaturan warna hurup dari posting-an

3. Link Color --> pengaturan warna hurup yang di link

4. Blog Title Color --> pengaturan warna hurup judul Blog

5. Blog Description Color --> pengaturan warna hurup deskripsi blog

6. Post Title Color --> pengaturan warna hurup judul posting-an

7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah

8. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)

9. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)

10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link

11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar

12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan

13. Blog Title Font --> pengaturan jenis hurup Judul blog

14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog

15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )

16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

Setting Blog

2009-06-30T08:33:00.002+07:00

Untuk para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :

1. Silahkan sobat Login ke bloger.com dengan user name dan password milik sobat
2. Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
3. Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :
• Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial
• Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog
• Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.
• Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya
• Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya
• Tampilkan Link Posting Email? ⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa
• Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)
• Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya
• Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya)

• Klik tombol Simpan Pengaturan . Selesai

4. Klik Publikasi untuk mengatur menu Publikasi :
• Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.

• Klik tombol Simpan pengaturan. Selesai

5. Klik Format untuk mengatur menu format :
• Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.
• Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita.
• Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai.
• Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai.
• Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.
• Bahasa ⇒ Pilih bahasa yang di inginkan.
• Tampilkan Field judul ⇒ Pilih ya
atau tidakpun tidak apa-apa
• Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.
• Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa
• Klik tombol Simpan Pengaturan. Selesai

6. Klik Komentar Untuk mengatur menu komentar :
• Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung
• Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
• Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar.
• Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.
• Default Link Balik untuk Posting ⇒ pilih Posting baru Memiliki Link Balik.
• Format Timestamp Komentar ⇒ pilih format jam yg singkat. Contoh: 8.00 PM.
• Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar.
• Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya).
• Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
• Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
• Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.

• Klik tombol Simpan Pengaturan. Selesai

7. Klik Arsipkan Untuk mengatur menu Arsipkan :
• Frekuensi Arsip ⇒ pilih Bulanan.
• Aktifkan Halaman Posting? ⇒ pilih ya.
• Klik tombol Simpan Pengaturan . Selesai.

8. Klik Fedd Situs untuk mengatur menu feed situs :
• Izinkan Feed Blog ⇒ pilih Penuh.
• Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.
• Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.

• Klik tombol Simpan Perubahan. Selesai.

Setting blog sudah selesai, tinggal pekerjaan lainnya deh..

Membuat Blog di Blogspot

2009-06-30T08:23:00.004+07:00

Pertama, IW (Ichinx Warehouse, gaya bener sih :-)..) akan menjelaskan apa yang disebut dengan blog…

1. What..??

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.

Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.

2. How..??

Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.

Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com, Silahkan anda klik gambar dibawah untuk mendaftar.

Setelah anda berada pada situs blogger.com, silahkan lakukan langkah-langkah berikut ini :
1. Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "

2. Isilah Alamat Email dengan alamat email anda (tentunya yang valid)

3. Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email

4. Tuliskan password yang anda inginkan pada form Masukkan sebuah password

5. Isikan kembali password anda tadi pada form Ketik ulang sandi (password)

6. Isi Nama Tampilan dengan nama yang ingin anda tampilkan

7. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda tik/cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.

8. Klik gambar anak panah yang bertuliskan "LANJUTKAN"

9. Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog

10. Tulis nama situs anda pada form Alamat Blog (URL)

11. Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".

12. Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"

13. Setelah keluar tulisan "Blog Anda telah di iptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".

3. Isi ( Content ) blog :

Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepada si pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda.

Pasang Kode Tuker Link

2009-06-29T18:40:00.003+07:00

Untuk membuat kode tukeran link, kebanyakan para blogger menggunakan banner yang berukuran kecil atau di sebut juga dengan chiklet sebagai ciri khas dari blog masing-masing. Maka dari itu, saya akan mencoba mengulas pembahasan ini bermula dari pembuatan chiklet nya.

Untuk membuat sebuah chiklet, sobat bisa menggunakan berbagai software grafik & design semacam photoshop, corel, atau lain sebagainya. Tak hanya sebatas chiklet yang berupa gambar diam, sebuah animasi pun bisa di jadikan chiklet tukeran link, tentunya ini terserah kepada keahlian masing-masing dalam hal membuat chiklet.

Akan tetapi, bagi sobat yang belum bisa atau hanya sekedar malas untuk membuatnya karena memerlukan waktu yang cukup lama untuk berkreasi, sobat bisa menggunakan layanan berbagai situs pembuat chiklet. Salah satu situs yang menyediakan layanan ini adalah www.chicklette.net. Melalui situs ini sobat hanya perlu menentukan warna serta tulisan yang di inginkan, kemudian apabila sudah selesai, sobat tinggal save picture lalu menyimpannya dalam komputer sobat.

Itu tadi merupakan langkah pertama. langkah kedua adalah meng upload file chiklet tadi ke hosting untuk menyimpan gambar, boleh di blogger atau di hosting lain, untuk cara upload gambar sudah sering di bahas, apabila masih bingung coba baca lagi di sini ! Jika proses upload selesai, sobat tinggal mencatat atau mengcopy alamat URL gambar tersebut. Misal saya ambil contoh untuk chiklet blog ini adalah :

http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.gif

langkah selanjuatnya adalah membuat kode link dari alamat gambar tadi, contoh kodenya seperti ini :

<a href="http://learn-website.blogspot.com" target="_blank"> <img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.gif" border="0" alt="IcHiNx Warehouse "></a>

Nah itu tadi merupakan contoh link untuk membuat link ke blog ini, untuk ngelink ke blog sobat ya tinggal sesuaikan saja.

Apabila kode link sudah ada, langkah selanjutnya adalah membuat text area untuk menampung seluruh kode agar nanti bisa di copy oleh pengunjung yang mau nge link ke blog sobat, kodenya seperti ini :

<textarea name="code" rows="6" cols="20">

<a href="http://learn-website.blogspot.com" target="_blank">
<img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.giff" border="0" alt="IcHiNx Warehouse "></a>

</textarea>

Beberapa langkah sudah di lewati, langkah selanjutnya adalah merangkaikan kode-kode tadi, misalkan kode tukeran link ingin di bawah gambar chicklet agar tampak lebih menarik, kodenya kira-kira seperti ini :

<h2>Tukeran link</h2>
<br/><br/>
Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali
<br/><br/>
<img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.gif" border="0" alt="IcHiNx Warehouse ">
<br/><br/>
<textarea name="code" rows="6" cols="20">
<a href="http://learn-website.blogspot.com" target="_blank">
<img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.gif" border="0" alt="IcHiNx Warehouse "></a>

</textarea>

Hasilnya nanti akan seperti ini :

Tukeran link

Copy kode di bawah masukan di blog anda, saya akan segera linkback kembali

IcHiNx Warehouse

Dari tulisan diatas, terlihat ada tulisan yang memanjang kekanan. Akan tetapi jangan kawatir karena tulisan tersebut akan turun secara otomatis mengikuti lebar dari sidebar. Untuk mengatur lebar serta tinggi dari text area, sobat tinggal mengganti nilai dari rows serta cols saja.

Ada juga blogger yang suka memasang tombol LINK TO ME pada blog nya, ini di maksudkan agar ketika pengunjung yang ingin membuat link ke blog sobat tinggal mengklik tombol tersebut. Akan tetapi ini bekerja bagi mereka (yang ingin membuat link ke blog sobat) yang memakai template baru saja, sedangkan untuk yang template klasik tidak bisa, jadi menurut saya kurang efektif. Contoh tombolnya seperti :

The button image will displayed on your site like this

IcHiNx Warehouse

Coba buktikan deh, klik saja pada tombol yang saya berikan.

Kode untuk membuatnya seperti ini :

<center>
<form action="http://beta.blogger.com/add-widget" method="POST">
<input value="FAVOURITE" name="widget.title" type="hidden"/><textarea style="display:none;" name="widget.content">
<a href="http://learn-website.blogspot.com" target="_blank" />
<img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.gif" border="0" alt="Kolom blog tutorial "></a>
</textarea><input value="http://buzz.blogger.com" name="infoUrl" type="hidden"/>
<input value="http://www.blogger.com/img/icon_logo32.gif" name="logoUrl" type="hidden"/>
<input value="LINK TO ME" name="go" type="submit"/></form><p>The button image will displayed on your site like this</p><br/>
<img src="http://i722.photobucket.com/albums/ww223/ichinx2/cooltext427168336.gif" border="0" alt="IcHiNx Warehouse "></a> </center>

Silahkan ganti alamatnya dengan yang di miliki sobat.

bagi sobat yang menggunakan template klasik, sobat tinggal menyimpan kode di atas pada sidebar yang sobat inginkan. Untu yang memakai template baru, sobat tinggal memilih tambah elemen, trus pilih HTML/Javascript, kemudian masukan kode yang seperti diatas, simpan dan selesai.

Semoga mudah untuk di mengerti.

Salam buat blogger sejati semua......

Buat Logo & Image Button

2009-06-29T18:32:00.003+07:00

Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

Silahkan buka alamat http://cooltext.com
Lalu klik tulisan Design a Logo
Klik gambar contoh logo yang sobat sukai
Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
Klik tombol yang bertuliskan Render Logo Design
Tunggu beberapa saat ketika proses pembuatan logo berlangsung
Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
Selesai. Sobat sudah mempunyai sebuah logo.

Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

Silahkan buka alamat http://www.photobucket.com,
Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
Silahkan Sign In dengan Id sobat
Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
Klin tombol yang bertuliskan Upload
Tunggu beberapa saat ketika proses upload berlangsung
Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat

Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg">

Maka contoh hasilnya akan seperti ini :

Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas,

Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :

Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :

Ok sobat, selamat menikmati hasil karyanya

Cara Daftar Search Engine

2009-06-29T15:15:00.003+07:00

Tak di sangkal bahwa tujuan utama dari membuat blog antara lain adalah agar tulisan-tulisan kita bisa di baca oleh orang lain atau pengunjung blog, semakin banyak yang berkunjung apalagi memberikan komentar pada apa yang kita posting tentunya akan membuat hati kita merasa senang dan bahagia. Akan tetapi tentunya tidak serta merta blog kita akan ramai di kunjungi, ini memerlukan usaha publikasi yang gencar dari pemilik blog apabila ingin banyak pengunjungnya.

Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.

Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.

Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di dunia adalah Google, Yahoo, serta Msn. Apabila blog kita ingin terindeks pada mesin pencari mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka. Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan berikut :

Daftar Google

Untuk mendaftar ke google, silahkan sobat kunjungi http://www.google.com/addurl/, nah apabila sudah berada pada halaman pendaftaran ada beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :

URL --> Isi dengan URL blog sobat.

Comments --> Isi dengan keyword atau kata kunci yang berhubungan dengan blog sobat

Isi kotak kosong dengan huruf Verifikasi yang tersedia

Klik tombol Add URL

Selesai.

Setelah sobat melakukan pendaftaran ke Google, maka tidak serta merta blog sobat terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog sobat bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog sobat pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog sobat, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas. Atau mungkin sobat tidak sabar ingin cepat terindeks, sebenarnya bisa saja ini terjadi, hanya dalam 3 atau 4 hari saja blog sobat sudah bisa terindeks di google. Ingin tahu caranya? simak saja postingan berikutnya ya, mungkin satu dua hari ke depan artikelnya selesai saya buat.

Daftar Yahoo!

Untuk mendaftar ke yahoo! silahkan sobat kunjungi https://siteexplorer.search.yahoo.com/submit. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo (email di yahoo) silahkan bikin dulu, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang uRL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut :

http://kolom-tutorial.blogspot.com/atom.xml

atau memakai www pun sama saja :

http://www.kolom-tutorial.blogspot.com/atom.xml

Daftar ke Msn

Untuk daftar ke Msn, silahkan sobat kunjungi http://search.msn.com/docs/submit.aspx?FORM=WSDD2 silahkan sobat isi huruf verifikasi dan URL sobat pada kotak yang tersedia, kemudian klik tombol Submit URL, selesai.

Apabila sobat mempunyai keinginan lebih, yaitu URL blog sobat terindeks pada puluhan mesin pencari, sobat bisa menggunakan bantuan situs submitter. Coba klik saja banner dibawah ini :

Tugas sobat hanya mengisi alamat URL blog miliknya, serta menuliskan alamat email saja, kemudian klik tombol Submit Your Site.

Jika ingin lebih cepat terkenal coba lakukan ping ke bebagai agregator, silahkan klik link di bawah :

Ping-O-Matic

Sobat tinggal mengisi form yang di sediakan.

Selamat mencoba!!!

Modif Image Header

2009-06-26T18:57:00.003+07:00

Technorati Profile
Hal yang paling menentukan seseorang datang ke blog tergantung dari konten yang diposting oleh sang pemilik blog, semakin informatif dan up-to-date isi blog, maka semakin banyak pula pengunjungnya (selain kecepatan dalam meng-upload halaman blog tersebut dan masih banyak lagi faktor yang lain).

Kebanyakan blog yang memiliki jumlah pengunjung melimpah tidak terlalu mengandalkan tampilan grafis dan animasi tetapi dua hal diataslah yang menjadi “umpan” mereka dalam memancing pengunjung.
Pada artikel ini kita tidak membahas topik apa yang bisa menarik pengunjung, tetapi bagaimana “mempercantik” tampilan blog dengan cara membuat image Header menggantikan Image Header Standar di Blogger.
Langkah 1 Membuat Image Header
Buat image dengan menggunakan program edit gambar seperti photoshop atau fireworks, dengan ukuran Width = 800 dan Height = 180 pixel (atau tergantung lebar blog) Resolusi gambar = 72 px/inch.
Setelah selesai mendapatkan hasil yang diinginkan, “save as for web” (pada prog. photoshop), dan agar tidak memakan waktu saat loading halaman blog pastikan besar file yang dihasilkan tidak melebihi 25 kb.
Langkah 2, Upload Image Header ke Blog
Masuk ke halaman dashboard blogger, pilih layout kemudian pada halaman layout pilih “Edit” pada box header.
Setelah jendela browser edit header muncul pada pilihan asal image pilih “image from your computer”.
Pada “placement” pilih “behind tittle and describtion” agar gambar berada dibelakang judul dan penjelasan blog atau “instead of tittle and describtion” untuk menganti judul dan penjelasan blog dengan gambar.
Setelah itu klik tombol save.
Image Header telah berhasil di upload untuk melihat hasil silahkan klik tombol “preview” atau “Pratinjau”.
Semoga bermanfaat, jika ada pertanyaan seputar artikel ini silahkan masukkan pada komentar dan akan dijawab semampu saya tentunya (kecuali saya juga gak tahu.he..he..).
Terima kasih atas Kunjungannya dan selamat mencoba.

Membuat Template Blogspot menjadi 3 Columns

2009-06-26T18:29:00.005+07:00

Memang agak sempit menaruh widget jika template yg anda gunakan hanya mempunyai 2 columns, itu juga pernah saya rasakan. Untungnya setelah saya tanya sana tanya sini, eh ketemu juga deh jawabannya..
Walaupun banyak free template yang menyediakan template dengan 3 columns, tapi ngga ada salahnya kan kalau kita mencoba dengan cara kita sendiri. lumyan kan buat nambah-nambah ilmu. Oc, ngga usah ngobrol panjang lebar lagi..

Masuk ke akun blogger Anda, pilih “Tata Letak” kemudian klik “Edit HTML” (pastikan bahasa yang anda pilih adalah bahasa Indonesia).

Untuk menghindari kesalahan saat proses hack code HTML, jangan lupa lakukan backup template (Download Template) ke hardisk PC Anda. Setelah selesai mem-backup template beri tanda centang pada “Expand Widget”.

Tahap pertama “MEMODIFIKASI UKURAN” :

Cari kode dibawah ini (tekan ctrl + F), lalu ubah ukurannya sesuai dengan yang telah direncanakan :

#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */

Tambahkan kode berikut tepat dibawah kode tersebut sesuai dengan ukuran yang telah direncanakan :

#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */

Cari kode HTML seperti dibawah ini, lalu ubah ukurannya sesuai dengan yang telah direncanakan tadi :

#outer-wrapper {
width : 800px;
margin: 0 auto;
padding: 10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width : 400px;
margin-left: 20px
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 200px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
over-flow: hidden; /* break-word; /* fix for long non-text content breaking sidebar float in IE */
}

Setelah itu lanjutkan proses peng-Edit-an kode HTML dengan mencari kode seperti ini:

body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer,
with: 800px;
padding: 0px;
}
body# layout #sidebar-wrapper {
width: 400px;
margin-left: 20px
}
body#layout #sidebar-wrapper,
body#layout#newsidebar-wrapper {
width: 200px
}

Tahap kedua “MENAMBAHKAN SIDEBAR BARU” :
Cari dan tambahkan lagi tepat diatas kode ini

<div id='newsidebar-wrapper'>
<b: section class='sidebar' id='newsidebar- preferred='yes'>
<b: widget id='NewProfile' locked='false' tittle='Tentang Saya' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='blog1' locked='true' tittle='Blog Posts' tipe='Blog'/>
</b:section>
</div>

Setelah langkah diatas selesai langkah diatas, simpan (SAVE) hasil proses pengeditan kode HTML tadi. Untuk melihat hasilnya tekan tombol “Pratinjau” atau mengatur Widget element template dengan mengatur kembali posisinya dengan mengklik “Tata Letak”.
Thanx 4 d visit my blog...

Memberi warna pada layout komentar

2009-06-26T18:16:00.003+07:00

Sebelum kita memberi warna pada komentar kita terlebih dahulu kita harus mengetahui warna-warna apa saja yang cocok di sematkan pada komentar, sebagai gambaran awal pada blog ini saya memilih 3 warna yang sesuai tema yaitu :
soft-orange (#FFFF99) : untuk warna dasar (background colour)
orange (# FFCC66): Warna text “nama user” dan
grayscale (# CCCCCC): comment footer
setelah menentukan warna komentar yang sesuai dengan blog, selanjutnya cari kode warna-warna tersebut, misalnya menggunakan foto editor (exp: photoshop), lalu jangan lupa catat kode tersebut.

Edit HTML
Login ke akun , pilih blog yang akan di edit, kemudian klik Layout → Edit HTML kemudian centang Expand Widget. Jangan lupa untuk membackup template sebelum melakukan perubahan.
Pada bagian “Comments” cari kode dibawah ini (tekan ctrl+F) :

#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

Setelah menemukan kode diatas ganti dengan kode dibawah ini, kode berwarna merah adalah kode warna yang telah dipilih sebelumnya :

#comments-block .comment-author {
background:#FFCC66; /* warna text Nama komentator */
margin:.5em 0;
padding:0 0 0 20px;
font-weight:bold;
}
#comments-block .comment-body {
background:#FFFF99; /* warna background komentar pengunjung */
margin:.25em 0 0;
}
#comments-block .comment-footer {
background:#CCCCCC; /* warna background footer komentar */
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

Setelah selesai jangan lupa tekan Save.
Selamat…!!! Komentar pada blog kita sudah berubah warna
Catatan : setelah hasil edit kita tersimpan maka semua komentar yang telah masuk akan berubah sesuai dengan warna yang telah dipilih sebelumnya.
Akhir kata semoga tulisan ini bermanfaat dan trims atas kunjungannya

Membuat Background Efek 3D di Sidebar Title

2009-06-26T17:51:00.000+07:00

Buat rekan-rekan pengguna Blogspot yang ingin membuat tampilan blognya lebih sedikit bergaya dengan efek 3d “emboss” (efek timbul) pada judul sidebar tanpa menggunakan image yang bisa memperlambat waktu loading page blog mudah-mudahan cara ini bisa menjadi solusi buat yang suka me-make over wajah ~~sendiri~~ blognya .

Berhubung cara ini sedikit mengubah CSS code template blog maka yang harus dilakukan adalah langsung tuju akun blogger anda, pilih tata letak, kemudian pilih Edit HTML dan sebelum melakukan perubahan apapun jangan pernah lupa untuk terlebih dahulu mem-backup template Anda coz segala resiko tutorial ini ditanggung sendiri .

Agar lebih mudah saya mengambil sample code CSS template minima white, silahkan cari CSS yang mengatur property sidebar content seperti kode dibawah ini:

.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;
text-transform:none;
text-align:justify;
}

Kemudian tambahkan kode berikut ini tepat dibawah kode diatas, sehingga menjadi seperti ini:

.sidebar h2{ font-size:14px;
margin:1px 0 4px;
font-weight:bold;  
text-transform:none;  
text-align:justify; 
background:$bordercolor;
padding: 2px;
border-top: 2px solid #FFCC99;
border-right: 2px solid #333300;
border-bottom: 2px solid #333300;
border-left: 2px solid #CC9933;
}

Keterangan kode tambahan diatas:

Kode warna biru adalah kode lama dan kode warna merah adalah penambahan
Padding: 2px = mengatur jarak atas, kanan, bawah dan kanan huruf sebesar 2 pixel.
border-top: 2px solid #FFCC99; = tebal dan kode warna (hexa) border atas
border-right: 2px solid #333300; = tebal dan kode warna (hexa) border kanan
border-bottom: 2px solid #333300; = tebal dan kode warna (hexa) border bawah
border-left: 2px solid #CC9933; = tebal dan kode warna (hexa) border kiri

Untuk melihat hasil sementara perubahan kode diatas silahkan tekan Pratinjau.
Jika sudah sesuai jangan lupa tekan tombol Simpan.
Btw Anda bisa bereksperimen dengan ukuran dan warna yang sebaiknya kontras dengan tampilan wajah blog anda.
Semoga tutorial ini bisa ~~basi~~ bermanfaat , jika ada pertanyaan seputar artikel ini manfaatkan saja form comment dibawah ini ya
Trims sudah mau ke blog ini dan semoga make overnya sukses

Membuat Kolom Disamping Header

2009-06-26T17:34:00.004+07:00

Dalam pembuatan kolom ini anda tidak bisa memasang image header yang lama jika mengubah struktur header standar blog kita buat, jangan khawatir coz cara memasangnya ada di artikel ini.
Pertama adalah memindahkan atau upload image header lama ke googlepages.com atau geocities.com
Kedua masuk ke akun blog anda dan pilih Layout, backup template.
Modifikasi CSS:
Cari kode dibawah ini:

/* Header
---------------------------------
*/

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header { 
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Fokus pada kode yang berwarna hijau diatas dan replace kode tersebut dengan kode dibawah ini.

#header-wrapper {
width:860px;
margin:0 auto 0px;
background:$bgheadercolor url(LokasiImageHeaderAnda.googlepages.com) no-repeat top center;
height:140px;
}
#head-inner {
width:500px;
background-position: left;
text-align: justify;
margin-left: auto;
margin-right: auto;
float:left;
border-right:2px dashed $bordercolor;
}
#header { 
margin: 0px;
border: 0px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}
#header-kanan{
width:300px;
text-align: justify;
float:left;
padding-top:10px;
}

Keterangan kode diatas:

Kode warna biru adalah lebar dan tinggi header disesuaikan dengan lebar template.
Tinggi pada header wrapper disesuaikan dengan tinggi image header anda.
Background URL di header-wrapper adalah hot linking alamat tempat peyimpanan gambar header, misalnya di googlepages.com atau geocities.com
#header kanan pada kode diatas adalah kode CSS untuk kolom tambahan disamping header.
Cara menentukan lebar kolom tambahan agar sesuai gunakan rumus ini:
header kanan = lebar header wrapper – lebar head-inner

Setelah mengubah CSS yang harus kita lakukan adalah menambah elemen header-kanan agar penambahan CSS tadi bisa digunakan, beri tanda centang pada Expand Widget kemudian cari kode dibawah ini (tekan ctrl+F untuk mempermudah pencarian):

Setelah dapat kode diatas pilih kemudian Replace dengan kode dibawah ini:

Untuk melihat hasilnya tekan Pratinjau
jika sudah sesuai dengan keinginan anda simpan hasil modif anda tadi dengan menekan tombol Save.
Selamat anda sekarang kolom tambahan telah ada di header blog anda anda bisa memasukkan banner, Link List di kolom baru tersebut.

Tambahan:
”Image” lama yang saya maksud diatas adalah image yang anda upload langsung di add element page
Jika kolom tambahan terlihat nyasar kebawah kemungkinan ukuran yang anda berikan tidak sesuai oleh karena itu seperti ~~jurus~~ cara saya selama ini yaitu trial-error dengan mengganti-ganti ukuran width, margin dan padding pada kode CSS hingga menemukan posisi yang diharapkan.
(untuk saran terakhir diatas harap maklum karena semua ini juga hasil trial error )
Selamat bermodifikasi dan semoga tulisan ini bermanfaat

Membuat Menu Navigasi

2009-06-25T19:33:00.002+07:00

Kita bisa membuatmenu navigasi dengan 2 cara, yang pertama yaitu dengan memanfaatkan kode html pada widget tanpa mengedit kode template. tetapi hasilnya akan sangat sederhana tanpa bisa merubah background warna dan border.
Kita akan menggunakan cara yang kedua yang bisa membuat menu navigasi menjadi lebih cool...

Pertama-tama tambahkan kode CSS ditemplate blog.
1.Login ke account blog anda
2.di control panel pilih tata letak, kemudian pilih edit html, sebelum mengubah kode template anda, sebaiknya backup dulu dengan mendownload template Anda.
3.Jangan lupa memberi tanda centang pada expand template widget.
4.Kemudian cari kode berikut (tekan ctrl+F untuk cepatnya):
</b:skin>
5.Setelah menemukan kode diatas copypaste-kan kode dibawah ini tepat diatas kode</b:skin>, atau letakkan diantara
tags <head> </head>.
.menubar{

width: 100%;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

font-weight: bold;

font-style: normal;

text-decoration: none;

}

.menubar ul{

margin: 0;

padding: 0;

float: left;

width: 100%;

background: #FF6C00

border-top-width: 1;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #808080

border-right-color: #808080;

border-bottom-color: #808080;

border-left-color: #808080

}

.menubar ul li{

display: inline;

}

.menubar ul li a{

float: left;

color: #FFFFFF;

padding: 5px 11px;

text-decoration: none;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #C0C0C0

}

.menubar ul li a:visited{

color: #FFFFFF;

}

.menubar ul li a:hover, .menunav ul li .selected{

color: #FFFFFF !important;

padding-top: 5px;

padding-bottom: 5px;

background: #454545;

}

Ganti kode berwarna biru dengan kode warna yang sesuai dengan warna pada template anda agar terkesan menyatu dengan header anda, dan ganti ukuran border (kode berwarna merah) sesuai keinginan anda. Jangan lupa untuk menyimpan hasil perubahan tersebut diatas

Tahap kedua, Menambah Widget Untuk Menu Navigasi.
1. masuk di Tata Letak kemudian pilih EDIT HTML jangan lupa expand widget dengan memberi tanda centang, dan

letakkan kode dibawah ini diantara tags <body> </body> .

2.Dan masukkan kode berikut tepat dibawah kode html header:

<div class="menubar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="URL-1">Link-1</a></li>

<li><a href="URL-2">Link-2</a></li>

<li><a href="URL-3">Link-3</a></li>

</ul>

</div>

URL-1 sampai URL-3 diperolehdari url berdasarkan URLlabel seperti contoh dibawah ini:

/search/label/NamaLabel

kode warna merah ganti dengan nama label/kategori/tags sesuai blog anda.

Jangan lupa di save perubahan tersebut, untuk melihat hasilnya klik pratinjau.

Selamat..!!!blog anda sekarang sudah punyamenu navigasi.

Semoga bermanfaat dan selamat berblogging ria.

NB: jika ada pertanyaan saran dan kritik mohon di berutahukan ke yang punya kerjaan ini biar makin bisa nulis yang bermanfaat .

Posting code html di artikel agar tidak dianggap perintah

2009-06-25T18:19:00.001+07:00

Catatan di kode HTML mengingatkan kita tentang fungsi dari kode tersebut atau petunjuk penggunaan dari sebuah kode. Saya yakin sudah banyak yang tahu ini tapi postingan ini mungkin berguna bagi blogger newbie yang belum tahu. Selain itu paling tidak catatan saya biar tidak lupa.

Ok, g harus panjang lebar lagi..
Langkahnya kita cuma harus meng-Convert text menjadi HTML entities (and vice-versa), kita bisa mengconvertnya di http://centricle.com/tools/html-entities
Kemudian kita copy code yang sudah di encode ke dalam postingan artikel kita.

Sebagai contoh kita ingin memasukan code html seperti :

<html>
<head>
<title><./title>
</head>
<body bgcolor=grey >
<h1></h1>
<hr>
<font color=black>
<p>
</body>
</html>

lalu kita convert codenya, maka akan keluar code-nya seperti :

<html>
<head>
<title><./title>
</head>
<body bgcolor=grey >
<h1></h1>
<hr>
<font color=black>
<p>
</body>
</html>

nah, code di atas lah yang akan kita posting ke dalam article,.

Selamat mencoba.!!!

Upload File Icon dan Ganti Icon Blog

2009-06-25T16:49:00.005+07:00

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar icon berhuruf B. Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu.

Ok, langkah pertama yaitu membuat gambar dengan extension .ico dengan ukuran 16x16 hingga 64x64.
Kita bisa membuatnya dengan softwere coreldraw, photoshop, dll.
Atau jika sudah mempunyai gambar yang sudah jadi, kita bisa generator gambar tersebut menjadi file .ico di http://www.favicon.co.uk

langkah selanjutnya adalah mengupload gambar tersebut ke dunia maya. Banyak tempat yang bisa kita kunjungi seperti geocities, googlepages, photobucket, imageshack, dll. Tapi untuk mengupload file .ico kamu bisa menguploadnya di www.xtgem.com.

Kemudian Catat url gambar kamu. Atau ingat-ingat. Atau kalau kamu malas, jangan tutup halaman Bank Image kamu supaya kamu bisa copas (Copy-Paste, maksudnya). Kalau kamu bingung yang mana yang mesti dicatat atau dijiplak, cari "Direct Link"-nya.

Buka blog kamu. cari Dashboard(Panel Kontrol)-> Layout(Tata Letak)-> Edit HTML. Cari perintah< title >< data:blog.pageTitle/ >< /title >. Letaknya di atas, kok. Jadi mudah mencarinya. jika masih belum ketemu, tekan ctrl+f, lalu masukan keywordnya. Jika sudah ketemu, persis di sebelah kata < /title > , ketik perintah :< href="'URL tempat favicon kamu disimpan'/ >. Pastikan spasinya dihapus, ya.
Kemudian Save/simpan templatenya.
Lalu Lihat blog kamu.......
Sudah berhasil apa belum...?

Jika belum berhasil, coba deh cek kembali.. kalau ngga tanyakan saja langsung pada ichinx warehouse..
:-)

Title Tag Optimization

2009-06-23T18:09:00.000+07:00

Title Tag Optimization adalah salah satu hal yang paling penting dalam proses optimasi search engine (SE). Kebanyakan SE dan direktori menjadikan Title Tag sebagai hal yang paling penting dalam merangking website. Hal ini juga penting sebagai judul dalam hasil pencarian search engine. Berikut ini cara mengoptimalkan title tag :

Semua halaman di websitemu harus memiliki title tag yang unik
Title tag harus ditempatkan langsung dibawah tag
Sertakan 1-2 keyword penting di title tag
Gunakan hanya keyword dan kalimat yang ada di isi halaman
Title tag harus berupa kalimat yang mudah dibaca
Jangan meletakkan 2 keyword yang sama dalam judul
Jangan meletakkan keyword yang sama secara berdampingan. Ini akan dianggap spam oleh SE
Mempertimbangkan penggunaan kedua-duanya bentuk tunggal dan bentuk jamak dari kata kunci yang penting di title tag
Judul hendaknya sepanjang 60-90 karakter termasuk spasi
Tempatkanlah keyword utama sebagai awal judul
Hindari menggunakan koma an gunakan karakter '|' untuk mengganti koma
Jangan terlalu sering mengubah judul

Tips Yahoo!

2009-06-23T18:07:00.000+07:00

Yahoo! Directory adalah situs standart. Banyak orang mempergunakan situs ini sebagai situs uji coba koneksi website mereka. Fast Loading dan komplit fasilitasnya. Yah ! mereka memang unggul di bidang per website-an. Yang paling hebat lagi, satu link dari Yahoo! memiliki rangking yang jauh lebih baik daripada 10 website selain Yahoo!

Mendaftar pada Yahoo! susah - susah gampang. Susah karena mereka ini manusia dan gampang karena kalo situs kita sesuai dengan selera mereka, maka mereka akan segera memasukkan situs kita dalam daftar mereka.

Sebuah situs tentang Leonardo de Caprio takkan mudah masuk ke situs mereka kecuali kamoe menyuguhkannya secara spektakuler. Tapi kalo kamoe bikin situs tentang cara efektif memelihara lele, maka dengan segera situsmu akan nongol di halaman mereka.

Sebelum mendaftarkannya, coba periksa situs kamoe, apakah udah cukup rapi, apakah perlu gambar itu disini, apakah link ini udah tepat, dan warna-warnanya, apakah tidak menyakitkan mata orang yang melihatnya. dan yang paling penting jangan sampai ada Broken Link atau Link dengan tulisan "Dalam Tahap Pengembangan".

Bila kamoe udah cukup yakin, maka kunjungi Yahoo! dan cari Kategori yang tepat untuk situsmu. Ingat! Yahoo! paling benci orang yang mendaftar pada Kategori yang tak sesuai dengan isinya. Anda bisa berharap situsmu mejeng di database mereka seratus tahun lagi.. he..he..heee

Dan jangan lupa, untuk memberikan catatan kecil tentang apa dan untuk apa websitemu ada. Cantumkan juga kenapa website mu begitu perlu untuk ditampung di database mereka. dan ingat catatan kecil itu sebaiknya berbahasa Inggris. Biar mereka segera paham dan langsung meletakkannya pada database mereka.

Dan yang terakhir..banyaklah berdoa dan ulangi lagi 2 minggu lagi. Tapi pastikan situsmu belum tercantum dalam daftar mereka.

Sebelumnya..saya ucapin SELAMAT buat kamoe yang telah berhasil meletakkan situsnya di Yahoo !!

Text Hyperlink Optimization

2009-06-23T18:05:00.000+07:00

Mengoptimalkan Hyperlink dapat meningkatkan rangking di search engine. Jika kamu melakukan link ke suatu halaman, SE akan memberi perhatian spesial pada kata yang kamu gunakan di dalam link tersebut. SE biasanya mencari kata kunci di link dan mempertimbangkan text pengait dari link yang datang untuk merangking halaman. Ini adalah salah satu aspek penting dalam SEO.

Tips untuk Optimasi Text Link

Gunakan text deskriptif pada semua text link. Contohnya, jika keywordmu Webmaster Resource, maka gunakan "webmaster resource" sebagai ganti home.
Anda harus menggunakan kalimat kunci di dalam link itu sendiri dan mungkin juga disekitar link
Gunakan kata/kalimat kunci yang menggambarkan target halaman
Gunakan maksimum 40-50 karakter di dalam text link
Buatlah text link dan gunakan menu navigasi umum untuk semua halaman.
Cobalah menggunakan kalimat kunci sebagai nama file html atau gambar. Misalnya kalimat kuncinya "website resource", maka gunakan sebagai nama file menjadi "website-resource.html" atau "website-resource.gif"
Hindari menggunakan link javascript karena tak terbaca oleh SE
Pastikan halaman di websitemu terhubung satu sama lain, terutama home.
Jangan mengulang link di seluruh halaman
Website flash harus memiliki text link di bawah halaman sebagai tambahan navigasi flash

Promosi Web Ruang Publik

2009-06-23T18:03:00.001+07:00

Apa itu Ruang Publik?

Ruang Publik disini adalah website-website yang menyediakan ruang terbuka untuk dapat diisi oleh publik. Ruang Publik ada beberapa macam yaitu : Forum Diskusi, Buku Tamu, Shout Box, Mailing List (Milis) dan Open Directory. Dengan memanfaatkan ruang publik-ruang publik tersebut, kita akan dapat melakukan promosi secara gratis dan berpotensi mengantarkan pengunjung website tersebut ke website anda.

Masing-masing Ruang Publik memiliki ciri khas tersendiri dan keunggulan serta kekurangan masing-masing. Namun, ruang publik-ruang publik tersebut sangatlah bermanfaat untuk meningkatkan jumlah trafik anda. Ada beberapa hal yang perlu diingat dalam pemanfaatan ruang publik agar potensi kunjungan ke website anda semakin besar. Saya akan membaginya menurut bentuk ruang publik masing-masing :

Forum Diskusi

Pengunjung forum ini adalah suatu komunitas tertentu. Anda harus pandai-pandai mencari komunitas yang sesuai dengan website anda. Akan sangat konyol nantinya jika anda mempromosikan website tentang masakan di forum diskusi yang membicarakan musik. Maka pandai-pandailah memilih ruang publik. Adapun hal-hal yang bisa dilakukan di ruang publik ini adalah sebagai berikut :

Isilah profil secara lengkap terutama nama website dan URL website.
Siapkan signature yang menarik. Signature ini akan muncul di setiap pesan yang kamu kirimkan.
Berusahalah menyelesaikan permasalahan yang ada di forum dengan solusi-solusi cerdas. Hal ini sangat penting untuk meningkatkan reputasimu di forum tersebut.
Hindari OOT alias Out Of Topic. Pastikan setiap postingan anda bermutu sehingga penghuni forum akan mengenal anda sebagai profesional.
Postingkan sedikit hal tentang website anda di forum tersebut. Usahakan tak bernada promosi.

Mailing List (Milis)

Mailing List adalah bentuk komunikasi melalui e-mail yang akan disebarkan ke semua anggota milis. Untuk melakukan promsi melalui milis ini, ada beberapa hal yang perlu anda perhatikan :

Pilihlah milis yang memiliki anggota cukup banyak (minimal 100 orang)
Bila anda menemukan milis yang tanpa moderator, segeralah bergabung.
Pastikan milis tersebut se-visi dengan website anda.
Buatlah signature emailmu semenarik mungkin. Ingat! Jangan gunakan gambar, karena tak semua web mail mendukung HTML, cukup gunakan text saja.
Kirimlah update terbaru websitemu di milis. Anda bisa mengirimkan resumenya saja dan memberikan link untuk membaca artikel secara lengkap.
Hindari OOT
Pilihlah subject surat yang menarik dan mampu menggambarkan isi email dengan baik.

Shout Box dan Buku Tamu

Pesan di Shout Box ini sebenarnya sangat jarang dilihat, maka anda bisa langsung beriklan disini. Namun, akan lebih baik jika kata-kata yang dipilih cenderung informatif daripada promotif. Berikut ini contoh kata-kata yang informatif dan promotif :

PROMOTIF	INFORMATIF
Kunjungilah websiteku di http://belajar-website.com	Saya dari http://belajar- website.com kebetulan berkunjung ke website anda.
http://belajar-website.com - Website dengan segala informasi menarik. Ayoo Kunjungi.	Website anda bagus, saya ada informasi menarik yang sesuai dengan website anda di http://belajar-website.com
Saya baru saja membuat website nih, silahkan berkunjung ke http://belajar-website.com	Saya lihat website anda cukup profesional, mohon masukan untuk website baru saya di http://belajar-website.com
Butuh informasi soal website? langsung saja klik http://belajar-website.com	Saya memiliki banyak informasi soal cara membangun website yang efektif dan ingin membaginya bersama anda di http://belajar-website.com

Perhatikan, pada kata-kata yang informatif, kita memperlakukan pemilik website sebagai rekan atau sahabat kita dan seolah-olah anda ingin memberinya sesuatu yang berharga. Namun di kalimat promotif, pemilik web cenderung kita perlakukan sebagai konsumen atau "target iklan". Maka silahkan buat kata-kata anda sendiri sehingga mampu membuat pembaca merasa dirinya mendapat informasi yang berharga.

TIPS : Sebelum beriklan di shout box atau buku tamu, ada baiknya anda mencari kelemahan website tersebut. Lalu tawarkan sebuah solusi yang ada di website anda. Hal ini akan menjadi sebuah informasi yang sangat berharga bagi pemilik web dan sudah pasti dia akan berkunjung ke website anda.

Meraih Rangking Teratas

2009-06-23T18:01:00.000+07:00

Meraih posisi teratas dalam hasil pencarian search engine adalah idaman setiap webmaster. Apalagi kalo hasil yang didapat menggunakan keyword yang memiliki daya saing paling tinggi dengan hasil pencarian yang mencapai ribuan halaman website. Nah, di webmaster tutorial kita akan belajar meningkatkan posisi kita bahkan meningkatkan page rank kita di search engine.

Apa itu Page Rank?

Page Rank adalah rangking yang diberikan Google terhadap suatu halaman yang terindex ke database mereka. Rangking ini berdasarkan pada banyak faktor diantaranya sebagai berikut :

Faktor Internal Halaman yaitu apakah sebuah keyword yang dipilih terdapat pada :

Tag header
Tag title
Kata-kata yang ditebali, miring atau garis bawah
Atribut ALT pada gambar
Awal dan akhir halaman

Faktor Eksternal Halaman yaitu hal-hal terkait dengan link dari website lain yang menuju ke halaman anda

Website mana yang me-link ke halaman anda
Jumlah website yang me-link
Google Page Rank dari halaman yang me-link
Judul halaman website yang me-link
Text yang digunakan untuk me- link
Jumlah dan type link yang digunakan untuk me-link
IP Address dari website yang me- link

Untuk faktor internal, anda bisa dengan mudah mengotak-atiknya sesuai dengan aturan diatas. Anda juga bisa membacanya di halaman Search Engine Optimization yang khusus membahas cara meningkatkan rating search engine melalui faktor internal. Dan disini, kita akan membahas tentang bagaimana mendapatkan posisi teratas melalui faktor eksternal. Karena faktor eksternallah yang justru paling efektif meningkatkan posisi kita di search engine.

Meningkatkan Page Rank

2009-06-23T17:59:00.000+07:00

Cara paling mudah untuk meningkatkan page rank adalah dengan meniru kesuksesan dari peraih tingkat pertama dan membuatnya kembali dengan lebih baik. Bagimana caranya? Silahkan menyimak :

Tentukan target!

Gunakan Google dan mari kita mulai mencari target operasi. Oh iya, terlebih dahulu anda membutuhkan browser yang memiliki Google Toolbar. Hal ini penting karena di dalam Google Toolbar anda akan dapat mengetahui page rank dari website tersebut. Anda bisa mendownloadnya di http://toolbar.google.com.

Selanjutnya silahkan buka Google. Lalu masukkan kata kunci yang akan kita perjuangkan. Misalnya kita telah memilih kata "webmaster tutorial". Nah, anda lihat website apa yang meraih peringkat teratas. Anggap saja peringkat teratas saat ini adalah http://www.webmaster-tutorial.net. Nah, sekarang kita telah menentukan target operasi kita yaitu website webmaster-tutorial.net. Saya ndak tahu apakah www.webmaster-tutorial.net benar-benar ada atau ndak, karena ini cuma karangan. Kalo kebetulan sama, maaf aja deh.. hehehe... Selanjutnya webmaster-tutorial.net kita jadikan target operasi kita.

Selanjutnya anda bisa langsung melakukan penawaran pertukaran link ke webmaster webmaster-tutorial.net, sehingga anda akan lebih mudah nantinya. Namun, cara ini belum tentu berhasil. Tapi jangan khawatir, kita punya banyak rencana cadangan.

Temukan Kelemahannya

Masih ingat pelajaran tentang SEO untuk faktor internal? Ya, cobalah menganalisa halaman webmaster-tutorial.net dengan melihat source codenya. Apakah mereka menggunakan kata webmaster dan tutorial pada bagian-bagian berikut:

Tag Header
Tag Title
Kata-kata yang ditebali, miring atau digaris bawahi
Atribut ALT pada gambar
Bagian awal dan akhir halaman

Bila semua telah digunakan, maka anda perlu waspada dan bekerja keras untuk membuatnya sesuai dengan milik webmaster-tutorial.net. Namun, jika ternyata ada "lubang"-nya maka itulah keunggulan anda. Pastikan anda menggunakannya dan tentu saja yang sudah ada jangan dihilangkan.

Temukan Link Pendukung

webmaster-tutorial.net mampu meraih posisi teratas tentu bukan kebetulan, mereka pasti mendapat banyak link dari website lain. Sekarang kita perlu mengetahui website-website yang melakukan link ke webmaster-tutorial.net. Caranya ketikkan kode berikut di Google : link:webmaster- tutorial.net. Dalam sekejap website-website yang memasang link ke webmaster-tutorial.net akan muncul. Kita lihat berapa website yang melakukan link ke webmaster-tutorial.net.

Sekarang anda perlu mengunjungi website tersebut satu per satu. dan lihatlah toolbar google anda. Jika mereka memiliki page rank lebih dari 4 maka itulah target utama kita dan usahakan menemukan link contact webmaster atau pemiliknya. Cobalah untuk melakukan pertukaran link dengan mereka. Namun terlebih dahulu anda harus menempatkan link website mereka di website anda sehingga mereka akan dengan senang hati pula untuk menempatkan link website anda.

Daftarkan ke Direktori

Biasanya direktori memiliki page rank yang cukup tinggi, berusahalah untuk mendaftarkan website kesana. Tapi ingat, biasanya direktori paling tak suka dengan website redirect, jadi kamu harus memberikan url asli websitemu. Usahakan pula websitemu telah selesai alias tak ada broken link. Karena ini akan menjadi pertimbangan besar untuk menolak websitemu. Banyak sekali direktori di Internet namun, cobalah untuk memilih dan memprioritaskan pada direktori yang memiliki page rank tinggi. Bila masih ada waktu, barulah ke direktori yang kecil page ranknya.

Ada beberapa direktori yang memiliki page rank cukup tinggi yaitu Yahoo! dan DMOZ. Bila anda telah terdaftar di direktori Yahoo, maka itu adalah prestasi tersendiri dan akan menentukan sekali posisi anda di search engine.

Mulai sekarang fokuslah terus pada website-website yang se-visi dengan websitemu dan mencobalah terus untuk dapat melakukan pertukaran link dengan pemilik website-website tersebut. Semakin banyak kamu mendapatkan link yang mengarah ke websitemu, maka semakin tinggi pula peringkatmu di search engine

Link Building and Link Popularity

2009-06-23T17:57:00.001+07:00

Link Populary adalah jumlah website yang melakukan link ke websitemu. Link yang datang tak hanya meningkatkan jumlah pengunjung namun juga meningkatkan rangking websitemu di SE. Link building juga memiliki tempat yang sangat penting dalam proses mengoptimalkan Search Engine. Link Building Tips

Semakin banyak link berkualitas dari situs yang relevan, maka semakin baik rankingmu dan semakin banyak trafik didapat. Maka, cobalah membangun link dengan website bagus yang relevan
Link berkualitas dari situs dengan rangking tinggi akan memberi lebih banyak daripada link banyak dari situs dengan rangking rendah. Maka anda harus mencoba melakukan hubungan dengan webmaster web berkualitas daripada dengan 100 website yang tak berkualitas.
Link dari situs ke situs haruslah berupa text, bukan gambar. Gunakan salah satu keyword utama anda. Itu akan meningkatkan rangking SE anda untuk kata tersebut.
Buatlah program pertukaran link di website anda. Itu akan meningkatkan link
Pastikan halaman link anda terlink dan terlihat di halaman utama.
Jika anda memberikan link ke partner pertukaran, pastikan untuk memberikan format sebagai berikut :
```
<a href="http://www.DomainAnda.com">Kalimat Keyword</a> 
```
Hubungi pemilik website lain yang berhubungan untuk mendiskusikan pertukaran link
Cobalah untuk membuat deskripsi link secara singkat
Jangan melakukan pertukaran link dengan situs yang tak berhubungan dengan websitemu.
Cek pagerank setiap website yang anda link. Anda harus melink website yang bagus saja dan memiliki rangking bagus dan telah online lebih dari 6 bulan.
Submit ke direktori yang bagus yang memiliki pagerank bagus (harus lebih dari 4) dan telah online lebih dari 1 tahun.
Cari Google dengan menggunakan keyword utamamu. Cek 10 website teratas di hasil pencarian untuk melihat apakah ada kesempatan untuk melakukan pertukaran link dengan website ini.

Keyword Research Tips

2009-06-23T17:55:00.002+07:00

Keyword Research berarti menemukan keyword yang tepat untuk websitemu dan akan membawa pengunjung yang banyak ke website melalui search engine. Memilih keyword yang paling sesuai untuk sebuah website sangatlah penting. Keyword terpilih akan digunakan selama proses optimalisasi untuk meningkatkan rangking website. Berikut ini tips dan trik Keyword Research:

Gunakan Keyword Selector Tool atau Good Keyword (gratis) untuk menemukan keyword yang tepat. Ketikkan saja keyword anda dan dia akan menunjukkan pencarian yang telah dilakukan selama sebulan terkait dengan keyword tersebut
Lihat jumlah hasil di google untuk keywordmu dan pilih keyword yang sering digunakan untuk mencari dan sedikit hasilnya.
Pilih keyword yang populer namun sedikit pesaing
Gunakan kalimat keyword yang spesifik dibanding keyword tunggal. Sebagai contoh, akan lebih baik menggunakan "permen coklat" daripada "permen"
Pilihlah keyword yang relevan dan unik untuk setiap halaman web.
Hindari penggunakan kata sambung seperti di, dan, adalah, apa, a, ca, are, be, dll. karena kata tersebut akan diabaikan oleh kebanyakan SE
Pertimbangkan untuk menggunakan bentuk jamak dan tunggal untuk keyword
Cobalah menggunakan domain yang mengandung keyword utama. Sebagai contoh, jika keyword utamamu "kursus komputer online", maka gunakanlah kursuskomputeronline.com atau kursusonline.com atau domain lain yang berisi keyword utamamu
Gunakan keyword salah eja dimana itu akan membawa lebih banyak kunjungan. Gunakan Misspelled Keyword Generator untuk mencari keyword salah eja yang berhubungan dengan keywordmu.
Pilih keyword yang bisa disatukan dengan judul dan body halamanmu

Mencari WebSpace GRATIS

2009-06-23T17:52:00.001+07:00

Mencari hosting gratis memang gampang-gampang susah, apalagi yang tanpa iklan. Biasanya hosting yang tanpa iklan memiliki fasilitas yang agak rumit buat para pemula. Namun, karena sekarang udah ada ichinxwarehouse, semua masalah bisa diminimalisir.

Oke, kita akan mencoba mendaftar ke awardspace dengan alamat http://www.awardspace.com. Kenapa awardspace yang kita pilih? Pertama karena hosting ini GRATIS dan yang kedua TANPA IKLAN serta yang paling asyik adalah mereka mengijinkan pemakaian script PHP dan memiliki database MySQL yang akan kami ajarin juga di website ini.

Awardspace juga memberikan kesempatan buat kita untuk memakai doman sendiri seperti website ini yang memiliki domain gudanginfo.web.id. Anda juga bisa menggunakan subdomain milik awardspace dengan alamat nama_anda.awardspace.com.

Awardspace juga memiliki fitur yang lumayan rumit, sehingga sangat perlu untuk dipelajari... hehehe.. Kalo dalam ilmu pendidikan, pelajarilah yang rumit maka engkau akan mampu mengerjakan yang mudah. Tul nggak??

Jika kamu merasa kurang puas dengan layanan dari awardspace, kamu juga bisa mencari hoting gratis lain yang tanpa iklan melalui Google dengan mengetikkan kata kunci "free hosting with no ads". Biasanya secara umum, proses pendaftaran sebuah web hosting amatlah sederhana. Kamu hanya diminta mengisi formulir pendaftaran dan selanjutnya melakukan verifikasi email. Dan dalam sekejab kamu telah memiliki lahan untuk menanam file-file HTML.

Header Tag Optimization

2009-06-23T17:49:00.000+07:00

Header Tag Optimization adalah bagian yang penting dalam SEO. Header tag digunakan oleh SE untuk mengenali isi website. Algoritma SE menggunakan formula rangking yang memberi titik berat pada keyword yang digunakan di header text. Ini didefinisikan dengan tag

hingga

.

didefinisikan dengan heading terbesar.

didefinisikan dengan heading terkecil.

menjadi pertimbangan yang paling penting dan

memiliki kepentingan yang lebih kecil didalam SEO.
Tips untuk mengoptimalisasi Header Tag untuk SE :

Gunakan 2-4 header tags
,

,

,

di setiap halaman website

Tag ini harus mengandung keyword yang spesifik bersama dengan text dekriptif yang relevan dengan isi halaman
Cobalah untuk menyertakan kalimat kunci yang paling penting di header tags jika bisa
Letakkan kata kunci utama di tag

menjadi pertimbangan utama dan

yang paling kecil. Maka tempatkan keyword sesuai tempatnya. Tag

untuk keyword paling utama,

yang lebih rendah dan

lebih rendah lagi. Begitu seterusnya.

Tempatkan keyword dimana ia terkandung di dalam text di bawah header saja.

harus ditempatkan sedekat mungkin dengan tag di halamanmu.

Body Text Optimization

2009-06-23T17:44:00.003+07:00

Body text sangat penting dalam mengoptimalkan pencarian. Body text ditampilkan oleh SE di hasil pencarian mereka. Ini digunakan SE untuk menentukan inti sebuah web dan merangkingnya. Ini meliputi semua isi dokumen termasuk text, gambar, warna, grafik, tabel,dll.

Body text adalah text di halaman web yang berada diantara tag dan

Tips untuk mengoptimalkan Tag Body

Tempatkan semua keyword di body text
Cobalah menempatkan keyword utama di awal body
Keyword anda haruslah 3-6% dari seluruh text. Ini berarti 3-6 keyword per 100 kata.
Jangan menggunakan text yang memiliki warna yang sama dengan background. Ini dianggap sebagai "text tak terlihat" oleh SE dan situs kamu akan di black list karena ini.
Jangan menggunakan frame untuk halaman anda. SE membenci frame. Jika kamu terpaksa menggunakannya, maka gunakan tag .
Tempatkanlah keyword yang digunakan di judul ke dalam body text
Jangan meletakkan keyword yang sama berdekatan, hala ini akan dianggap sebagai spam oleh SE
Jangan menggunakan text yang sangat kecil atau link di halamanmu
Cobalah menyertakan keyword dalam bentuk tebal atau miring
Sertakan fungsi javascript dan CSS di file yang berbeda
Update isi body yang penting secara teratur. Ikutilah langkah-langkah di atas untuk mengoptimalkan body textmu.
Buatlah halaman layoutmu tetap sederhana.

Pengenalan Kode HTML

2009-06-23T16:40:00.002+07:00

Dalam program Notepad anda, tulislah seperti ini:

<HTML>

</HTML>

Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya. Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML.

Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya. Tambahkanlah tag seperti berikut:

<HTML>
<BODY>
</BODY>
</HTML>

Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:

<HTML>
<BODY>
Belajar HTML itu mudah.
</BODY>
</HTML>

Sekarang simpanlah file ini dengan meng-klik menu File lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu klik anak panah kecil di ujung kanan kotak Save as type kemudian pilih All Files (*.*). Setelah itu, isilah kotak File name dengan nama file yang anda inginkan misalnya: latih1.htm. Jangan lupa penambahan ekstensi .htm di belakang nama file!

Akhirnya, klik tombol Save maka file akan tersimpan sebagai dokumen web. Kini, tutuplah program Notepad anda. Sekarang bukalah lagi program browser (Internet Explorer) selain jendela browser yang anda baca ini. Klik menu File lalu Open. Pada kotak dialog yang muncul, klik tombol Browse. Cari dan pilih file latih1.htm lalu klik Open. Nah, lihatlah hasil karya anda yang pertama!

Belajar HTML itu mudah.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.

Sekarang lihatlah kembali browser anda yang sedang menampilkan file latih1.htm tadi. Klik menu View lalu Source. Dengan instruksi ini akan muncullah program Notepad yang di dalamnya tampak source code atau kode-kode HTML yang tadi anda buat. Misalnya kita akan menjadikan halaman web latih1.htm ini menjadi berwarna latar belakang kuning dengan tulisan berwarna merah. Untuk itu, kita perlu menambahkan atribut BGCOLOR dan TEXT ke dalam tag body sebagai berikut:

<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Belajar HTML itu mudah.
</BODY>
</HTML>

Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya, pergilah lagi ke program browser yang menampilkan halaman web latih1 tadi. Klik menu View lalu Refresh atau klik tombol Refresh pada toolbar atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file latih1 yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:

Belajar HTML itu mudah

Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa #rrggbb. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf O).

black	#000000	blue	#0000FF	olive	#808000	lime	#00FF00
white	#FFFFFF	fuchsia	#FF00FF	green	#008000	maroon	#800000
red	#FF0000	gray	#808080	teal	#008080	purple	#800080
yellow	#FFFF00	silver	#C0C0C0	navy	#000080	aqua	#00FFFF

Untuk warna putih sengaja saya kasih warna abu -abu, soalnya kalo dikasih warna putih, kodenya ndak keliatan kan? Tapi kodenya tetap #FFFFFFkok. Dengan demikian, kode HTML untuk contoh di atas bisa ditulis sebagai berikut:

<HTML>
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">
Belajar HTML itu mudah.
</BODY>
</HTML>

Dengan menggunakan kode warna heksa, variasi warna yang dibuat bisa lebih banyak. Klik di sini untuk melihat daftar kode warna yang lainnya!

Demikianlah sekilas fungsi tag BODY. Sekarang bukalah kembali source code alias kode-kode HTML. Masih ingat, kan caranya? (Klik menu View lalu Source). Tambahkanlah tag-tag berikut ini:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Belajar HTML itu mudah.
</BODY>
</HTML>

Di sini terlihat bahwa kita menambah tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:

<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Belajar HTML itu mudah.
</BODY>
</HTML>

Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: Karya Pertamaku. Alhamdulillah, selesailah latihan pertama kita.

Bekerja dengan Paragraph

2009-06-23T16:31:00.002+07:00

Sekarang kita akan mempelajari bagaimana cara membuat baris dan paragraf. Biasanya, untuk membuat baris baru, kita lakukan dengan menekan tombol Enter. Bagaimana dengan dokumen HTML? Cobalah membuat tulisan berikut pada Notepad:

<HTML>
<BODY>
Baris pertama
Baris kedua
Baris ketiga
</BODY>

</HTML>

Simpanlah sebagai file HTML kemudian bukalah dalam browser. Bagaimana hasilnya? Ternyata hasilnya hanya seperti ini:

Baris pertama Baris kedua Baris ketiga.

Kesimpulannya, penekanan tombol Enter tidak menghasilkan baris dalam tampilan browser. Demikianlah sifat penulisan dokumen HTML. Lantas, bagaimana caranya membuat baris? Gunakanlah tag <BR>. Tag ini tidak mempunyai tag penutup. Bukalah source kode file HTML tadi lalu edit seperti berikut:

<HTML>

<BODY>
Baris pertama<br>
Baris kedua<br>
Baris ketiga
</BODY>
</HTML>

Simpan kemudian lihat hasilnya dengan me-refresh pada browser. Hasilnya kurang lebih akan seperti ini:

Baris pertama
Baris kedua
Baris ketiga

Membuat baris kalimat, gampang kan ? Tag <BR> tersebut dapat pula digunakan untuk membuat baris kosong, artinya baris yang tidak mempunyai kalimat apa-apa. Editlah sekali lagi source code latih4.htm menjadi seperti ini:

<HTML>

<BODY>
Baris pertama<br><br>
Baris kedua<br><br>
Baris ketiga
</BODY>

</HTML>

Simpan lalu refresh sekali lagi maka hasilnya akan seperti ini:

Baris pertama

Baris kedua

Baris keempat

Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan menghasilkan dua baris, demikian seterusnya. Setelah pandai membuat baris, sekarang kita akan belajar membuat paragraf. Perhatikanlah contoh tulisan di bawah ini:

<HTML>
<BODY>
Paragraf pertama <P>
Paragraf kedua <P>

Paragraf ketiga
</BODY>
</HTML>

Bila dilihat dalam browser, hasilnya akan seperti ini:

Paragraf pertama

Paragraf kedua

Paragraf ketiga

Dengan berpatokan pada contoh penggunaan tag <P> di atas, cobalah buat file HTML dengan menggunakan Notepad sehingga menghasilkan dokumen HTML yang akan tampak di browser seperti ini:

World Wide Web (WWW) merupakan sebuah sistem dimana informasi (teks, gambar, suara, dan lain-lain) dipresentasikan dalam bentuk hypertext dan dapat diakses oleh sebuah peraga WWW (yang sering disebut sebagai browser).

Informasi di WWW pada umumnya ditulis dalam bentuk HTML (Hypertext Markup Language). Selain itu, informasi lain dapat berupa gambar (dalam format GIF, JPG, PNG), suara (dalam format AU, WAV), dan objek multimedia lainnya (seperti MIDI, Shockwave, Quicktime Movie, 3D World).

Bila anda masih mengingat pelajaran-pelajaran terdahulu, maka tanpa kesulitan yang berarti anda akan bisa membuat source code untuk menghasilkan tulisan-tulisan di atas. Kode sumbernya kira-kira sebagai berikut:

<HTML><BODY>
<B>World Wide Web</B> (WWW) merupakan sebuah
sistem dimana informasi (teks, gambar, suara,
dan lain-lain) dipresentasikan dalam bentuk
<I>hypertext</I> dan dapat diakses oleh sebuah
peraga WWW (yang sering disebut sebagai

<U>browser</U>).

<P>Informasi di WWW pada umumnya ditulis dalam
bentuk HTML (Hypertext Markup Language).
Selain itu, informasi lain dapat berupa: gambar
(dalam format GIF, JPG, PNG), suara (dalam
format AU, WAV), dan objek multimedia lainnya
(seperti MIDI, Shockwave, Quicktime Movie, 3D World).
</BODY></HTML>

Simpanlah file di atas kemudian buka dalam browser.

Tampil Apa Adanya

Bagaimana kalo ternyata kamu butuh tampilan yang membutuhkan banyak spasi dan tak bisa diwakili oleh perintah2 HTML diatas? Misalnya kamu pengen bikin tampilan seperti ini :

             ^              
            | |            
          @#####@            
        (###   ###)-.        
      .(###     ###) \       
     /  (###   ###)   )   
    (=-  .@#####@|_--"     
    /\    \_|l|_/ (\   
   (=-\     |l|    /      
    \  \.___|l|___/       
    /\      |_|   /      
   (=-\._________/\       
    \             /      
      \._________/       
        #  ----  #        
        #   __   #         
        \########/

    MOVE AND I SHOT!!!

Maka gunakanlah tag <PRE>, sehingga untuk menampilkan hasil seperti diatas, kode sumbernya sebagai berikut :

<HTML>
<BODY>
<PRE>

           ^            
          | |          
        @#####@          
      (###   ###)-.      
    .(###     ###) \     
   /  (###   ###)   ) 
  (=-  .@#####@|_--"   
  /\    \_|l|_/ (\ 
 (=-\     |l|    /    
  \  \.___|l|___/     
  /\      |_|   /    
 (=-\._________/\     
  \             /    
    \._________/     
      #  ----  #      
      #   __   #       
      \########/

  MOVE AND I SHOT!!!

</PRE>
</BODY>

Selamat mencoba !!

Mengutak-atik Huruf

2009-06-23T16:17:00.003+07:00

Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program Notepad kemudian tuliskan seperti berikut ini:

<HTML>
<HEAD>
<TITLE>Tipe-tipe

Teks</TILE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan
dalam

penulisan dokumen apa saja. Ketiga tipe tersebut
ialah tulisan tebal, tulisan miring dan tulisan bergaris
bawah. Bisa

pula dua tipe huruf dipadukan misalnya
tulisan tebal dan miring, tulisan tebal dan bergaris bawah
atau tulisan miring

dan bergaris bawah. Bahkan bisa pula
ketiga tipe tulisan tersebut sekaligus bergabung menjadi
satu berupa tulisan

tebal, miring dan bergaris bawah.
</BODY>
</HTML>

Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan file HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file tersimpan, bukalah file tersebut dengan program Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata dan kalimat yang ada di situ sehingga menjadi seperti ini:

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.

Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5), kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah :

<B> untuk menebalkan (bold) tulisan,
<I> untuk memiringkan (italic) tulisan dan
<U> untuk menggaris-bawahi (underline) tulisan

Sehingga hasilnya akan seperti ini :

<HTML>
<HEAD>
<TITLE>Tipe-tipe

Teks</TITLE>
</HEAD>
<BODY>
Ada tiga macam tipe tulisan yang paling sering
digunakan dalam

penulisan dokumen apa saja. Ketiga
tipe tersebut ialah tulisan <B>tebal</B>,
tulisan

<I>miring</I> dan tulisan <U>bergaris bawah</U>.
Bisa pula dua tipe huruf dipadukan misalnya

tulisan <B>
<I>tebal dan miring</B></I>, tulisan <B><U>tebal dan
bergaris

bawah</B></U> atau tulisan <I><U>miring dan
bergaris bawah</I></U>. Bahkan bisa pula

ketiga tipe
tulisan tersebut sekaligus bergabung menjadi satu berupa
tulisan <B><I><U>tebal, miring

dan bergaris bawah</B></I></U>.
</BODY>
</HTML>

Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source code itu kemudian lakukan Refresh pada dokumen web yang tampak pada program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka <HTML> hingga </HTML> jangan sampai ada yang salah tulis meskipun satu karakter. Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak akan menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah menulis source code yang salah seperti itu, simpan (save) kemudian refresh dokumen anda dan lihatlah hasilnya!

Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua ini, ada baiknya anda mencoba membuat dokumen HTML berikut ini. Buatlah dokumen dengan judul (titel): Pemantapan Tipe-tipe Teks, yang isinya adalah tulisan seperti berikut:

Karena file-file HTML sebenarnya adalah file-file ASCII biasa, maka anda dapat menggunakan editor-editor teks sederhana seperti WordStar (WS), Notepad, MS Write, dan lain-lain. Editor-editor teks tersebut dapat membimbing anda mempelajari kode-kode HTML secara luar dalam. Akan tetapi mungkin anda sedikit frustrasi karena harus mengetik semua kode HTML baris per baris yang dalam perkembangannya akan menjadi sangat rumit. Meski demikian, menggunakan teks editor untuk membuat halaman web adalah cara terbaik untuk benar-benar mengerti tentang struktur file HTML

Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program browser. Sudah samakah?

Variasi Font

Tanpa campur tangan kita, dokumen HTML menggunakan font default dari Windows (Sistem Operasi Komputer) atau browser (Internet Explorer), biasanya Times New Roman dengan ukuran 12 point. Kita bisa mengubah jenis, warna dan ukuran font sesuai dengan selera kita menggunakan tag <FONT> diikut dengan atribut-atributnya. Misalnya untuk mengubah jenis font kita gunakan atribut FACE:

<HTML><BODY>

Ini adalah font <FONT FACE="Arial">Arial</FONT>, ini adalah font <FONT FACE="Verdana">Verdana</FONT>, dan ini adalah font <FONT FACE="Impact">Impact</FONT>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Ini adalah font Arial, ini adalah font Verdana, dan ini adalah font Impact

Untuk mengubah ukuran font, gunakan atribut SIZE:

Bila dilihat dalam browser, akan tampak seperti ini:

Font Size 1, Font Size 2, Font Size 3, Font Size 4, Font Size 5, Font Size 6, Font Size 7

Sedangkan untuk mengubah warna tulisan, menggunakan atribut COLOR:

<HTML><BODY>

<FONT COLOR="blue">Tulisan warna biru</FONT>, <FONT COLOR="red">Tulisan warna merah</FONT>, <FONT COLOR="yellow">Tulisan warna kuning</FONT>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Tulisan warna biru, Tulisan warna merah, Tulisan warna kuning

Dalam satu tag FONT kita bisa menggabungkan lebih dari satu atribut. Perhatikan contoh berikut:

<HTML><BODY>

<FONT FACE="Arial" SIZE="2">Font Arial ukuran 2</FONT>, <FONT FACE="Verdana" COLOR="red">Font Verdana warna merah</FONT>, <FONT FACE="Impact SIZE="5" COLOR="blue">Font Impact ukuran 5 warna biru</FONT>

</BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Font Arial ukuran 2, Font Verdana warna merah, Font Impact ukuran 5 warna biru

Untuk mengubah font default untuk satu halaman HTML, digunakan tag <BASEFONT> yang ditempatkan diantara tag <HEAD> dan </HEAD>. Contoh:

<HTML>

<HEAD>

<BASEFONT FACE="arial" SIZE="10" COLOR="blue">

</HEAD>

<BODY>

Font default untuk semua tulisan pada halaman ini adalah font arial dengan ukuran 10 dan warna biru.

</BODY></HTML>

Cobalah buat dalam sebuah file HTML kemudian lihat hasilnya dalam browser!

SUBSCRIPT DAN SUPERSCRIPT

Subscript adalah tulisan yang agak kecil dan letaknya agak di bawah sedangkan superscript adalah tulisan yang agak kecil dan letaknya agak di atas. Untuk menulis subscript kita gunakan tag <SUB> sedang untuk menulis superscript kita gunakan tag <SUP>. Inilah contohnya:

<HTML><BODY>

Tulisan Normal<SUB>Tulisan Subscript</SUB>

<P>Tulisan Normal<SUP>Tulisan Superscript</SUP>

</BODY></HTML>

Beginilah hasilnya dalam browser:

Tulisan Normal_{Tulisan Subscript}

Tulisan Normal^{Tulisan Superscript}

Bagusnya, anda berlatih sedikit. Coba buat tulisan berikut:

Rumus kimia Asam Sulfat adalah H₂SO₄

Luas kolam 150 m²sedang volume kolam 300 m³

Gampang, kan?

Menyisipkan Gambar

2009-06-23T15:50:00.004+07:00

Sekarang kita akan belajar menyisipkan gambar ke dalam website kita. Sekarang sebagai contoh, kita akan membuat website yang hasilnya kira-kira seperti ini :

Nah, tahu kan kira-kira seperti apa scriptnya? Baiklah, sebelum saya kasih source codenya, kita akan kasih tahu dulu cara memasukkan gambar pada website. Berikut ini adalah kode untuk memasukkan gambar :

<img src="file_gambar" />

Gampang kan? Nah, misalnya dari contoh diatas, file gambar yang digunakan bernama gambar.gif, maka codenya adalah sebagai berikut ;

<img src="gambar.gif" />

Ingat, file gambar harus diletakkan di folder yang sama dengan file htmlnya. Jadi misalkan file htmlnya berada di D:\website\ maka file gambar juga harus diletakkan di folder tersebut.

Atribut Gambar

Gambar yang kita sisipkan, bisa kita atur tampilannya. Berikut ini atribut yang bisa kita terapkan untuk gambar kita :

border - untuk memberi bingkai pada gambar
width - mengatur lebar gambar
height - mengatur tinggi gambar
alt - memberi text alternatif bila gambar tak berhasil dimunculkan pada website (biasanya karena pengunjung menghilangkan fungsi menampilkan gambar)
title - memberi text penunjuk keterangan gambar. Saat pengunjung mengarahkan kursor pada gambar, maka akan muncul tulisan yang menerangkan gambar tersebut.

Berikut ini contoh penggunaan atribut gambar :

Coba arahkan kursor ke gambar diatas akan muncul. Untuk alt, sengaja tak ditampilkan disini karena hasilnya akan sama aja di layar.

Membuat background gambar

Seperti contoh diatas, kita akan menempatkan gambar sebagai background website kita. Maka kita perlu menyisipkan kodenya di tag <BODY> sehingga hasilnya sebagai berikut :

<HTML>

<BODY

BACKGROUND="background.gif">

Test gambar

background

</BODY></HTML>

Sekarang coba buatlah sebuah website yang tampilannya seperti contoh pertama kali diatas.

Membuat text berjalan

2009-06-23T15:44:00.002+07:00

Kamoe punya sesuatu yang pengen ditampilin secara berjalan ?? Nah, ini dia caranya. Tag yang digunakan ialah :

<MARQUEE>text yang ditampilkan</MARQUEE>

Sementara, atribut yang bisa digunakan :

BGCOLOR="warna" => menentukan warna background
DIRECTION="left|right|up|down" => menentukan arah gerakan text
BEHAVIOR="scroll|slide|alternate" => mengatur perilaku gerakan text (scroll = berputar, slide = bergerak sekali lalu berhenti, alternate = text bergerak ke kiri dan kanan)
TITLE="pesan" => Pesan yang akan muncul saat mouse berada diatasnya
SCROLLAMOUNT="angka" => mengatur kecepatan gerak dalam pixel, makin besar angka semakin cepat gerakannya.
SCROLLDELAY="angka|-1|infinite" => mengatur jumlah perulangan gerakan
WIDTH="lebar" => mengatur lebar blok text dalam pixel atau persen
HEIGHT="angka" => mengatur tinggi blok text dalam pixel

Sebagai contoh lihat script berikut :

<MARQUEE WIDTH="70%" HEIGHT="30" BGCOLOR="red" DIRECTION="left"
LOOP="-1" BEHAVIOR="scroll" SCROLLAMOUNT="2">
Text yang akan ditampilkan
</MARQUEE>

Nah, silahkan dicoba-coba sendiri segala atribut yang ada, semakin banyak berlatih kamu akan semakin pintar dan semakin mahir !!

Anda juga bisa merubah text dengan gambar. Masih ingat kan pelajaran cara menampilkan gambar? Selamat Mencoba !!

Membuat garis pembatas

2009-06-23T15:39:00.001+07:00

Ada saatnya kita perlu membagi halaman web site kita dengan sebuah garis, ada banyak cara and yang paling sederhana dengan menyisipkan tag &ltHR>, cukup dengan tag itu sebuah garis akan muncul seperti ini :

Tag ini punya atribut sbb :

WIDTH="angka" => untuk menentukan lebar garis dalam satuan pixel / persen
ALIGN="left|right|center" => menentukan perataan garis
SIZE="angka" => menentukan ukuran ketebalan garis.
NOSHADE => menghilangkan bayangan

Dengan menggunakan baris ini, artikel di website akan terlihat lebih rapi dan terkesan tak terlalu panjang.

Membuat formulir

2009-06-23T15:35:00.000+07:00

Formulir dalam HTML sangat diperlukan untuk memasukkan data ke dalam database. Tapi yang jadi masalah, HTML nggak bisa menangani database. Untuk menangani database kamoe bisa menggunakan script ASP, PHP ataupun CGI tapi gue saranin 'tuk menggunakan PHP karena paling mudah and nggak rumit-rumit amat.

Trus, knapa pembuatan formulir ini diajarin di kelas HTML ?? Sebab, yang bisa bikin Formulir cuman HTML doang. Kalo PHP nggak bisa. PHP hanya bisa menampilkan tag-tag HTML aja... jadi tag form ini murni milik HTML..hehehe...

Sebelum bikin formulir kita musti ngasih tahu dulu ke browser kalo bakal ada formulir di website kita, gunain aja tag berikut :

<FORM ACTION="file_tujuan" METHOD="post|get">
...
</FORM>

file_tujuan adalah alamat file tempat memproses file. Bila kamoe anggota Geocities (http://www.geocities.com) maka kamoe dapat mengisi ACTION dengan "/cgi-bin/homestead/mail.pl?member_name" ini adalah alamat tempat memproses form dari website anda, dan hasilnya akan dikirim ke email anda di yahoo!. Ganti member_name dengan nama member pada geocities atau Yahoo! anda. dan inget ! pilih post sebagai METHOD - nya.

Selanjutnya tinggal memasukkan perangkat masukkan dari pengunjung website kita yang akan dijelaskan di pelajaran-pelajaran yang ada di bawah ini .. Selamat Belajar Terus!!

Membuat Daftar

2009-06-23T15:28:00.002+07:00

Ada dua macam daftar item yaitu daftar item tak berurut (bullet) dan daftar item berurut (numbering).

Contoh daftar item tak berurut (bullet):

item pertama
item kedua
item ketiga

Contoh daftar item berurut (numbering):

item pertama
item kedua
item ketiga

Untuk membuat daftar item tak berurut kita gunakan tag <UL> sedang untuk membuat daftar item berurut digunakan tag <OL>. Adapun setiap item ditandai dengan tag <LI>.

Beginilah kode sumber untuk daftar item tak berurut di atas:

<ul>
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
</ul>

Dan beginilah kode sumber untuk daftar item berurut di atas:

<ol>
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
</ol>

Kita pun dapat membuat daftar item bertingkat atau daftar item di dalam daftar item. Contohnya sebagai berikut:

item pertama
item kedua
- sub item pertama
- sub item kedua
  - sub sub item pertama
  - sub sub item kedua
  - sub sub item ketiga
- sub item ketiga
item ketiga

Untuk membuat daftar item bertingkat seperti di atas tidak ada penambahan tag atau atribut apa-apa. Yang dilakukan hanyalah menempatkan tag-tag daftar item tingkat bawah di dalam daftar item tingkat di atasnya. Untuk jelasnya beginilah source kodenya:

<ul>
<li>item pertama</li>

<li>item kedua</li>
<ul>
<li>sub item pertama</li>
<li>sub item kedua</li>
<ul>
<li>sub sub item pertama</li>
<li>sub sub item kedua</li>
<li>sub sub item ketiga</li>
</ul>
<li>sub item ketiga</li>
</ul>
<li>item ketiga</li>
</ul>

Penulisan kode-kode HTML di atas sengaja kita beri spasi agak ke dalam, agar lebih mudah dibaca dan dimengerti mana yang level pertama, kedua dan seterusnya. Sebenarnya, tanpa pemberian spasi, hasilnya dalam browser tetap akan menggunakan spasi agak ke dalam untuk level-level di bawahnya.

Cara yang sama dilakukan untuk membuat daftar item berurut bertingkat. Kita tinggal mengganti tag <UL> dengan tag <OL> maka hasilnya akan seperti ini:

item pertama
item kedua
1. sub item pertama
2. sub item kedua
  1. sub sub item pertama
  2. sub sub item kedua
  3. sub sub item ketiga
3. sub item ketiga
item ketiga

Dari contoh daftar item tak berurut yang bertingkat di atas, kita lihat bahwa secara default, browser akan menampilkan gambar (bullet) bulatan hitam untuk item-item level pertama, lingkaran untuk untuk item-item level kedua, dan kotak hitam untuk item-item level ketiga. Sebenarnya kita pun bisa memilih sendiri bullet jenis apa yang kita ingin gunakan dengan menambah atribut TYPE dalam tag <UL>. Rumusnya: <UL TYPE="jenis bullet">. Dimana nama bullet ada tiga macam: "disc" untuk bulatan hitam, "circle" untuk lingkaran, dan "square" untuk kotam hitam. Jadi bila kita ingin membuat daftar item semacam ini:

item pertama
item kedua
item ketiga

Maka kita menuliskan kode-kode HTML sebagai berikut:

<ul type="square">
<li>item pertama</li>
<li>item kedua</li>
<li>item ketiga</li>
</ul>

Untuk daftar item berurut (numbering), jenis angkanya pun dapat diganti dengan menggunakan atribut yang sama. Jadi rumusnya: <OL TYPE="jenis angka">. Sedangkan jenis angkanya diisi dengan angka 1, A, a, I, atau i tergantung selera kita. Contoh:

<ol type="I">
<li>item pertama</li>
<li>item kedua</li>
<ol type="A">
<li>sub item pertama</li>
<li>sub item kedua</li>
<ol type="1">
<li>sub sub item pertama</li>
<li>sub sub item kedua</li>
<li>sub sub item ketiga</li>
</ol>
<li>sub item ketiga</li>
</ol>
<li>item ketiga</li>
</ol>

Akan menghasilkan daftar item sebagai berikut:

item pertama
item kedua
1. sub item pertama
2. sub item kedua
  1. sub sub item pertama
  2. sub sub item kedua
  3. sub sub item ketiga
3. sub item ketiga
item ketiga

Sekian pelajaran tentang bullet dan numbering.

Link atau Kaitan

2009-06-23T14:36:00.002+07:00

Sekarang kita akan belajar membuat link yang merupakan ciri khas dari dokumen web. Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke bagian lain dari dokumen web. Sebuah link biasanya ditandai dengan teks warna biru bergaris bawah atau pointer mouse yang berubah menjadi telunjuk tangan. Untuk membuat sebuah teks atau gambar menjadi sebuah link, kita lakukan dengan mengapitnya dengan tag pembuka <A HREF> dan tag penutup </A>. Jadi rumusnya kira-kira sebagai berikut:

<A HREF="lokasi_tujuan">link</A>.

Contoh link yang menuju ke situs lain: hidayatullah online.

Inilah kode sumbernya:

<A HREF="http://www.hidayatullah.com">hidayatullah online</A>

Berdasarkan lokasi tujuannya, link dapat dibedakan atas:

Link yang menuju ke homepage (halaman pertama) dari sebuah situs
Link yang menuju ke halaman yang lain dalam situs yang sama
Link yang menuju ke halaman yang lain dalam situs yang lain
Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang sama.
Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang berbeda
Link yang mengarah ke sebuah file yang dapat ditampilkan dalam browser, misalnya file image (gambar) atau animasi seperti GIF, JPG, BMP dan sebagainya.
Link yang mengarah ke sebuah file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain. Bila link semacam ini diklik, akan muncul kotak dialog yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Proses pengambilan dan penyimpanan file semacam inilah yang dinamakan download.
Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan.

Untuk setiap jenis link di atas, yang penting untuk diketahui adalah cara penulisan alamat atau lokasi (URL) dari situs atau file yang dituju oleh link itu. Lokasi ini ditulis diantara tanda kutip sesudah atribut href=. Ketentuannya sebagai berikut:

Link yang menuju ke homepage (halaman pertama) dari situs lain, cukup dituliskan alamat URL dari website tersebut, misalnya: href="http://www.situs.com".
Link yang menuju ke halaman lain dalam situs lain, maka harus kita tuliskan alamat URL dan lokasi filenya.
Misalnya: href="http://www.situs.com/sini/situ.htm".
Link yang menuju ke halaman lain dalam situs yang sama, maka cukup dituliskan lokasi filenya, tanpa menuliskan alamat URL situs itu. Dalam hal ini ada beberapa kemungkinan:
a) Bila file tersebut berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama filenya, misalnya: href="freeware1.htm".
b) Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama foldernya. Misalnya: href="javascript/js001.htm".
c) Sedangkan bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti berikut: href="/rainbow.gif".
d) Bila file tersebut letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href="/rainbow.gif" dan seterusnya.
Untuk membuat link yang menuju ke bagian tertentu dari sebuah halaman web, sebelumnya kita harus memberi nama pada tempat/lokasi yang akan dituju itu dengan mencantumkan tag <a name="bagian"></a> pada baris yang akan dituju itu. Setelah itu barulah kita bisa membuat link yang menuju ke bagian tersebut. Dalam hal ini ada dua kemungkinan.
a) Bila tempat yang dituju itu terdapat dalam halaman yang sama dengan link tersebut maka cukup dituliskan nama lokasi yang dituju itu. Misalnya: href=#bagian.
b) Bila tempat yang dituju itu terletak pada halaman yang lain maka harus dituliskan nama file dari halaman itu baru nama tempatnya. Misalnya: href="lain.htm#bagian".
Link yang mengarah ke sebuah file yang bukan file HTML misalnya file program, audio, image, dan lain-lain cara penulisannya sama saja caranya dengan file HTML seperti pada point 1, 2 dan 3 di atas.
Link yang berisi alamat email dituliskan seperti berikut: href="mailto:adifitrah@maktoob.com".

Telah kita ketahui bahwa bila sebuah link diklik maka browser akan menampilkan halaman yang dituju oleh link tersebut. Cara browser memunculkan halaman tujuan ini ada dua macam.

Ditampilkan pada jendela yang sama. Artinya, halaman tempat link itu akan digantikan oleh halaman yang dituju oleh link tersebut. Ini merupakan cara pemunculan default.
Ditampilkan pada jendela yang lain. Artinya, akan muncul jendela baru yang menampilkan halaman yang dituju. Untuk membuat link semacam ini, kita harus menambahkan atribut TARGET="_blank" dalam tag <A HREF>. Contoh: <a href="webpage.htm" target="_blank">.

Sekian pelajaran tentang link. Agar anda lebih mengerti cara pembuatan macam-macam link tersebut, selanjutnya anda dapat berlatih membuat beberapa halaman web dengan sejumlah link di dalamnya.

Keterangan Situs (META)

2009-06-23T14:28:00.001+07:00

Kita dapat menempatkan keterangan-keterangan umum soal situs kita di antara tag <HEAD> dan </HEAD>. Keterangan-keterangan tersebut di deklarasikan dengan menggunakan tag <META>. Tag-tag keterangan pada meta ini nantinya bakalan di baca oleh Search Engine bila kita mendaftarkan situs kita pada Database mereka.

Oke, sekarang kita lihat informasi apa aja yang bisa kita masukkan :

&ltHTML>
&ltHEAD>
&ltMETA NAME="Author" Value="Lutvi Avandi">
&ltMETA NAME="KeyWords" Value="belajar,komputer,gratis">
&ltMETA NAME="Description" Value="Belajar Komputer Gratis !
Cara baru pintar komputer tanpa biaya">
&ltTITLE>Belajar Komputer GRATIS</TITLE>
</HEAD>
&ltBODY>
</BODY>
</HTML>

Pertama kita jelasin siapa pembuat situs ini (Author). Pada script diatas adalah Lutvi Avandi.

Lalu KeyWords yaitu kata kunci. Jadi kalo ada seseorang yang menggunakan Search Engine lalu mengetikkan kata-kata yang kita masukkan diatas, maka link ke situs kita bakalan ditampilkan di Search Engine tersebut.

Discription adalah info singkat seputar web site kita.

Perlu diingat, bahwa tak semua Search Engine membaca META Tag kita. Terkadang mereka mengambil paragraph pertama website kita, karena itu usahakan awal-awal paragraph yang kita buat menceritakan website kita.

TITLE digunakan untuk menamai halaman web site dan nanti text Title ini bakalan ditempatkan di pojok kiri atas browser.

Namun perlu diingat, bahwa informasi pada Meta Tag ini, bukanlah segala-galanya. Karena Search Engine saat ini tak hanya memperhatikan informasi dari Meta Tag. Kebanyaknya search engine justru mengambil informasi dari tag TITLE, H1..H4, Kata-kata yang di bold dan juga link-link yang ada.

Meskipun begitu, hendaknya kita tetap perlu untuk memuat Meta tag ini, karena website-website directory, atau beberapa search engine yang masih menggunakan metode lama akan membutuhkannya.

Karakter Khusus

2009-06-23T14:22:00.003+07:00

Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab. Nah, bagaimana caranya membuat lebih dari satu spasi dalam dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan seperti yang bisa kita lihat pada contoh berikut ini:

HTML><BODY>

kata-kata ini diantarai satu spasi sedangkan<br>kata-kata     ini     diantarai     lima     spasi

</HTML></BODY>

Bila dilihat dalam browser hasilnya akan seperti ini:

Kata-kata ini diantarai satu spasi sedangkan

kata-kata ini diantarai lima spasi

Disamping notasi untuk pembuatan spasi ( ) ada lagi sejumlah notasi khusus untuk penulisan karakter-karakter tertentu. Karakter-karakter ini harus dituliskan dengan notasi khusus mengingat karakter-karakter ini dipakai juga sebagai kode-kode tag atau karena memang tidak dijumpai dalam karakter teks ASCII. Berikut beberapa diantaranya:

Karakter	Keterangan	Notasi
<	kurung runcing buka	<
>	kurung runcing tutup	>
&	dan	&
"	tanda petik ganda	"
+	tanda plus minus	±
©	hak cipta atau copyright	©
®	terdaftar atau registered	®

Misalnya kita akan membuat tulisan seperti ini:

Tip & Trik ini disajikan untuk para "pemula". Banyaknya ± 75 artikel. Dan setiap artikel terdaftar® dalam direktorat hak cipta©.

Beginilah cara penulisannya dengan bahasa HTML:

<HTML><BODY>

Tip & Trik ini disajikan untuk para "pemula". Banyaknya ± 75 artikel. Dan setiap artikel terdaftar® dalam direktorat hak cipta©. <br><harap maklum>.

</HTML></BODY>

Indentasi

2009-06-23T14:10:00.003+07:00

Disamping mengatur perataan, kita pun bisa mengatur posisi baris-baris paragraf dari margin (tepi halaman). Ada tiga macam bentuk indentasi paragraf. Pertama, baris pertamanya saja yang agak masuk ke dalam. Untuk membuat paragraf semacam ini kita menggunakan tag <DD>. Contoh:

<HTML>
<BODY>
<DD>Paragraf atau alinea ialah sekumpulan kalimat

yang
mengandung satu pokok pikiran. Antara satu paragraf dengan paragraf
lainnya biasanya dipisahkan oleh baris kosong.

Namun biasa pula
paragraf itu ditandai dengan posisi baris pertamanya yang agak
masuk ke

dalam.</DD>

</BODY>
</HTML>

Beginilah hasilnya bila dibuka dalam browser:

Paragraf atau alinea ialah sekumpulan kalimat yang mengandung satu pokok pikiran. Antara satu paragraf dengan paragraf lainnya biasanya dipisahkan oleh baris kosong. Namun biasa pula paragraf itu ditandai dengan posisi baris pertamanya yang agak masuk ke dalam.

Kedua, membuat paragraf yang semua barisnya agak masuk ke dalam. Untuk membuat paragraf semacam ini kita menggunakan tag <BLOCKQUOTE> yang mengapit paragraf-paragraf yang hendak kita jadikan masuk ke dalam.

<HTML><BODY>

Ini adalah paragraf normal
<BLOCKQUOTE>
<P>Ini paragraf

yang agak masuk ke dalam.

<P align="justify">Ini juga contoh paragraf
yang agak masuk ke dalam.

Dengan kalimat yang agak panjang,
kita lihat bahwa <b>semua baris</b> dalam paragraf
ini letaknya agak

masuk ke dalam. <i>Sama rata sama jauhnya</i>.

</BLOCKQUOTE>

<P>Nah, paragraf ini

kembali normal, karena tag <i>blockquote</i>
sudah berlalu alias sudah ditutup di atas. Ngerti, kan?

</BODY></HTML>
Beginilah tampilannya dalam browser:

Ini adalah paragraf normal
Ini paragraf yang agak masuk ke dalam.

Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa semua baris dalam paragraf ini letaknya agak masuk ke dalam. Sama rata sama jauhnya.

Nah, paragraf ini kembali normal, karena tag blockquote sudah berlalu alias sudah ditutup di atas. Ngerti, kan?

Ketiga, membuat paragraf dalam susunan daftar definisi (definition list). Daftar definisi ialah susunan paragraf yang berselang-seling antara paragraf normal yang merupakan kalimat yang hendak dijelaskan dengan paragraf yang agak masuk ke dalam yang merupakan penjelasan atau definisi dari kalimat di atasnya. Untuk lebih jelasnya, berikut ini contoh daftar definisi:

Daftar Istilah Penting:

Internet
Singkatan dari interconnection network atau hubungan antar jaringan. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia.
HTTP
Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP.
Karena cuma demo, cukup dua definisi sajalah. Nah, paragraf ini kembali normal.

Untuk membuat daftar definisi semacam di atas digunakan tiga macam tag yaitu :

<DL> yang menandai dimulai atau diakhirinya daftar definisi,
<DT> yang menandai paragraf normal (yang dijelaskan) dan
<DD> yang menandai paragraf yang agak masuk ke dalam (yang menjelaskan paragraf di atasnya).
Untuk contoh di atas beginilah kode sumbernya:

<DL>

<DT><B>Internet</b></DT>
<DD>Singkatan dari

<i>interconnection network</i>
atau hubungan antar jaringan. Internet ialah jaringan komputer

global dan merupakan jaringan komputer yang terbesar di dunia
karena mampu menghubungkan seluruh komputer yang ada

di dunia.</DD>
<DT><b>HTTP</B></DT>

<DD>Singkatan dari <i>Hypertext

Transfer Protocol</i>
adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi
antar server

komputer dalam internet. Protokol bahasa yang lain
dalam internet misalnya: Telnet, News, Gropher,

FTP.</DD>
</DL>
Karena cuma demo, cukup dua definisi sajalah. Nah, paragraf
ini kembali

normal.

Sekarang, cobalah berlatih membuat daftar definisi sendiri! Selamat Mencoba!!

Cara Membuat Tabel

2009-06-22T18:24:00.006+07:00

Pelajaran berikut ini sangat penting, terutama jika kamu ingin membuat suatu website yang menarik dengan berbagai fasilitas. Kebanyakan website dibuat dengan berbentuk tabel-tabel. Bahkan menggabungkan antara satu tabel dengan tabel yang lain. Tabel memungkinkan kita membuat kolom2. Misalnya kita akan membuat suatu website dengan tampilan seperti ini :

Nah, untuk membuat tampilan website seperti diatas, kita gunakan tag <TABLE> beserta tag2 lain untuk membentuk baris dan kolom. Berikut tag2 yang dipergunakan untuk membentuk suatu tabel :

<TABLE></TABLE> - adalah tag awal, penanda awal dan akhir suatu tabel.
<TR></TR> - adalah tag yang menandakan suatu baris dalam tabel
<TD></TD> - adalah tag yang akan membagi baris menjadi beberapa kolom.

Masing-masing tag memiliki atribut sebagai berikut :

bgcolor - atribut untuk menentukan warna latar belakang
background - atribut untuk menentukan gambar yang akan menjadi latar belakang tabel / kolom
width - atribut untuk menentukan lebar
height - atribut untuk menentukan tinggi
align - mengatur perataan horizontal
valign - mengatur perataan vertikal
border - atribut untuk menentukan lebar bingkai tabel
cellspacing - atribut untuk menentukan jarak antar kolom
cellpadding - atribut untuk menentukan jarak antara isi dengan tepi kolom
colspan - menentukan berapa kolom yang akan digabung
rowspan - menentukan berapa baris yang akan digabung

Dan sekarang, mari kita coba mempraktekkannya satu persatu :

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1">

<TR>
<TD>Ini kolom pertama</TD>
<TD>Ini kolom kedua</TD>
</TR>

<TR>

<TD>Ini kolom pertama baris kedua</TD>
<TD>Ini kolom kedua baris

kedua</TD>
</TR>
</TABLE>
</BODY>

</HTML>

Sekarang kita lihat bagaimana hasilnya jika kita jalankan di browser :

Seperti kita lihat, dengan fungsi width, maka kita telah membuat suatu tabel dengan lebar hanya 80% lebar layar. Dengan source yang sama kita akan mencoba mewarnai kolom pertama dengan warna hijau dan kolom kedua kita beri background gambar. Sehingga hasilnya seperti berikut :

<HTML>
<BODY>
<TABLE WIDTH="80%"

BORDER="1">

<TR>
<TD bgcolor="#009900">Ini kolom pertama</TD>

<TD background="background.gif">Ini kolom kedua</TD>
</TR>

<TR>

Maka hasilnya adalah seperti ini :

Sekarang kita akan mencoba 4 atribut sekaligus yaitu width, height, align dan valign. Kolom pertama kita buat lebarnya 70%, sedangkan kolom kedua cukup 30% saja. Selanjutnya tinggi baris kedua kita buat 200. Untuk perataan, kita akan buat kolom pertama baris kedua rata atas dan kolom kedua baris kedua rata kanan. Sehingga sourcenya seperti ini :

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1">
<TR>

<TD bgcolor="#009900" width="70%">

Ini kolom pertama</TD>
<TD background="background.gif" width="30%">
Ini kolom kedua</TD>
</TR>

<TR height="200">
<TD valign="top">Ini kolom pertama baris kedua</TD>
<TD

align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Perhatikan huruf-huruf yang dicetak tebal dan merah, itu adalah atribut2 baru yang saya tambahkan. Dengan penambahan tersebut, maka di browser akan terlihat sebagai berikut:

Berikutnya, kita akan mencoba atribut Cellpadding dan cellspacing. Agar kamu tahu bedanya, maka kita akan membuat tabel yang memakai cellpadding dulu. Perhatikan tabel diatas barusan, dan kita akan menambahnya lagi dengan atribut cellpadding

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1" CELLPADDING="5">

<TR>
<TD

bgcolor="#009900" width="70%">
Ini kolom pertama</TD>
<TD

background="background.gif" width="30%">

Ini kolom kedua</TD>

</TR>
<TR height="200">
<TD valign="top">Ini kolom pertama baris

kedua</TD>

<TD align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Berikut ini hasilnya :

Tahu kan bedanya? Ya, textnya menjauh dari tepi kolom. Itulah manfaat dari cellpadding, memberi jarak antara text dengan tepi kolom. Lalu apa gunanya cellspacing? Mari kita lihat contoh berikut :

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="1" CELLSPACING="5">

<TR>
<TD

bgcolor="#009900" width="70%">
Ini kolom pertama</TD>
<TD

background="background.gif" width="30%">

Ini kolom kedua</TD>

</TR>
<TR height="200">
<TD valign="top">Ini kolom pertama baris

kedua</TD>

<TD align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Saya gunakan source yang sama dengan sebelumnya, hanya saja sekarang menggunakan cellspacing. Maka hasilnya adalah sebagai berikut :

Yup, kolom-kolom saling menjauh. Dan sekarang tinggal 2 atribut lagi, yaitu colspan dan rowspan. Sekarang kita akan mencoba menggabungkan kolom pertama dan kedua yang ada di baris 1. Berikut sourcenya :

<TABLE WIDTH="80%" BORDER="1"

CELLSPACING="5">

<TR>
<TD bgcolor="#009900" COLSPAN="2">
Ini kolom

gabungan</TD>
</TR>

<TR height="200">
<TD

valign="top">Ini kolom pertama baris kedua</TD>
<TD align="right">Ini kolom kedua

baris kedua</TD>
</TR>

</TABLE>

Perhatikan, saya menempatkan atribut colspan di kolom pertama dan menghapus kolom kedua, karena kita akan menggabungkannya. Saya juga mengganti textnya dengan "Ini kolom gabungan". Dan inilah hasilnya :

Lihat !! Kolom pertama dan kedua telah bergabung dan membentuk kolom gabungan. Berikutnya kita akan coba menggabungkan kolom pertama dengan kolom pertama baris kedua. Berikut sorcenya :

<TABLE WIDTH="80%" BORDER="1" CELLSPACING="5">

<TR>
<TD

bgcolor="#009900" width="70%" ROWSPAN="2">

Ini kolom pertama gabungan</TD>

<TD

background="background.gif" width="30%">
Ini kolom kedua</TD>
</TR>

<TR height="200">

<TD align="right">Ini kolom kedua baris kedua</TD>

</TR>
</TABLE>

Perhatikan, saya menempatkan rowspan di tag TD kolom pertama, dengan adanya perintah ini, maka 2 baris kolom pertama akan digabung. Dan inilah hasilnya :

Nah, sekarang tugas anda adalah membuat tabel seperti contoh pertama kali yaitu seperti ini :

Selamat Mencoba !!

Belajar membuat Header

2009-06-22T18:07:00.002+07:00

Header adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. Ada enam tingkatan header mulai dari H1 hingga H6. H1 adalah header yang paling besar dan H6 adalah header yang paling kecil. Coba tulis dalam Notepad anda sebagai berikut:

<HTML>

<BODY>
<H1>Header level 1</H1>

<H2>Header level 2</H2>

<H3>Header level 3</H3>
<H4>Header level 4</H4>
<H5>Header level

5</H5>

<H6>Header level 6</H6>
</BODY>
</HTML>

Simpanlah dalam format file HTML kemudian buka dalam browser. Hasilnya akan tampak sebagai berikut:

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5

Header level 6

Biasakanlah menggunakan tag header ini dalam setiap judul yang ingin kamu buat, search engine sangat menyukai header ini dalam mempermudah mereka menemukan situs kamu nantinya.

Belajar Membuat Frame

2009-06-22T17:46:00.004+07:00

Sebelum anda melangkah lebih lanjut, saya sangat menyarankan agar anda meminimalisir penggunaan frame. Karena Search Engine sangat membenci frame dan membuat halaman websitemu tak terindex dengan sempurna. Upayakan untuk mengganti frame dengan tabel. Terutama di halaman utama. Bila anda terpaksa menggunakan frame maka gunakan juga tag <NOFRAME> sebagai antisipasi agar search engine dapat membacanya.

Frame adalah bingkai yang membagi jendela browser sesuai keinginan kita. Dengan frame, kita bisa menampilkan beberapa file html sekaligus. Misalnya file pertama adalah file menu dan file kedua adalah isinya. Sehingga tampilan pada browser kira-kira seperti ini :

Untuk membuat website dengan tampilan seperti diatas, kamu perlu menyiapkan 2 buah file pengisi frame dan 1 buah file yang menggabungkan keduanya. Oke, misalnya file 1 kita beri nama menu.htm dengan source seperti ini :

<HTML>
<BODY

bgcolor="#0000FF" TEXT="#FFFFFF">
<A HREF="isi1.htm">Isi pertama</a>

<A HREF="isi2.htm">Isi kedua</a>
</BODY>
</HTML>

Dan file 2 kita beri nama isi1.htm dengan source seperti ini :

<HTML>
<BODY bgcolor="#FFFFCC">
Ini adalah halaman pertama, halaman ini muncul di

awal
tampilan.
</BODY>
</HTML>

Terakhir, kita akan menggabungkan dua file tersebut ke dalam satu file yang kita beri nama gabung.htm dengan source seperti ini:

<HTML>
<FRAMESET COLS="20%, 80%">

<FRAME SRC="menu.htm">
<FRAME

SRC="isi1.htm"></FRAMESET>
<NOFRAME>
Maaf, browser anda tak

mendukung Frame
</NOFRAME></HTML>

Untuk melihat hasilnya silahkan klik disini. Mari kita coba bedah satu per satu :

Tag FRAMESET adalah memberi tahu browser bahwa halaman ini akan terbagi menjadi beberapa kolom yaitu 20% dan 80%.
Tag FRAME memberi tahu browser halaman yang dimaksud
Tag NOFRAME bertugas sebagai alternatif apabila browser tak mampu menangani fungsi frame. Tulisan Maaf, browser anda tak mendukung Frame bisa anda ganti dengan tulisan lain atau kode HTML lain sehingga pengujung masih dapat menikmati websitemu.

Untuk halaman home (halaman utama) saya sarankan di antara tag <NOFRAME> anda masukkan saja link-link yang menuju ke file-file HTML anda. Hal ini perlu agar search engine masih dapat menikmati menu dan mengindex halaman web dengan sempurna.

Sedangkan untuk tag <FRAME> biasanya dilengkapi dengan atribut-atribut berikut:

BORDERCOLOR, fungsinya sama dengan BORDERCOLOR pada tag FRAMESET. Dalam hal ini, warna yang didefinisikan oleh tag yang lebih dalam menang atas warna yang didefinisikan oleh tag yang luar.
MARGINHEIGHT untuk menentukan jarak antara batas atas atau batas bawah frame dengan isi frame.
MARGINWIDTH untuk menentukan jarak antara batas kiri atau batas kanan frame dengan isi frame.
NORESIZE, dengan adanya atribut ini maka border dari frame yang bersangkutan tidak bisa digeser. Dengan kata lain, ukuran frame tersebut tidak bisa diubah (diperkecil atau diperbesar).
SCROLLING, mengatur fasilitas scroll (penggulung layar) dari frame. Nilainya bisa YES, NO atau AUTO. Nilai YES berarti penggulung selalu ada, NO berarti penggulung selalu tidak ada, sedang AUTO berarti penggulung ada bila diperlukan (isi frame melebihi ukuran layar) dan tidak ada bila tidak diperlukan (isi frame dimuat oleh layar). Nilai AUTO merupakan nilai default. Artinya, bila atribut SCROLLING tidak dituliskan, maka penggulung layar otomatis akan muncul bila diperlukan.
NAME, untuk memberi nama terhadap frame yang bersangkutan. Kegunaannya akan dijelaskan kemudian.

Adapun atribut NAME diperlukan dalam kaitannya dengan fungsi navigasi dari halaman ber-frame. Misalnya kita ingin mengatur agar suatu link bila di-klik akan memunculkan halaman targetnya dalam frame tertentu. Maka terlebih dahulu kita harus memberi nama terhadap frame tersebut. Contoh:

Dalam contoh di atas, frame ketiga (frame pada kolom kedua dari baris kedua halaman) kita berinama "utama". Dengan adanya nama tersebut, kita bisa mengatur agar link yang terdapat pada halaman di frame lainnya bila di-klik akan memunculkan halaman targetnya pada frame "utama" tersebut. Bingung? Misalnya, pada halaman menu.htm terdapat link dengan kode HTML seperti berikut:

Bila kata BAB II di-klik maka akan membuka file bab2.htm. Tapi halaman bab2.htm tersebut akan mengisi seluruh jendela browser. Artinya halaman yang berframe akan hilang. Agar file bab2.htm itu muncul pada frame "utama" saja, kita harus memberi atribut TARGET seperti ini:

Masih ingat, kan tentang atribut TARGET pada pelajaran tentang LINK? Seandainya semua link yang terdapat dalam file menu.htm akan kita arahkan pada frame "utama" maka kita bisa menyisipkan tag <BASE TARGET="utama"> diantara tag <HEAD> dan </HEAD>. Dengan demikian, kita tidak perlu lagi menuliskan dalam setiap link atribut TARGET tersebut satu-persatu. Karena dengan adanya tag BASE TARGET itu, secara otomatis, semua link yang ada dalam halaman tersebut akan diarahkan ke frame yang dicantumkan dalam BASET TARGET. Kecuali link yang mempunyai TARGET tersendiri.

Berikut beberapa cara pengarahan link dengan atribut TARGET:

_blank : halaman yang dipanggil akan muncul pada jendela baru (ini sudah kita pelajari)
_top : halaman yang dipanggil akan mengisi penuh jendela yang sama, meskipun tadinya ada frame.
_self : halaman yang dipanggil akan mengisi tempat yang sama, bila link tersebut dalam sebuah frame maka halaman yang dipanggil akan mengisi frame tersebut.
_parent : halaman yang dipanggil akan akan mengisi FRAMESET, satu tingkat lebih tinggi dari FRAME tempat link yang bersangkutan.

Alignment atau Perataan

2009-06-22T17:31:00.003+07:00

Dalam tulisan cetak, dikenal tiga atau empat macam perataan yaitu rata kiri (align left), di tengah (center), rata kanan (align right) dan rata kiri dan kanan (justify). Tag Header dan Tag Paragraf dapat disisipi dengan atribut align untuk melakukan perataan ini.

Contoh atribut perataan dalam tag header:

<HTML><BODY>
<H1>Header level 1</H1>

<H2

align="center">Header level 2</H2>
<H3

align="right">Header level 3</H3>
</BODY></HTML>

Bila dilihat dalam browser, tampak seperti ini:

Header level 1

Header level 2

Header level 3

Contoh atribut perataan dalam tag paragraf:

<HTML><BODY>
<P>paragraf rata kiri

adalah default</p>

<P align="center">paragraf di

tengah</p>
<P align="right">paragraf rata

kanan</p>
<P align="justify">paragraf rata kiri dan

kanan</p>
</BODY></HTML>

Hasilnya seperti yang anda bayangkan:

paragraf rata kiri adalah default

paragraf di tengah

paragraf rata kanan

paragraf rata kiri dan kanan

Berpedoman dengan contoh di atas, cobalah membuat tulisan dengan model header dan paragraf sebagai berikut:

Untuk Apa Mempunyai Website?

Jika anda seorang pelajar atau mahasiswa, anda dapat membuat website untuk memperkenalkan sekolah atau universitas anda. Apa kegiatannya, program kerjanya di masa datang, organisasi-organisasi yang terdapat di dalamnya, dan lain sebagainya.

Jika anda seorang ilmuwan, peneliti atau saintis, website anda bisa diisi dengan publikasi karya ilmiah anda, tesis, proposal-proposal iptek, rencana penelitian, masalah yang dihadapi dalam penelitian, jadwal seminar, dan lain sebagainya. Selain itu, anda juga bisa membuat polling online untuk keperluan riset atau untuk mendukung teori-teori anda.

Jika anda seorang pengusaha, anda dapat mengisi website anda dengan barang-barang produksi atau perdagangan anda, tipe dan jenisnya, dukungan purna jualnya, pemasarannya, profil perusahaan, jumlah karyawan, lowongan pekerjaan, grafik kemajuan perusahaan, dan sebagainya.

Maka, buatlah sebuah website, siapapun anda. Karena website adalah untuk siapa saja, dan siapa saja harus punya website. Yuk, belajar bikin website di http://aku.punya.web.id

Selamat mencoba, semoga sukses !!