Tutorial Center

Panduan Dasar Membuat Website dengan Photoshop CS2

2011-06-02T18:42:00.002-07:00

Web yang sering dikunjungi orang merupakan nilai plus bagi seorang web designer. Banyaknya pengunjung yang datang dapat dijadikan tolok ukur keberhasilan seseorang dalam merancang dan mengembangkan sebuah website profesional.
Ada beberapa unsur yang mempengaruhi keberhasilan tersebut, diantaranya: mudah digunakan, proses koneksi cepat, tampilan menarik, perpaduan warna sangat tepat, navigasi mudah dipahami dan digunakan, isi artikel sangat berguna, dan masih banyak lagi unsur lain. Semua itu bergantung pada respon pengunjung/pengguna terhadap website yang kita buat.
Saat ini website sudah menjadi salah satu bagian dari identitas sebuah institusi, sama pentingnya dengan alamat perusahaan. Website dapat dijadikan “guide” bagi pelanggan untuk mengetahui lebih jauh tentang profil sebuah institusi secara online.
Ada beberapa sofware yang dapat digunakan untuk merancang interface sebuah website pribadi, diantaranya: Adobe Macromedia Firework dan Adobe Photoshop. Rancangan yang dibuat dalam Photoshop dapat disimpan menjadi html kemudian dapat dioleh menggunakan Adobe Macromedia Dreamweaver. Jadi anda tidak perlu lagi membuat kode html yang rumit dan panjang, cukup menggunakan perpaduan Adobe Photoshop dan Adobe Macromedia Dreamweaver.
Berikut ini, saya akan memberikan sedikit tutorial tentang pembuatan website pribadi yang impresif menggunakan Adobe Photoshop. Artikel yang saya muat di sini merupakan cuplikan dari salah satu bab buku saya yang dalam proses pencetakan di penerbit Datakom Lintas Buana. Jadi, apabila tutorial ini kurang dari sempurna, sebaiknya membeli buku tersebut .
Buku tersebut terdiri dari 5 bab yaitu:
Bab 1. Pengantar Web Design
1.1. Tips Membuat Web Profesional
1.2. Prinsip dalam Mendesain Website
1.3. Software Desain Grafis
1.4. Format Grafis
Bab 2. Konsep Dasar Pembuatan Website

Bab 3. Merancang Web
3.1. Kategori Web
3.2. Dasar-dasar Pemilihan Warna
3.3. Mengatur Layout
Bab 4. Proses Pengembangan
4.1. Situs Pribadi
4.1.1. Membuat Dokumen Baru
4.1.2. Membuat Interface
4.1.3. Membuat Tombol
4.1.4. Menambahkan Efek Khusus
4.1.5. Membuat Heading
4.1.6. Menambahkan Image/Gambar
4.1.7. Menambahkan Teks untuk Menu
4.1.8. Memotong Gambar (Slice)
4.2. Situs Bisnis
4.2.1. Membuat Dokumen Baru
4.2.2. Membuat Interface
4.2.3. Menambahkan Efek pada Interface
4.2.4. Membuat Tombol
4.2.5. Membuat Heading
4.2.6. Teknik Slice
Bab 5. Proses Editing
5.1. Editing Awal
5.1.1. Mengubah Objek menjadi Background
5.1.2. Memasukkan Objek
5.2. Membuat Link dan Navigasi
5.2.1. Membuat Pop-up Menu
5.2.2. Membuat Rollover Image 116

Dengan melihat bentuk layout tersebut di atas, akan lebih mudah proses pengembangannya dalam Adobe Photoshop. Sebelum membuat dokumen baru, kita harus mengetahui bahwa tidak semua resolusi monitor pengguna sama dengan yang kita miliki. Sebagai contoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixel sedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel. Apabila Anda membuat ukuran dokumen 900 x 600 pixel maka menimbulkan ketidaknyamanan pengunjung karena harus sering menggulung halaman website akibat ukuran dokumen terlalu lebar. Sebaiknya lebar tidak melebihi 800 pixel.
OKE. kita mulai saja pembahasan membuat website pribadi dengan Adobe Photoshop (Anda bisa menggunakan Adobe Photoshop versi 7, 8, atau 9).
4.1.1. Membuat Dokumen Baru
Diasumsikan Anda menggunakan Adobe Photoshop 7, CS maupun CS2. Jalankan program Adobe Photoshop kemudian ikuti beberapa petunjuk berikut ini.

Buatlah dokumen baru dengan ukuran 800 x 600 pixel. Mode warna RGB, resolusinya 72 pixel, mode warna RGB 8 bit dan latar belakang white. Beri nama dokumen baru tersebut (misal: Situs Pribadi), setelah selesai klik OK.
Untuk mempermudah proses pembuatan interface situs, ada baiknya memasukkan gambar bentuk layout ke dalam dokumen Adobe Photoshop. Anda dapat menduplikasi (copy dan paste) ke dalam dokumen tersebut.
Klik Set Foreground color untuk memilih warna sebagai latar belakang.
Setelah kotak dialog Color Picker muncul, masukkan kode warna #0066cc pada kotak kode.
Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna pada layer Background.
Buatlah layer baru dengan nama “Up” kemudian aktifkan Rectangle Marquee tool dan buatlah seleksi seperti nampak pada gambar berikut.
Tekan huruf D pada keyboard untuk mengubah warna default Foreground dan Background (Hitam dan Putih) kemudian tekan huruf X untuk membalik warna tersebut. Tekan tombol Alt+Backspace secara bersama-sama untuk memberi warna putih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi.

4.1.2. Membuat Interface
Bentuk interface yang bagus dapat membangkitkan “gairah” para pengguna untuk tetap menikmati berbagai berita dan informasi yang disajikan. Keunikan bentuk interface memiliki nilai tersendiri karena tidak semua orang memiliki kemampuan untuk menciptakan bentuk tersebut. Berikut ini akan membahas salah bentuk interface yang modern.

Pertama kali, aktifkan Pen tool.
Pada menu option di bagian atas, pilih Shape Layers.
Klik Set Foreground Color untuk memilih warna.
Setelah kotak dialog Color Picker muncul, masukkan kode warna #ff5d6c pada kotak yang disediakan.
Buatlah Shape menggunakan Pen tool dengan bentuk seperti nampak pada gambar berikut.
Aktifkan Convert Point tool untuk membuat efek lengkung.
Klik pada segmen yang ingin diberi efek lengkung. Klik dan tahan sambil menggeser salah satu convert point ke kanan secara perlahan agar membentuk lengkungan yang diinginkan.
Selanjutnya memilih segmen yang lain. Klik dan tahan sambil menyeret pointer ke kanan secara perlahan agar membentuk objek yang diinginkan.
Jika telah selesai maka akan terbentuk sebuah asesoris modern seperti nampak pada gambar berikut.
Aktifkan layer Shape 1, buatlah duplikat layer tersebut dengan cara mengklik dan tahan sambil menggerakkan ke ikon Create New Layer.
Jika berhasil, pada Palet Layer akan muncul hasil duplikasi layer tersebut dengan nama Shape 1 copy.
Aktifkan layer Shape 1 copy kemudian tekan Ctrl+T untuk mentransformasikan. Klik tombol mouse kanan dan pilih Flip Horizontal. Setelah selesai klik tombol Commit pada option bar atau dapat juga menekan tombol Enter.
Kurangi tingkat kepekatan (opacity) dengan cara menggeser slider pada menjadi 50%.
Aktifkan Direct Selection tool.
Buatlah seleksi untuk memilih dua buah segmen yang akan dipindahkan secara bersama-sama.
Gunakan tombol panah ke kiri untuk menggeser dua buah segmen tersebut.
Langkah selanjutnya adalah membuat ilustrasi yang sama untuk memperindah tampilan. Buatlah duplikat layer Shape 1 sekali lagi dengan cara menggeser layer tersebut ke ikon Create New Layer. Kemudian modifikasi bentuknya menggunakan Convert Point tool sehingga akan membentuk sebuah latar belakang yang modern. Ubahlah opacity-nya menjadi 20%.
Berikutnya, aktifkan Pen tool dan buatlah Shape yang berbentuk seperti gambar berikut.
Seperti biasa, aktifkan Convert Point tool untuk membuat bagian yang lengkung.
Sehingga akan didapatkan sebuah bentuk interface yang impresif.
Duplikasi Shape 2 dengan cara menyeret layer tersebut ke ikon Create New Layer. Kemudian ubahlah bentuknya agar lebih menarik lagi. Untuk memodifikasi, gunakan Convert Point tool dan Direct Selection tool. Jika mengikuti petunjuk buku ini, bentuk shape akan seperti nampak pada gambar berikut.
Terakhir, aktifkan Rectangle tool.
Kemudian buatlah Shape berbentuk kotak memanjang. Jangan lupa memberi warna Shape tersebut dengan kode warna #ea1c30.

4.1.3. Membuat Tombol
Setelah sebelumnya membuat bentuk interface untuk halaman situs, langkah selanjutnya adalah membuat tombol yang eksklusif.

Pertama kali, aktifkan Rectangle Rounded tool.
Buatlah sebuah tombol berbentuk kotak.
Aktifkan Direct Selection tool kemudian buatlah seleksi untuk memilih empat buah segmen di bagian bawah.
Geser ke kanan sebanyak 10 kali menggunakan tombol tanda panah ke kanan.
Berilah efek bayangan (Drop Shadow) dengan cara mengklik ikon Layer Style (f) di bagian bawah Palet Layers.
Setelah kotak dialog Layer Style muncul, aturlah beberapa spesifikasi seperti nampak pada gambar berikut. Setelah selesai klik OK.
Langkah selanjutnya adalah membuat beberapa duplikasi tombol tersebut dengan cara menggesernya ke ikon Create New Layer.
Buatlah tiga buah tombol lagi dengan cara yang sama seperti sebelumnya. Anda dapat menduplikasi tombol yang sudah ada atau membuat tombol baru lagi. Jika Anda telah membuat tiga buah tombol, kira-kira bentuknya seperti gambar berikut ini.

4.1.4. Menambahkan Efek Khusus
Interface tersebut mungkin masih sangat sederhana, kita perlu memberi efek khusus agar terlihat menarik. Ada beberapa teknik ketika membuat efek khusus pada tombol (button) yaitu memberi warna putih agar kelihatan seperti “button gel” atau hanya memberikan efek shadow saja.

Pertama kali aktifkan layer yang bentuk objeknya seperti nampak pada gambar berikut.
Menuju ke palet Path, ubahlah path tersebut menjadi seleksi dengan cara mengklik tombol ikon Load path as selection di bagian bawah palet Path.
Buatlah layer baru dengan nama “Light”. Kemudian aktifkan Brush tool, pilihlah ukurannya 9 pixel. Pada option bar, kurangi opacity menjadi sekitar 6% saja. Tekan huruf D lalu huruf X.
Goreskan pada bagian yang lengkung secara perlahan-lahan sehingga akan terbentuk warna seperti nampak pada gambar berikut.
Sekarang tekan tombol Ctrl+Shift+I atau pilih menu Select > Inverse untuk membalikkan posisi seleksi. Tekan huruf X untuk memilih warna Foreground menjadi Hitam.
Arsirlah secara perlahan-lahan pada bagian yang lengkung menggunakan Brush tool sehingga akan memiliki efek bersinar dan muncul bayangan.

4.1.5. Membuat Heading
Umumnya judul utama sebuah situs pribadi maupun perusahaan berada di bagian atas. Nama Domain dapat dijadikan sebagai judul heading dengan tujuan untuk lebih mengingatkan kepada pengunjung tentang alamat situs. Sebagai contoh, nama domain Anda : dix-um.com. Ambillah nama domain tersebut sebagai judul heading.

Untuk membuat sebuah heading, pertama kali aktifkan Horizontal Type tool.
Kemudian, klik ikon Foreground Color untuk menentukan warna teks. Setelah kotak dialog Color Picker muncul, masukkan kode warna #ea1c30.
Ketiklah judul heading, misal: Dixs-um.com, pilihlah jenis huruf (font) yang tidak berkait (Sans Sherif).
Buatlah layer baru dengan nama “Color-head”, kemudian buatlah seleksi berbentuk kotak menggunakan Rectangle Marquee tool.
Aktifkan Gradient tool, kemudian pada option bar pilihlah tipe Linier. Aturlah warna Foreground (#ea5765), dan Background (#ffffff).
Letakkan pointer di atas dan tarik ke bawah untuk membuat warna gradasi. Tekan Ctrl+D untuk membuang seleksi.

4.1.6. Menambahkan Image/Gambar
Gambar yang ditampilkan dalam sebuah situs dapat berupa foto maupun clipart. Pada umumnya, ilustrasi yang digunakan dalam bentuk fotografi karena memiliki beberapa kelebihan diantaranya, warna realistis, bentuknya sesuai dengan objek sesungguhnya, lebih alami, dan masih banyak lagi kelebihannya.
Oleh karena yang akan kita buat adalah situs pribadi, tidak ada salahnya menempatkan gambar (foto) pribadi seseorang dalam halaman utama. Baiklah, langsung saja kita akan mencoba melakukannya.

Pertama kali bukalah foto yang akan dijadikan ilustrasi di halaman muka situs.
Pilih menu Window > Arrange > Tile Vertically untuk menampilkan dua buah dokumen.
Aktifkan layer yang bergambar orang, klik dan tahan sambil menyeret layer tersebut ke dokumen Situs Pribadi.
Jika gambarnya terlalu besar, ubahlah ukurannya dengan cara menekan tombol Ctrl+T kemudian seretlah salah satu titik pegangan (handle) ke tempat tujuan.
Aktifkan Horizontal Type tool, dan ketikkan beberapa kata sebagai identitas situs tersebut.

4.1.7. Menambahkan Teks untuk Menu
Tombol-tombol yang telah dibuat tersebut belum dapat berfungsi sebagai menu karena tidak ada teksnya. Nah, pada bagian berikut ini kita akan mencoba menambahkan teks pada beberapa tombol yang telah dibuat agar dapat berfungsi sebagai menu.
Menu tersebut dapat berupa mouse over maupun menu pull down. Jadi sebaiknya Anda memikirkan sejak awal sebelum memutuskan untuk memilih bentuk yang diinginkan. Apabila Anda mengikuti petunjuk dalam buku ini, bentuk menu yang akan dibuat adalah menu pull down.

Langkah yang pertama, aktifkan Horizontal Type tool kemudian buatlah area teks dengan cara mengklik pada tempat tombol sambil ditahan dan menyeretnya ke bagian lain membentuk kotak teks.
Buatlah teks sebagai menu (misal: Home, Profile, Gallery, News, dan Contact). Anda bebas memilih jenis huruf (font), penulis menggunakan jenis font Myriad Pro 10 point. Gunakan warna putih untuk teks tersebut.
Lakukan hal yang sama untuk membuat menu di bagian lain.

4.1.8. Memotong Gambar (Slice)
Adobe Photoshop memang dapat diandalkan dalam segala hal, terbukti beberapa bidang sangat memerlukan software yang satu ini diantaranya untuk keperluan fotografi, percetakan, animasi, periklanan, maupun untuk membuat website.
Salah satu keunggulan Adobe Photoshop dalam membuat sebuah halaman web adalah adanya teknik Slice. Dengan fasilitas tersebut, gambar akan secara otomatis terpotong sesuai dengan garis Slice. Anda tidak perlu memotong secara manual kemudian menyimpan potongan gambar tersebut satu per satu.
Hal yang perlu diperhatikan ketika memotong gambar adalah membaginya sesuai keperluan saja. Artinya, jika gambar tersebut akan digunakan sebagai tombol menu maka sebaiknya dipotong sesuai masing-masing judul menu tersebut. Misal menu Home harus terpisah dari menu Profile. Jangan memotong gambar yang memiliki dua menu karena akan mengalami masalah ketika mengeditnya dalam Macromedia Dreamweaver.

Sebelum memotong gambar menggunakan Slice tool, kita memerlukan beberapa garis bantu untuk menandai bagian mana saja yang akan dipotong. Letakkan pointer pada ruler guide di sebelah kiri tangan Anda, klik dan tahan sambil menyeret ke kanan.
Buatlah beberapa garis bantu untuk menandai bagian yang akan dipotong. Apabila mengikuti pentunjuk dalam buku ini, kurang lebih seperti gambar berikut.
Sekarang buatlah garis bantu secara horisontal dengan cara mengambilnya dari ruler guide di atas (horizontal ruler), sehingga hasilnya akan nampak seperti gambar berikut ini.
Setelah tersusun beberapa garis bantu, langkah selanjutnya adalah memotong gambar tersebut menggunakan Slice tool. Kita harus memilih bagian mana saja yang perlu dipisahkan, dan umumnya semua tombol harus dipisahkan karena memiliki fungsi yang berbeda. Sedangkan untuk bagian yang akan digunakan sebagai latar belakang, sebaiknya tidak perlu dipisahkan. Untuk memotong bagian tersebut, pertama kali aktifkan Slice tool. Perlu diingat, setelah mengaktifkan Slice tool secara otomatis akan muncul angka 1 di sudut kiri atas. Hal itu memiliki arti gambar tersebut telah siap dipotong.
Letakkan pointer di sudut kiri atas.
Kemudian klik dan tahan sambil menyeret ke sebelah kanan sesuai luas yang diinginkan.
Setelah memotong gambar tersebut secara otomatis akan muncul angka 2.
Letakkan pointer di atas angka 2, klik dan tahan sambil menyeret ke kanan untuk memotong gambar.
Setelah memotong gambar tersebut secara otomatis akan muncul angka 3 dan 4. Hal ini dikarenakan Adobe Photoshop secara otomatis memotong pada bagian lain agar bentuknya tetap utuh. Anda dapat memotong gambar pada area yang telah ditandai angka tersebut.
Langkah selanjutnya adalah memotong tombol-tombol yang ada secara terpisah. Letakkan pointer pada angka 3, klik dan tahan sambil menyeret ke bagian lain yang telah ditandai dengan garis bantu.
Lakukan dengan cara yang sama untuk memotong bagian lain sehingga akan terbentuk seperti gambar berikut.
Untuk bagian yang memiliki fungsi sama, sebaiknya tidak perlu dipisah/dipotong.
Perlu diperhatikan, ketika memotong pada bagian lain usahakan irisannya tepat pada irisan sebelumnya agar tidak muncul irisan lain yang tidak diinginkan. Jika hal itu terjadi, hasilnya tidak akan maksimal dan tidak sesuai seperti yang kita harapkan. Anda dapat memotong gambar yang terlalu besar menjadi beberapa bagian agar proses koneksi lebih cepat ketika menampilkan gambar.
Langkah selanjutnya, irislah tombol-tombol pada bagian kanan.
Berikutnya, memotong gambar yang bukan berfungsi sebagai tombol.
Untuk gambar yang akan dijadikan latar belakang, irislah menjadi dua bagian saja seperti nampak pada gambar berikut.
Begitu pula pada bagian lain, irislah gambar sesuai keperluan.
Apabila sudah mengiris gambar menjadi beberapa bagian maka akan nampa sepeti gambar berikut.
Dan untuk langkah selanjutnya adalah menyimpan dokumen tersebut menjadi web (Save for web). Pilih menu File > Save for Web.
Maka akan muncul kotak dialog Save for Web. Klik tombol Save.
Kemudian akan muncul kotak dialog Save Optimized As. Tentukan folder untuk menyimpan file kemudian beri nama file tersebut, misal index lalu pilih HTML and images untuk Save as type, Seting=Default Setting, dan Slice=All Slices. Setelah selesai klik tombol Save untuk menyimpan.
Setelah menyimpan dokumen tersebut, akan nampak nama file index.html dan folder images yang berisi beberapa gambar yang telah dipotong menggunakan Slice tool.
Tahap selanjutnya adalah mengeditnya menggunakan Adobe Macromedia Dreamweaver untuk menambahkan teks dan membuat menu pull down agar tampilan situs lebih menarik dan lebih profesional.

selamat mencoba

Teknik dasar desain web dengan Dreamweaver

2011-06-02T18:35:00.000-07:00

Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih praktis dibandingkan harus membuat kode html.

Ketika dokumen Adobe Photoshop tersimpan dalam bentuk web maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu bersusah payah mengetik kode html.

Anda dapat membuktikan sendiri seperti nampak pada gambar berikut.

1. Mengubah Objek menjadi Background
Tidak semua gambar (image) yang pada web yang telah kita buat diganti. Jika image tersebut berfungsi sebagai tombol, maka Anda dapat menambahkan menu pull down agar tampilan website lebih menarik. Anda juga dapat membuat tombol dalam bentuk mouse over, dan lain sebagainya.
Pada bagian ini, kita akan mencoba membahas tentang teknik penggantian objek gambar menjadi latar belakang (backgrdound) agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).

Pertama kali, bukalah file index.html menggunakan Macromedia Dreamweaver.
Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan di jadikan latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.
Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.
Klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar belakang (background). Oleh karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.
Ketikkan images/index_26.gif pada kolom Bg.
Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai latar belakang agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2. Memasukkan Objek Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver proses memasukkan objek sangat mudah karena sudah disediakan tool yang sangat lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini akan membahas masalah teknik memasukkan objek berupa teks.

Letakkan kursor pada tempat yang akan ditambahkan teks.
Pada penel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.
Ketikkan beberapa kalimat yang berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.
Anda bisa memasukkan image di antara teks tersebut. Untuk melakukan hal itu, pertama kali letakkan kursor di awal paragraf kemudian pilih menu Insert > Image.
Pilih file gambar yang akan dimasukkan dalam dokumen tersebut.
Apabila berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.
Agar tampilan lebih rapi, Anda dapat mengatur posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukan hal tersebut, pada panel Properties pilih Left untuk Align.

MEMBUAT LINK DAN NAVIGASI
Menu yang mudah digunakan (user friendly) dapat membantu pengguna ketika mencari informasi yang dibutuhkan. Sebaiknya menggunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us
Dalam Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak bersusah payah menuliskan script yang panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.
1. Membuat Pop-up Menu
Keunggulan software Macromedia Dreamweaver dibandingkan dengan aplikasi lain yang sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi mereka yang masih awan dengan bahasa Java, tidak perlu bingung karena disediakan panel Behavior untuk mempermudah dalam pembuatan menu pop-up.
Sebelum membuat pop-up menu terlebih dulu harus menyiapkan nama file sebagai link. Sebagai contoh: ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lain sebagainya. Dan ketika user memilih salah satu opsi (missal: Acer) maka akan terhubung ke file tersebut.
Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (contoh: Save As > acer.html). Diasumsikan, Anda telah memiliki beberapa file sebagai link yang dimaksud.

Pertama kali, klik menu PC.
Jika panel Behaviors belum muncul, aktifkan terlebih dulu dengan cara memilih menu Window > Behaviors.
Pada panel Behaviors (berada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.
Selanjutnya pilih Show Pop up Menu.
Setelah mengklik pilihan tersebut, maka akan muncul kotak dialog Show Pop-up Menu yang masih kosong.
Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).
Kemudian masukkan alamat URL pada kolom Link.
Selanjutnya pada kolom Target, pilih _parent.
Untuk membuat menu yang baru, klik tanda plus (+) di bagian atas. Kemudian lakukan hal sama seperti pada tahap 6.
Selanjutnya, klik Tab Appearance untuk mengatur warna teks dan latar belakang pop up menu. Tentukan jenis dan ukuran font yang digunakan. Lalu tentukan pula warna teks dan warna cell ketika mouse berada di atas teks.
Klik Tab Advanced untuk menentukan lebar, tinggi dan warna border kotak pop up menu.
Klik Tab Position untuk menentukan posisi pop up menu.
Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.
Untuk mengasah keterampilan Anda, buatlah pop-up menu pada tombol lain.

2. Membuat Rollover Image
Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop up Menu juga menyediakan tool untuk membuat Rollover Image sebagai tombol. Yang harus Anda lakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

Buatlah duplikasi gambar tombol yang telah ada.
Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjustment > Hue/Saturation.
Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan cara menekan Ctrl+S.
Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.
Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.
Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.
Masukkan teks alternat pada kolom Alt, lalu tentukan nama file sebagai link ketika tombol tersebut di klik.
Untuk melihat hasilnya, tekan tombol F12.

memahami aplikasi untuk membuat blog atau website

2011-06-02T18:17:00.000-07:00

Bagaimana sih cara membuat Blog? Apakah membuat blog itu harus membayar ? Pertanyaan ini sering muncul ketika seseorang ingin membuat blog. Ada beberapa aplikasi yang dapat digunakan untuk membuat blog, baik yang bersifat gratis maupun berbayar. Baiklah, pada bagian ini akan diuraikan beberapa aplikasi yang dapat digunakan untuk membuat blog secara gratis.

Blogger (http://www.blogspot.com): adalah sebuah layanan publikasi blog yang didirikan oleh Pyra Labs, dan diakuisisi oleh Google pada tahun 2003.

Blogger menawarkan dukungan blog multi-pengarang, yang memungkinkan pengguna membuat sebuah blog untuk kelompok (group blog).
Blogger mendukung layanan Google AdSense sebagai sebuah cara bagi pemilik blog untuk mendapatkan penghasilan dari blog mereka.
Blogger menawarkan fitur pengubahan templat, yang mengijinkan pengguna mengubah desain templat blog sesuai keinginan mereka.
Perlu diingat, ketika mendaftar pada penyedia blog ini, alamat blog akan berubah menjadi blogspot.com, contoh: http://dewa-google.blogspot.com/. Nama pengelola blog akan diletakkan di bagian awal yang menandakan sebagai sub domain.

Blogsome (http://www.blogsome.com): adalah salah satu hosting blog yang mempergunakan WordPress sebagai engine blog. Sebenarnya masih ada lagi hosting lainnya yang menyediakan WordPress sebagai engine blog seperti misalnya Blogthing, namun sampai saat ini entah mengapa masih banyak beberapa rekan dari Indonesia mempergunakan blogsome sebagai hosting blog pribadi.

Multiply (http://www.multiply.com): adalah sebuah situs jaringan sosial dengan fitur yang memungkinkan orang untuk saling-berbagi beberapa media, seperti foto, video, maupun blog. Multiply.com menyediakan layanan blog. Blog yang di-posting ke Multiply.com dapat secara otomatis diteruskan ke akun LiveJournal, Blogger atau TypePad. Dimungkinkan pula untuk mem-posting melalui e-mail atau MMS. Pengguna juga dapat memberikan komentar terhadap sebuah film atau buku, atau juga untuk berbagi acara berdasarkan kalender.

WordPress (http://www.wordpress.com): adalah sebuah perangkat lunak blog yang ditulis dalam PHP dan mendukung sistem basis data MySQL. WordPress adalah penerus resmi dari b2cafelog yang dikembangkan oleh Michel Valdrighi. Nama WordPress diusulkan oleh Christine Selleck, teman dari ketua developer, Matt Mullenweg. Rilis terbaru WordPress adalah versi 2.7. WordPress didistribusikan dengan lisensi GNU General Public License.

Dengan melihat beberapa aplikasi tersebut di atas, anda dapat memilih salah satu sesuai keinginan. Namun pada pembahasan ini, akan menjelaskan pengelolaan blog menggunakan WordPress. Ada beberapa alasan menggunakan WordPress yaitu: fitur lebih sederhana dan user friendly, tampilan tema cukup bervariasi, fasilitas lengkap untuk mengelola artikel dalam bentuk teks, gambar, audio, maupun video

Cara buat Blog dan website dengan Domain dan Hosting Gratis

2011-06-02T18:06:00.000-07:00

Apa yang dimaksud dengan membuat Blog gratis? Bukankah pada pembahasan sebelumnya sudah membuat blog gratis pada penyedia blog? Memang, pada pembahasan sebelumnya telah dijelaskan proses pembuatan blog pada penyedia blog. Kemudian dibahas pula proses pembuatan blog berbayar dengan cara membeli domain dan hosting.

Pembahasa kali ini adalah membuat domain dan hosting gratis untuk blog yang akan dibuat. Ada beberapa penyedia domain dan hosting gratis dengan kapasitas penyimpanan data yang cukup besar. Proses pembuatannya pun relatif mudah, cukup mengisi formulir yang disediakan maka dalam dua hari domain dan hosting dapat dimiliki secara gratis.
Membuat Domain dan Hosting Gratis

Langsung saja, pertama kali mendaftarkan domain pada website penyedia domain gratis dan hosting gratis di http://www.blinxer.com. Kemudian klik sebuah link untuk registrasi.
Masukkan beberapa informasi yang dibutuhkan. Perlu diingat, pada kolome Username akan digunakan sebagai alamat website. Jika Username-nya slametriyanto maka alamat websitenya adalah http://slametriyanto.blinxer.com. Dan pastikan alamat email yang digunakan masih aktif karena informasi aktifasi akan dikirim melalui email tersebut. Jika sudah yakin, klik tombol Registered.
Jika muncul sebuah informasi untuk konfirmasi, klik tombol Click Me to Continue. Selanjutnya akan muncul verifikasi. Masukkan kode yang nampak ke kolom yang disediakan. Jika salah memasukka kode maka proses registrasi tidak akan dilanjutkan. Jika sudah yakin, klik tombol Register untuk melanjutkan.
Sebuah informasi muncul, bahwa akun aktifasi telah dikirimka melalui email.
Periksa email Anda, kemudian klik sebuah link untuk aktifasi.
Informasi tentang hosting telah dibuat, lengkap dengan nama pengguna untuk database, FTP, dan nama domain yang telah didaftarkan. Pada bagian paling atas terdapat informasi bahwa proses pembuatan domain dan hosting $0 alias gratis.
Simpan informasi tersebut dengan cara mengklik teks Saved. File akan tersimpan dalam bentuk PDF.
Setelah tersimpan, klik link Click here to log into your VistaPanel untuk masuk ke Vista Panel. Tampilan halaman utama Vista Panel seperti nampak pada gambar berikut.

Membuat Database
Setiap web dinamis pasti memiliki sebuah database untuk menyimpan data, baik berupa teks, gambar, maupun file lainnya. Begitu pula dengan blog yang dibuat menggunakan WordPress sebagai aplikasinya. Sebelum melakukan instalasi wordpress secara online, terlebih dulu harus membuat database.

Langsung saja, untuk membuat database klik link MySQL databases.
Masukkan nama database, misal: myblog kemudian tekan tombol Create database. Database baru telah terbentuk. Perhatikan, nama database secara otomatis ditambahkan. Mengapa begitu ? Karena hosting dan domain yang kita daftarkan bersifat gratis dan sebagai sub domain.
Perhatikan, informasi pengguna untuk FTP dan MySQL. Informasi tersebut akan digunakan saat melakukan instalasi WordPress.

Menginstal Wodpress
Setelah semua informasi didapatkan, langkah selanjutnya adalah menginstal WordPress secara online melalui fasilitas layanan Fantastico.

Klik sebuah link Fantastico type installer untuk memilih beberapa layanan script untuk berbagai kebutuhan berdasarkan kategori script.
Terdapat beberapa script untuk membangun website.
Pilih WordPress 2.7.1. lalu tekan link Clik to Install.
Klik tombol Complete Install.
Proses instalasi dimulai, masukkan nama database, nama pengguna, password, dan database host. Dari mana informasi tersebut didapat? Jawabnya: dari informasi Vista Panel. Jika sudah yakin, klik tombol Submit.
Tunggu beberapa saat, sistem akan mengubungkan ke database. Jika berhasil, maka muncul informasi untuk melanjutkan proses instalasi. Klik tombol Run the Install.
Masukkan informasi untuk Blog yang telah dibuat lalu klik tombol Install WordPress.
Proses instalasi berhasil. Secara default, username = admin dan password dibuat secara random. Ingat! Catatlah password agar tidak lupa saat ingin masuk ke halaman admin.
Tampilan standar halaman utama blog Anda menggunakan WordPress.

Source :[slametriyanto.net]

Mempelajari dan pahami teknik SEO yang mitos dan teknik SEO yang fakta

2011-06-02T17:53:00.000-07:00

SEO hanya mitos atau fakta? Tidak semua teknik SEO yang Anda jumpai di Internet adalah nyata dan terbukti. Tetapi juga tidak semua teknik SEO yang ada hanya mitos belaka. Sebagian nyata, sebagian lagi belum terbukti. Bingung ya? Tidak juga. Mari kita lihat bersama referensi dokumen tentang SEO, yang bersumber resmi dari Google, Yahoo, dan MSN.

Dokumen referensi

Sebagai referensi dalam pembahasan artikel ini, saya gunakan:

Artikel Google mengenai Search Engine Optimization Starter Guide (PDF 551kb), wajib di-download pecinta SEO.
Google Webmaster Guidelines
Google Friendly Sites
Google Patent US 7,031,954, http://www.freepatentsonline.com/7031954.pdf
Google Patent US 7,031,961, http://www.freepatentsonline.com/7031961.pdf
Yahoo! Search Content Quality Guidelines
MSN Guidelines for successful indexing

Teknik SEO yang nyata

1. Perbanyak jumlah link ke halaman web

Semakin banyak halaman lain yang mengarah ke suatu halaman web, maka halaman web yang dituju akan memiliki posisi yang semakin bagus di Search Engine. Dasarnya adalah pernyataan google di halaman Google Friendly Site. Secara natural, jika web atau blog Anda bagus, orang akan dengan sendirinya memasang link di halaman mereka. Secara tidak natural, Anda dapat blogwalking di blog dofollow atau meminta tukar link dengan pemilik web atau blog lain.

Fenomena click here
Sampai sekarang fenomena “click here” (kekuatan teks link) masih dapat dilihat di Google. Silakan masukkan kata “click here” tanpa tanda petik di Google, lihat halaman yang menjadi urutan paling atas. Buka halaman tersebut, mungkin tidak ada satupun kata “click here” di halaman tersebut. Yang menyebabkan posisi halaman tersebut bagus di Google adalah karena banyak sekali halaman web yang memasang link ke halaman tersebut dengan kalimat yang kurang lebih begini: Untuk download software ini, click here. “Click here” di sini berupa link yang bisa di-klik. Fenomena ini menunjukkan bahwa jumlah link dan teks yang digunakan sebagai link ke arah halaman tertentu akan menentukan posisi halaman tersebut dalam search engine. Ini adalah fakta, bukan mitos.

2. Keyword dan kualitas artikel

Berkali-kali disebutkan dalam Google Webmaster Guidelines, Yahoo! Search Content Quality Guidelines, dan MSN Guidelines for successful indexing, bahwa content atau kualitas isi adalah hal yang utama. Okey kualitas isi yang utama tetapi bagaimana cara membedakan halaman tersebut berkualitas atau tidak? Bagaimana cara membedakan halaman tersebut cocok untuk keyword yang diketikkan pengunjung dalam search engine? Jika kita boleh berandai-andai, seandainya kita diminta membuat sebuah search engine, atau menyusun algoritma search engine, tentu yang kita perhatikan adalah jumlah keyword dan posisi keyword dalam artikel tersebut bukan?

Hal yang menjadi fakta lagi adalah bahwa search engine mempertimbangkan keyword dalam URL dan Judul (title). Jika Anda memasukkan kata kunci tertentu di Google, dan kata kunci tersebut menjadi URL sebuah dokumen hasil pencarian, maka kata kunci dalam tersebut di-bold oleh google bukan? Demikian pula kata kunci di dalam judul, yang selalu di-bold oleh Google dalam SERP (Search Engine Ranking Page). Jadi kata kunci dalam URL dan judul/title merupakan hal yang menentukan posisi dalam search engine adalah fakta, bukan mitos.

Sudah cukup itu saja, hanya ada 2 buah teknik SEO yang benar-benar nyata, dan jika Anda sudah mulai pusing dan nggak mau ribet, cukup terapkan dua teknik SEO tersebut di atas. Tetapi jika Anda punya waktu lebih, silakan teruskan membaca artikel ini.

Teknik SEO yang didasarkan pada Artikel Google mengenai SEO

Kalau dipikir-pikir agak aneh juga, sebagai search engine, Google mengeluarkan dokumen resmi yang berisi Tips SEO, silakan di download pada link referensi yang sudah disebutkkan di atas (PDF 551kb). Kalau boleh berpendapat, tips-tips SEO dalam artikel tersebut sebagian memang bagus untuk meningkatkan posisi di Google, atau (paling tidak) mempermudah dan mempercepat proses indeks, tetapi sebagian untuk mencegah dan memerangi beredarnya tips SEO yang tanpa dasar, optimasi berlebihan, atau blackhat. Ini beberapa tips SEO yang ada pada artikel Google:

1. Membuat judul unik dan akurat

Dalam pelajaran bahasa Indonesia, judul karangan boleh dibuat menggelitik agar menarik pembaca. Misalnya sebuah cerpen percintaan dapat diberi judul “bunga sakura”, meskipun dari awal tidak dibahas mengenai bunga sakura ternyata di akhir cerita menggambarkan sepasang kekasih yang bertemu di bawah pohon sakura.

Dalam pandangan SEO, judul “bunga sakura” tepat jika artikelnya membahas tentang bunga sakura, misalnya wujud, jenis, atau cara menanamnya.

Saran Google:

Membuat judul yang akurat, unik, dan berbeda-beda untuk setiap halaman.
Membuat judul yang singkat tetapi jelas.

Kesalahan umum yang perlu dihindari dalam SEO:

Judul default seperti ‘Untitled’ atau nama perusahaan untuk semua halaman (jika nama perusahaan hanya homepage saja tidak masalah).
Judul terlalu panjang.
Menambahkan keyword yang tidak diperlukan dalam judul secara berlebihan.

2. Menggunakan meta description

Jika Anda terbiasa mengedit HTML, Anda dapat memberikan kata-kata yang sesuai untuk meta description. Pada sebagian direktori bahkan tidak mengindeks halaman, hanya meta description dan meta keywordnya saja yang masuk ke dalam database mereka.

Saran Google:

Membuat meta description yang akurat menggambarkan isinya.
Membuat meta description yang berbeda-beda untuk setiap halaman.

Kesalahan umum yang perlu dihindari dalam SEO:

Membuat meta description yang tidak ada hubungannya dengan isi.
Membuat meta description hanya berisi keyword (bukan kalimat).
Meta description terlalu umum.
Copy-paste isi halaman ke dalam meta description.
Membuat meta description yang sama untuk semua halaman atau sebagian halaman.

3. Membuat URL yang baik

Sama seperti yang sudah dibahas di atas, yaitu keyword dalam URL akan turut menentukan posisi halaman tersebut dalam search engine. Misalnya Anda membuat artikel mengenai bunga sakura, lebih baik menggunakan URL:

http://web-anda.com/bunga-sakura/
daripada
http://web-anda.com/p?12

URL akan muncul dalam hasil pencarian (SERP) dan sering digunakan orang sebagai teks link yang mengarah ke halaman tersebut.

Saran Google:

Menggunakan URL berupa kata atau kalimat.
Membuat struktur direktori (seperti folder dalam windows) sederhana.
Satu halaman hanya memiliki satu URL.

Kesalahan umum yang perlu dihindari dalam SEO:

URL terlalu panjang, terlalu umum, atau terlalu banyak mengulang kata kunci.
Membuat struktur direktori yang kompleks atau tidak ada hubungannya dengan isi.
Mencampur-adukkan URL, kadang dengan awalan www, kadang tanpa www. Kadang dengan akhiran “/”, kadang tidak. Sebaiknya konsisten.
Menggunakan perpaduan huruf besar dan kecil, sebaiknya hanya huruf kecil.

4. Membuat navigasi situs mudah dan sederhana

Google menyarankan situs dibuat dengan navigasi yang sederhana dari umum ke spesifik. Misalnya pada halaman utama ada “profil perusahaan”, di dalam halaman “profil perusahaan” ada link ke “bidang usaha”, “AD/ART”, “manajemen”, dsb. Di dalam halaman “bidang usaha” ada link ke “off air”, “on air”, dsb.

Saran Google:

Membuat hirarki navigasi yang simple dan natural.
Menggunakan link berupa teks dalam navigasi.
Menggunakan teks yang menyatakan posisi pengunjung sedang dimana (breadcumb), yang memungkinkan pengunjung dapat dengan mudah menuju ke level yang lebih tinggi, misalnya ditampilkan saat ini pengunjung sedang berada di:

profil perusahaan > bidang usaha > off air

Membuat sebuah HTML sitemap, yaitu sebuah halaman yang di dalamnya terdapat link ke semua halaman atau halaman-halaman penting dalam situs Anda.
Pertimbangkan jika sebagian URL dihilangkan. Misalnya link ke artikel ini:

http://www.tutorial.co.vu/2011/06/mempelajari-dan-pahami-teknik-seo-yang.html

pertimbangkan apakah link tersebut valid jika link-nya dipotong menjadi:
http://www.tutorial.co.vu/2011/06/

Membuat halaman 404 yang berguna. Halaman 404 adalah halaman yang ditunjukkan saat pengunjung mengklik atau menulis URL sebuah halaman yang tidak ada di dalam situs Anda. Halaman 404 dapat berisi link ke homepage atau link ke artikel atau halaman yang populer di web Anda.

Kesalahan umum yang perlu dihindari dalam SEO:

Membuat navigasi yang sangat kompleks, misalnya semua halaman saling berkaitan.
Membuat halaman yang terlalu dalam, halaman tersebut hanya dapat dibuka dengan berkali-kali klik dan membuka halaman lain yang sangat banyak terlebih dahulu.
Menggunakan banyak gambar dan animasi untuk link (sebaiknya teks).
HTML sitemap mengandung link yang tidak valid atau tidak terorganisir dengan baik.
Membiarkan halaman 404 terindeks search engine, hanya pesan singkat “Not Found” atau “Error 404″ tanpa penjelasan, dan menggunakan design yang tidak konsisten misalnya hanya halaman putih.

5. Menawarkan isi dan pelayanan yang berkualitas

Menurut Google, isi web yang berkualitas adalah kunci utama untuk dapat memperoleh trafik, karena akan menarik pengunjung untuk mengajak temannya ikut melihat web tersebut, baik melalui blog, email, dari mulut ke mulut dan sebagainya.

Saran Google:

Menuliskan isi web dengan bahasa yang mudah dimengerti dan topik yang terorganisir.
Menggunakan kata-kata kunci yang diperkirakan akan digunakan pengunjung yang menjadi target Anda. Misalnya web Anda adalah toko mobil, maka masukkan kata kunci BMW, mobil, mobil bekas, mobil murah, dan kata-kata lain yang kira-kira banyak dimasukkan orang ke dalam search engine. Kata-kata ini harus ada di dalam web Anda.
Membuat isi yang baru, unik, dan tidak ditemukan pada web lain.
Membuat isi yang diperuntukkan untuk orang, bukan search engine.

Kesalahan umum yang perlu dihindari dalam SEO:

Banyak error baik secara ejaan maupun tata bahasa.
Copy-paste dari web atau blog lain.
Membuat sebuah halaman yang mirip dengan halaman lain dalam satu situs (duplicate content).
Memasukkan keyword berlebihan, sehingga jika dibaca orang biasa menyebabkan tidak nyaman.
Memasukkan kata-kata dengan kesalahan ejaan dengan harapan orang yang salah ketik di search engine akan menemukan web kita.
Membuat teks yang tidak kelihatan bagi pengguna (misalnya karena kecil sekali atau warna teks dengan background-nya sama).

6. Membuat anchor teks yang baik

Anchor teks adalah teks yang digunakan sebagai link. Teks ini berfungsi sebagai keyword bagi halaman yang dituju. Membuat anchor teks yang baik sangat berguna dalam SEO, baik untuk link yang menuju ke halaman luar maupun link yang menuju ke halaman dalam situs kita sendiri.

Saran Google:

Menuliskan anchor teks yang menerangkan isi halaman yang dituju.
Menuliskan anchor teks yang singkat dan jelas.
Membuat anchor teks mudah dilihat dan berbeda dengan teks biasa (warna, ukuran, dll).

Kesalahan umum yang perlu dihindari dalam SEO:

Membuat anchor teks yang terlalu umum seperti “click here” atau “klik di sini”.
Membuat anchor teks terlalu panjang dan anchor teks yang tidak perlu.

7. Membuat heading tag yang baik

Heading tag adalah kode HTML yang menunjukkan kerangka karangan (outline), dimulai dari <h1> sampai <h6>. Heading tag berisi judul artikel, judul bab, judul sub-bab, atau judul point-point penting, tetapi bukan paragraf artikel itu sendiri. Misalnya sebuah artikel tentang bunga sakura:

<h1> adalah judul artikelnya sendiri, misalnya “Bunga sakura”
<h2> adalah judul bab, misalnya “Pengenalan”, “Pembibitan”, Perawatan”
<h3> adalah judul sub-bab, misalnya “Kebutuhan Air”, “Kebutuhan Pupuk” dsb.

Saran Google:

Membuat heading tag sebagai outline yang menyebar terstruktur dengan baik di dalam sebuah artikel

Kesalahan umum yang perlu dihindari dalam SEO:

Membuat heading tag yang tidak perlu, meloncat-loncat dengan struktur yang tidak jelas.
Membuat heading tag hanya sekedar agar tulisan enak dipandang, bukan karena strukturnya.
Meletakkan sebuah paragraf dalam heading tags, sebaiknya berupa kalimat singkat atau judul.

8. Optimasi gambar

Gambar di dalam sebuah web atau blog sangat powerfull dalam SEO. Search engine saat ini tidak bisa mengindeks tulisan yang ada di dalam gambar, tetapi dapat mengindeks atribut “ALT” pada gambar. Teks dalam atribut ALT akan muncul jika pengunjung gambar tidak tertampil di browser baik disengaja untuk mempercepat browsing ataupun tidak disengaja oleh pengunjung.

Saran Google:

Menggunakan atribut ALT yang singkat dan jelas menerangkan gambar tersebut.
Menggunakan nama file yang berisikan deskripsi gambar atau keyword.

Misalnya, lebih baik menggunakan
kupu-kupu.jpg, ketika-itu.gif
daripada
image001.jpg, fotoku.gif

Menggunakan atribut ALT jika gambar tersebut digunakan sebagai link adalah wajib, fungsinya sama dengan anchor teks dalam teks link.
Meletakkan semua gambar dalam satu direktori tertentu di dalam sebuah situs web.
Menggunakan tipe file yang umum (JPEG, GIF, PNG, dan BMP).

Kesalahan umum yang perlu dihindari dalam SEO:

Tidak menggunakan atribut ALT.
Atribut ALT terlalu panjang atau diisi keyword secara berlebihan.

9. Membuat robot.txt yang efektif

Robots.txt adalah file yang memerintahkan search engine BOLEH atau TIDAK mengakses bagian tertentu di dalam situs web. Misalnya pada situs web http://websitemu.com/robots.txt. Robots.txt terletak pada:
http://websitemu.com/robots.txt.

Sitemap: http://websitemu.com/sitemap.xml
User-agent: IRLbot
Crawl-delay: 3600
User-agent: *
Disallow: /next/
User-agent: *
Disallow:

Jika pada file robots.txt dimasukkan kode disallow untuk folder tertentu, isi folder tersebut tidak akan diindeks search engine, tetapi dapat muncul dalam hasil pencarian, jika link ke halaman tersebut terdapat di halaman lain (termasuk referrer log). Untuk lebih jelasnya, lihat tutorial robots.txt .

Jadi robots.txt dapat mencegah search engine mengindeks halaman tertentu tetapi bukan mengeblok pengunjung karena pengunjung tetap bisa membukanya jika tahu URL-nya.

Saran Google:

Untuk halaman-halaman sensitif gunakan proteksi keamanan tidak cuma robots.txt misalnya htaccess.

Kesalahan umum yang perlu dihindari dalam SEO:

Mengijinkan search result terindeks search engine.
Mengijinkan halaman-halaman yang mirip terindeks search engine.
Mengijinkan URL dari proxy server terindeks search engine.

10. Menggunakan atribut nofollow

Membuat atribut rel=”nofollow” pada link akan memerintahkan search engine untuk tidak memberikan ‘reputasi’ dari halaman Anda ke halaman yang dituju. Di mata search engine, sebuah link ke halaman lain akan meningkatkan ‘reputasi’ halaman yang dituju. Semakin tinggi ”reputasi’, maka semakin baik pula posisi halaman tersebut pada search engine.

Nofollow dapat diletakkan sebagai atribut sebuah link (rel=”nofollow”) atau berlaku untuk keseluruhan halaman jika diletakkan pada head (<meta
name=”robots” content=”nofollow”>)

Saran Google:

Menggunakan atribut nofollow pada link-link yang dibuat bebas oleh pengunjung, seperti komentar blog, buku tamu, referrer list, forum, dsb.

Kesalahan umum yang perlu dihindari dalam SEO:

Tanpa menggunakan atribut nofollow, blog atau web Anda rawan terdapat link SPAM, link ke halaman SPAM dapat menurunkan ‘reputasi’ web Anda.

11. Promosi web dengan benar

Dengan konten yang baik, link akan terbangun dengan sendirinya, karena orang akan cenderung menuliskannya pada blog atau web sebagai referensi, dibahas, atau dengan sukarela meletakkan link web Anda ke dalam blogroll. Meskipun konten adalah hal yang utama, tidak ada salahnya melakukan promosi web atau blog Anda.

Saran Google:

Membuat blog tentang berita dan layanan perusahaan Anda.
Jangan lupakan promosi offline seperti poster, kartu nama, dan sebagainya.
Jika Anda sedang bisnis dengan target pasar lokal, promosikan di Google Local Business Centre .
Bergabung dengan komunitas yang mendukung promosi web Anda.

Kesalahan umum yang perlu dihindari dalam SEO

Promosi hal-hal kecil yang tidak efesien.
Bergabung dengan program pertukaran link yang direkayasa (seperti skema piramida).
Membeli link atau teknik-teknik lain yang tidak sewajarnya.

Cara Dasar Teknik SEO (Search Engine Optimization)

2011-06-02T17:48:00.000-07:00

Jika Anda menginginkan website Anda berada pada urutan tertinggi di Google, Yahoo, atau search engine yang lain, maka Anda perlu menjalankan teknik SEO (Search Engine Optimization). Dengan menerapkan teknik SEO ini, blog atau website Anda bukan hanya berada pada urutan tertinggi di search engine, tapi blog Anda juga akan memiliki banyak pengunjung.

Coba masukkan kata kunci “click here” pada google, situs apa yang muncul? Download Acrobat Reader? Mengapa? Padahal di halaman tersebut tidak ada satupun tulisan “click here”. Kenapa bisa begitu?

Teknik SEO ada dua jenis, yaitu ON PAGE dan OFF PAGE.

Teknik SEO ON PAGE, berarti membuat halaman website kita sebagus mungkin di mata search engine. Yaitu dengan cara memilih judul yang tepat, keyword yang cukup tetapi tidak berlebihan, menambah link pada kata kunci, bold, italic, dan sebagainya. Berikut ini tips teknik ON PAGE:

Fokus pada keyword Anda, pikirkanlah sejenak kira-kira orang akan memasukkan kata kunci apa di Google atau Yahoo yang tepat untuk website Anda.
Gunakan judul berisi keyword.
Gunakan keyword 5 – 10 kali dalam isi tulisan Anda.
Gunakan ALT (untuk link dan image) berisi keyword Anda.
Gunakan BOLD dan ITALIC pada keyword Anda.
Gunakan link pada keyword Anda.

Teknik SEO OFF PAGE, adalah dengan cara membangun link sebanyak mungkin ke arah blog kita. Anda bisa ikut pertukaran link dengan teman, atau memasang link pada halaman friendster, comment, buku tamu dan sebagainya. Semakin banyak link yang mengarah ke website kita, maka PAGERANK kita akan semakin tinggi. Semakin tinggi PAGERANK berarti semakin besar kemungkinan website kita berada di urutan tertinggi search engine.

Anda juga harus memperhatikan Anchor Text pada saat membuat link ke arah website Anda. Kenapa website Adobe berada pada peringkat tertinggi di google untuk kata kunci “click here” itu, karena banyak sekali website yang terdapat link ke arah halaman itu dengan kata: Download Adobe Reader, click here. Kata “click here” tersebut yang disebut Anchor text karena berupa link. Usahakan link yang mengarah ke website Anda sesuai dengan keyword yang menjadi sasaran Anda.

Berikut ini adalah hal-hal yang dilarang pada SEO (blackhat SEO), jika Anda menjalankan larangan ini, maka website Anda akan di-blacklist search engine (tidak diindex):

Membuat doorway, yaitu halaman khusus buat search engine yang tidak berguna bagi pengunjung situs Anda.
Memasang link di website Anda yang termasuk kategori “bad neighborhood”, yaitu situ-situs yang sudah di-blacklist (termasuk link farm).
Mengikuti program paid link.
Membangun link dalam jumlah yang sangat besar dalam waktu singkat.
Isinya sama persis dengan website lain.

Search engine saat ini sudah semakin pintar, buatlah website atau blog Anda berbobot dan berguna bagi pengunjung, maka website Anda akan banyak dikunjungi orang dari seluruh dunia.

Selamat mencoba.

Tips agar website atau blog cepat terindeks Search Engine

2011-06-02T17:32:00.000-07:00

Coba periksa website/blog Anda apakah sudah terindeks google dan search engine lain? Masukkan URL Anda di google (misalnya: http://website_name.com). Adakah? Apakah sudah ada? Jika website Anda belum ada dalam hasil pencarian, ada teknik-teknik agar halaman Anda terindeks search engine.

Teknik tersebut adalah:

Buat link pada halaman yang sudah terindeks search engine ke arah website kita yang baru. Profil kita di friendster (misalnya: “www.friendster.com / okam” adalah contoh yang bagus untuk membuat link ke arah blog atau website kita. Karena biasanya halaman ini telah terindeks search engine. Semakin tinggi posisi halaman tersebut dalam search engine (PageRank) berarti semakin cepat webiste baru kita terindeks.
- Anda bisa mengontak teman Anda yang blognya sudah terindeks search engine untuk memasang link kepada Anda.
- Jika profil / blog Anda di friendster / multiply sudah terindeks, Anda bisa pasang link di profil Anda tersebut.
- Rajin mengisi blog Anda. Google analytic yang merupakan plug-in wordpress akan selalu memantau aktivitas Anda.
Submit manual melalui URL berikut (GRATIS):
- Google: http://www.google.com/addurl.html
- Yahoo: http://search.yahoo.com/info/submit.html
- Altavista: http://www.altavista.com/addurl/
- DMOZ / ODP: http://www.dmoz.org/add.html
- Alexa: http://www.alexa.com/support/get_archive.html
- MSN: http://search.msn.com/docs/submit.aspx
Submit URL yang bayar:
- Lycos: http://home.lycos.com/addasite.html
Sebelum Anda men-submit URL website Anda, pastikan:
- Website atau blog Anda sudah jadi (tidak under construction).
- Tidak ada dead link dalam website Anda.
- Website atau Anda dibuat agar search engine friendly.

Setelah Anda submit URL Anda, tunggulah dengan sabar. Kalau beruntung website Anda akan terindeks dalam waktu kurang dari 24 jam, kalau tidak beruntung Anda harus menunggu 3 bulan, bahkan mungkin aplikasi Anda tidak diterima Search Engine. Anda bisa submit ulang jika dalam waktu 3 bulan website Anda belum muncul dalam search engine.

Apa yang harus dilakukan selama menunggu? Membangun link. Bisa jadi tiba-tiba website Anda nongol bukan karena submit manual, tetapi karena link dari website lain.

Selamat mencoba.