Selasa, Desember 25, 2007
Tutorial Sederhana Membuat Website dengan Photoshop CS2
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 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.
Baiklah.... 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 BaruDiasumsikan 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 InterfaceBentuk 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 KhususInterface 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/GambarGambar 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 MenuTombol-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. Teknik pembuatannya akan dibahas pada bab selanjutnya dalam buku tersebut. <... Tunggu tanggal terbitnya, jangan lupa membeli buku tersebut …>
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 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.
Baiklah.... 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 BaruDiasumsikan 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 InterfaceBentuk 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 KhususInterface 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/GambarGambar 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 MenuTombol-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. Teknik pembuatannya akan dibahas pada bab selanjutnya dalam buku tersebut. <... Tunggu tanggal terbitnya, jangan lupa membeli buku tersebut …>
Step by Step Blog di WordPress ( Part XIII )
Misalkan Anda punya foto favorit. Foto itu terlalu kecil, padahal Anda ingin sekali membuatnya besar untuk dipajang di dinding kamar. Kalau diedit pake program Paint di windows biasanya gambarnya jadi kabur. Atau foto besar ingin diperkecil, bentuk rupa dan warna jadi kurang bagus. Atau lebih parah lagi, Anda tidak tahu sama sekali seni mengedit foto sedangkan Anda ingin sekali mengedi foto, image/gambar, atau apapun untuk dipasang di header blog atau di sidebar dengan ukuran pixel yang sesuai keinginan. Gimana caranya? Sekarang semuanya mudah. Salah satu contoh, ikuti petunjuk praktis berikut:
1. Kunjungi http://snipshot.com/
2. Di bawahnya tulisan “Open from your computer” ada kotak kosong –> klik browse –>pilih foto atau gambar di komputer yg ingin diedit. Tunggu sampai gambar tersebut tampil.
3. Di atas gambar yang akan diedit ada beberapa menu seperti “Resize”, “Crop”, “Enhance”, “Adjust”, “Rotate”, “Effects” –> pilih command yang ingin Anda lakukan. Sebagai contoh, klik Resize untuk merubah ukuran foto / gambar.
4. Klik kiri terus-terusan mouse Anda dan arahkan ke kotak kecil merah di pinggir gambar dan tarik ke atas/bawah atau ke samping untuk memperlebar atau memperpanjang image.
5. Setelah puas dengan ukuran yang diinginkan, klik kanan di gambar –>Save picture as –> kasih nama file. Selesai.
6. Untuk menyimpan secara online foto yang sudah di saving di komputer tadi, lihat caranya di sini.
1. Kunjungi http://snipshot.com/
2. Di bawahnya tulisan “Open from your computer” ada kotak kosong –> klik browse –>pilih foto atau gambar di komputer yg ingin diedit. Tunggu sampai gambar tersebut tampil.
3. Di atas gambar yang akan diedit ada beberapa menu seperti “Resize”, “Crop”, “Enhance”, “Adjust”, “Rotate”, “Effects” –> pilih command yang ingin Anda lakukan. Sebagai contoh, klik Resize untuk merubah ukuran foto / gambar.
4. Klik kiri terus-terusan mouse Anda dan arahkan ke kotak kecil merah di pinggir gambar dan tarik ke atas/bawah atau ke samping untuk memperlebar atau memperpanjang image.
5. Setelah puas dengan ukuran yang diinginkan, klik kanan di gambar –>Save picture as –> kasih nama file. Selesai.
6. Untuk menyimpan secara online foto yang sudah di saving di komputer tadi, lihat caranya di sini.
Step by Step Blog di WordPress ( Part XII )
Di sidebar sebelah kanan blog ini, saya mengajak teman-teman blogger untuk bertukar link dengan fatihsyuhud.com yang bertujuan selain untuk saling kenal antar sesama blogrollers, juga berfungsi sebagai saling promosi blog. Saya memakai format Text Area–yang berisi link dan chicklet/image kecil– supaya yang berminat tukar link dapat langsung meng-copy/paste kodenya dengan mudah. Berikut kode Text Area di sidebar tsb yang dapat diganti dg link dan chiklet Anda sendiri:
< /a>
Catatan:
1. rows=.. adalah ukuran ke atas, sedangkan cols=… adalah ukuran ke samping. Apabila setelah dipasang di blog ternyata kelebaran atau kepanjangan, maka dirubah angka di rows atau di cols sesuai kebutuhan yg sesuai dg sidebar blog Anda.
2. Cara pasang di wordpress.com, hidupkan widget. Naikkan widget *TEXT* ke sidebar. Dan pasang kode Text Area tsb.
3. Cara pasang di blogger.com / blogspot, klik add element –> text html/javascript –> pasang kode Text Area.
< /a>
Catatan:
1. rows=.. adalah ukuran ke atas, sedangkan cols=… adalah ukuran ke samping. Apabila setelah dipasang di blog ternyata kelebaran atau kepanjangan, maka dirubah angka di rows atau di cols sesuai kebutuhan yg sesuai dg sidebar blog Anda.
2. Cara pasang di wordpress.com, hidupkan widget. Naikkan widget *TEXT* ke sidebar. Dan pasang kode Text Area tsb.
3. Cara pasang di blogger.com / blogspot, klik add element –> text html/javascript –> pasang kode Text Area.
Step by Step Blog di WordPress ( Part XI )
Sebenarnya soal ini sudah dibahas di sini, tapi untuk blogger baru yg mungkin belum sempat nengok artikel tsb berikut tip untuk tahu siapa yg ngelink blog Anda. Cara paling mudah adalah via Technorati.com. Tulis di browser Anda (Internet Explorer atau Firefox) begini:
http://technorati.com/search/zoelranto.wordpress.com
Ganti URL blog saya dg blog Anda. Hasilnya, Anda akan tahu siapa saja yg sudah ngelink ke blog Anda. Terjadinya perubahan jumlah yg ngelink biasanya setelah Anda mengupdate posting atau template blog.
Update: Bagi yang ngelink ke Blogger Indonesia, silahkan cek dulu di Technorati.Com. Apabila blog Anda sudah masuk sebagai blog yang ngelink ke Blogger Indonesia, maka yang perlu Anda lakukan adalah menunggu linkback darinya. Karena linkback akan dilakukan berdasarkan laporan Technorati. Jadi, Anda tak perlu memberi tahu.Sebaliknya, walaupun Anda laporan sudah melinkback Blogger Indonesia, tapi link Anda tidak ada di Technorati.com, blog Anda tidak akan dilinkback
http://technorati.com/search/zoelranto.wordpress.com
Ganti URL blog saya dg blog Anda. Hasilnya, Anda akan tahu siapa saja yg sudah ngelink ke blog Anda. Terjadinya perubahan jumlah yg ngelink biasanya setelah Anda mengupdate posting atau template blog.
Update: Bagi yang ngelink ke Blogger Indonesia, silahkan cek dulu di Technorati.Com. Apabila blog Anda sudah masuk sebagai blog yang ngelink ke Blogger Indonesia, maka yang perlu Anda lakukan adalah menunggu linkback darinya. Karena linkback akan dilakukan berdasarkan laporan Technorati. Jadi, Anda tak perlu memberi tahu.Sebaliknya, walaupun Anda laporan sudah melinkback Blogger Indonesia, tapi link Anda tidak ada di Technorati.com, blog Anda tidak akan dilinkback
Step by Step Blog di WordPress ( Part X )
Dalam mengutip suatu pendapat dalam posting blog, biasanya kita akan memuat link website (situs) atau blog dari mana tulisan itu kita kutip. Pengutipan dg menyebutkan sumber link memiliki tiga fungsi utama:
(1) Sebagai tanda bahwa tulisan kita itu cukup “ilmiah”.
(2) Sebagai apresiasi kepada sumber yg dikutip.
(3) Sebagai salah satu cara untuk menambah traffic bagi blog kita sendiri, terutama apabila sumbernya adalah blogspot atau blog lain yg memakai sistem trackback (atau “link to this post” kalau di blogspot/blogger).
Sekedar diketahui bahwa alamat website kita akan muncul di blog yg kita kutip, apabila pemilik blog tsb menghidupkan menu “link to this post”. Dg demikian, setiap pembaca blog yg kita linkback akan melihat alamat blog Anda juga. Cara menghidupkan menu “link to this post” lihat di sini di poin (d) Backlinks –> Show.
(a) Bagaimana cara membuat link di posting blog?
(1) Tulis kata-kata, seperti “Di kutip dari tulisan Wimar Witoelar”.
(2) Highlight kata-kata di atas.
(3) Klik ikon di bawah ini yg ada di toolbar. Akan muncul kotak yg ada tulisan “http://”
(4) Isi kotak tsb. dg alamat situs atau link yg diinginkan.
(5) Klik OK. Selesai.
(b) Mengutip Permalink (Permanent Link) bukan alamat BlogSumber kutipan yg kita link sebaiknya memakai alamat langsung artikel yg kita kutip, bukan alamat blog utama. Ini disebut juga dg Permalink atau permanent link. Misalnya, apabila Anda mengutip tulisan saya tentang Cara Mendaftar di wordpress.com, maka alamat permanen atau permalink-nya adalah http://zoelranto.wordpress.com/2007/11/11/membuat-blog-di-wordpress-com/ (permalink), jadi bukan http://zoelranto.wordpress.com (alamat blog). Apabila itu yg anda lakukan, maka nama dan alamat blog Anda juga akan muncul di akhir tulisan saya yg Anda kutip. Sehingga yg membaca tulisan saya tsb. juga akan tergoda untuk “takziyah” ke blog Anda.
(c) Setting Link dalam New Window (halaman baru)
Biasanya apabila kita memuat link sumber yg kita kutip, pembaca akan cenderung meng-klik link tsb. Supaya halaman kita tidak hilang, maka dalam kutipan link tsb. bisa kita tambah kode sederhana agar ketika link tsb diklik akan muncul halaman baru dan tidak menghilangkan halaman blog kita.
Caranya:
(1) Setelah dilink sesuai petunjuk di atas, klik menu “Edit HTML” di toolbar posting.
(2) Akan muncul kode (ini sekedar contoh) < a href="”http://zoelranto.com”" >
(3) Tambah kode target=”new” di awal atau di akhir kode .
Contoh:
Yg di awal < a target="”new”" href="”http://zoelranto.com”" >Yg di akhir: < href="”http://zoelranto.com”" target="”new”">
Kode HTML membuat Live Link (link hidup)
Umpama Anda akan mengelink blog saya untuk dipasang di widget Teks di Sidebar atau di Pages/Halaman wordpress.com, silahkan copy paste link di bawah: Blogger Indonesia
Anda tinggal merubah link blog saya tsb dengan blog/situs apa saja yang ingin Anda link di blog Anda.
(1) Sebagai tanda bahwa tulisan kita itu cukup “ilmiah”.
(2) Sebagai apresiasi kepada sumber yg dikutip.
(3) Sebagai salah satu cara untuk menambah traffic bagi blog kita sendiri, terutama apabila sumbernya adalah blogspot atau blog lain yg memakai sistem trackback (atau “link to this post” kalau di blogspot/blogger).
Sekedar diketahui bahwa alamat website kita akan muncul di blog yg kita kutip, apabila pemilik blog tsb menghidupkan menu “link to this post”. Dg demikian, setiap pembaca blog yg kita linkback akan melihat alamat blog Anda juga. Cara menghidupkan menu “link to this post” lihat di sini di poin (d) Backlinks –> Show.
(a) Bagaimana cara membuat link di posting blog?
(1) Tulis kata-kata, seperti “Di kutip dari tulisan Wimar Witoelar”.
(2) Highlight kata-kata di atas.
(3) Klik ikon di bawah ini yg ada di toolbar. Akan muncul kotak yg ada tulisan “http://”
(4) Isi kotak tsb. dg alamat situs atau link yg diinginkan.
(5) Klik OK. Selesai.
(b) Mengutip Permalink (Permanent Link) bukan alamat BlogSumber kutipan yg kita link sebaiknya memakai alamat langsung artikel yg kita kutip, bukan alamat blog utama. Ini disebut juga dg Permalink atau permanent link. Misalnya, apabila Anda mengutip tulisan saya tentang Cara Mendaftar di wordpress.com, maka alamat permanen atau permalink-nya adalah http://zoelranto.wordpress.com/2007/11/11/membuat-blog-di-wordpress-com/ (permalink), jadi bukan http://zoelranto.wordpress.com (alamat blog). Apabila itu yg anda lakukan, maka nama dan alamat blog Anda juga akan muncul di akhir tulisan saya yg Anda kutip. Sehingga yg membaca tulisan saya tsb. juga akan tergoda untuk “takziyah” ke blog Anda.
(c) Setting Link dalam New Window (halaman baru)
Biasanya apabila kita memuat link sumber yg kita kutip, pembaca akan cenderung meng-klik link tsb. Supaya halaman kita tidak hilang, maka dalam kutipan link tsb. bisa kita tambah kode sederhana agar ketika link tsb diklik akan muncul halaman baru dan tidak menghilangkan halaman blog kita.
Caranya:
(1) Setelah dilink sesuai petunjuk di atas, klik menu “Edit HTML” di toolbar posting.
(2) Akan muncul kode (ini sekedar contoh) < a href="”http://zoelranto.com”" >
(3) Tambah kode target=”new” di awal atau di akhir kode .
Contoh:
Yg di awal < a target="”new”" href="”http://zoelranto.com”" >Yg di akhir: < href="”http://zoelranto.com”" target="”new”">
Kode HTML membuat Live Link (link hidup)
Umpama Anda akan mengelink blog saya untuk dipasang di widget Teks di Sidebar atau di Pages/Halaman wordpress.com, silahkan copy paste link di bawah: Blogger Indonesia
Anda tinggal merubah link blog saya tsb dengan blog/situs apa saja yang ingin Anda link di blog Anda.
Step by Step Blog di WordPress ( Part IX )
Berikut cara mengedit kolom Profil di wordpress.com. Hal-hal yang dapat diedit/dirubah di “ruang” profil wordpress Anda adalah: Pasang foto diri, nama Anda yang tampil di publik atau di posting, mengganti password, menaruh situs utama Anda (di wordpress.com atau di blog lain), merubah bahasa utama blog, dan lain-lain. Ikuti panduan praktis berikut :
1. Setelah login, klik “Profil Saya” atau “My Profile”
2. Di bagian paling bawah ada menu “Mengenai dirimu” atau “About You” -> isi biodata Anda, atau apa saja yang ingin Anda tulis.3. Klik “Perbarui Profil” atau “Update Profile.”
4. Selesai.
Catatan:
Di kolom profil ini Anda bisa juga merubah password Anda (di sebelah kanan bawah), merubah nama depan dan nama belakang Anda (bagian kiri tengah), dan mengisi alamat situs utama dan/atau email Anda (bagian kiri tengah), men-setting nama yang ditampilkan pada publik (bagian kiri tengah), merubah bahasa blog (Contoh, Bahasa Indonesia) dan mengupload foto Anda (bagian kiri atas).
Untuk upload foto profil:
1. Klik “browse” di bagian kiri atas -> masukkan foto di komputer Anda.
2. Klik menu Upload
3. Setelah foto nongol, klik “Perbarui Profil” atau “Update Profile” (bagian kanan bawah / atas).
1. Setelah login, klik “Profil Saya” atau “My Profile”
2. Di bagian paling bawah ada menu “Mengenai dirimu” atau “About You” -> isi biodata Anda, atau apa saja yang ingin Anda tulis.3. Klik “Perbarui Profil” atau “Update Profile.”
4. Selesai.
Catatan:
Di kolom profil ini Anda bisa juga merubah password Anda (di sebelah kanan bawah), merubah nama depan dan nama belakang Anda (bagian kiri tengah), dan mengisi alamat situs utama dan/atau email Anda (bagian kiri tengah), men-setting nama yang ditampilkan pada publik (bagian kiri tengah), merubah bahasa blog (Contoh, Bahasa Indonesia) dan mengupload foto Anda (bagian kiri atas).
Untuk upload foto profil:
1. Klik “browse” di bagian kiri atas -> masukkan foto di komputer Anda.
2. Klik menu Upload
3. Setelah foto nongol, klik “Perbarui Profil” atau “Update Profile” (bagian kanan bawah / atas).
Step by Step Blog di WordPress ( Part VIII )
Kalangan blogger pemula yang sudah pernah mencoba menulis kode html / javascript di posting dan ingin kode tersebut tampil seperti waktu ditulis mungkin merasa heran karena setelah dipublish jadi berbeda. Contoh, umpamanya Anda menulis kode <> dan ingin tampil persis seperti itu diposting Anda, kenyataannya kode tersebut malah hilang. Ikuti tutorial praktis berikut, oh ya tip ini berlaku baik di posting wordpress atau blogger / blogspot.
A. Konversi Online
1. Kunjungi Encode Decode HTML Converter di sini.
2. Masukkan kode html / javascript yang ingin Anda tampilkan di posting di kotak yang tersedia, terus klik menu “Encode”
3. Copy dan paste hasil encode yang ada dalam kotak ke posting Anda. Selesai.
Catatan: Jangan lupa klik menu “Kode” atau “Code” sebelum memasukkan kode html yang sudah di-encode tadi.
A. Konversi Online
1. Kunjungi Encode Decode HTML Converter di sini.
2. Masukkan kode html / javascript yang ingin Anda tampilkan di posting di kotak yang tersedia, terus klik menu “Encode”
3. Copy dan paste hasil encode yang ada dalam kotak ke posting Anda. Selesai.
Catatan: Jangan lupa klik menu “Kode” atau “Code” sebelum memasukkan kode html yang sudah di-encode tadi.
Step by Step Blog di WordPress ( Part VII )
Salah satu komentator di blog ini menanyakan bagaimana cara membuat dan memasang profile di wordpress dan dipasang disidebar / kolomsisi blog kita seperti yang bisa dilihat sidebar bagian atas di blog ini atau di fatihsyuhud.com.
Caranya tidak sulit bahkan sangat mudah. Ikuti tip praktis berikut:
Jangan lupa sebelum mengikuti langkah ini pastikan widget Anda sudah diaktifkan.
1. Naikkan widget Text atau Teks ke sidebar;
2. Klik dua kali bagian kanan widget tersebut sampai terbuka kotak kosong;
3. Copy/paste kode berikut, dan ganti kata-kata dan link-image / foto dengan kata-kata dan link url foto Anda
I’d love to see many more Indonesian bloggers blog in English, the most-widely-understood world language. So that the world knows and understands more about Indonesia by reading anything written by Blogger Indonesia. Don’t let your voice echoes only in your backyard.
4. Klik “Update change” atau “Perbarui perubahan”
5. Selesai.
Catatan:
1. Kalau belum upload foto, silahkan upload dulu foto Anda yang ganteng dan cantik di wordpress Anda, atau googlepages.com, atau flickr dll.
2. Copy link imagenya (biasanya berakhiran “.jpg” atau “.gif” dll ) dan ganti link image saya di atas dengan link image milik Anda.
Caranya tidak sulit bahkan sangat mudah. Ikuti tip praktis berikut:
Jangan lupa sebelum mengikuti langkah ini pastikan widget Anda sudah diaktifkan.
1. Naikkan widget Text atau Teks ke sidebar;
2. Klik dua kali bagian kanan widget tersebut sampai terbuka kotak kosong;
3. Copy/paste kode berikut, dan ganti kata-kata dan link-image / foto dengan kata-kata dan link url foto Anda
I’d love to see many more Indonesian bloggers blog in English, the most-widely-understood world language. So that the world knows and understands more about Indonesia by reading anything written by Blogger Indonesia. Don’t let your voice echoes only in your backyard.
4. Klik “Update change” atau “Perbarui perubahan”
5. Selesai.
Catatan:
1. Kalau belum upload foto, silahkan upload dulu foto Anda yang ganteng dan cantik di wordpress Anda, atau googlepages.com, atau flickr dll.
2. Copy link imagenya (biasanya berakhiran “.jpg” atau “.gif” dll ) dan ganti link image saya di atas dengan link image milik Anda.
Step by Step Blog di WordPress ( Part VI )
Membuat link ke halaman lain sudah di ajarkan di sini beberapa waktu lalu, yang gunanya untuk mengelink artikel kita sendiri di posting sebelumnya, atau membuat link ke artikel atau blog mlik orang lain yg tulisannya kita kutip. Berikut akan kita bahas cara membuat tautan link yg mengarah ke halaman yg sama (atas, tengah, bawah dll). Contoh seperti “kembali ke atas”, dll . Ini berguna terutama bagi yg postingnya sangat panjang, sehingga link-dalam-satu-halaman ini berfungsi untuk memmepermudah navigasi pembaca. Ikuti langkah berikut:
1. Buat ANCHORNAME seperti ini < A NAME=”pendahuluan”> Tulis apa saja di sini atau dikosongin aja < /A>
Taruh anchor name ini di mana saja yg Anda mau, sebagai contoh, saya taruh anchor link ini sejajar dengan kata “Pendahuluan” di atas. Jadi seperti ini
< A NAME= ”pendahuluan” > Pendahuluan< /A>
Catatan: Kalau ANCHORNAME ditaruh sejajar dengan kata “pendahuluan”, maka link akan mengarah ke bawahnya kata “pendahuluan”, kalau ANCHORNAME ditaruh di atasnya kata “pendahuluan”, maka ketika linkname diklik akan mengarah persis ke kata “pendahuluan”. Untuk lebih jelasnya, silahkan Anda coba-coba sendiri.
2. Buat link name yg diarahkan ke anchor link tersebut, begini kodenya:
Kembali ke atas < /A>
Kode no.2 akan berbentuk link yg kalau diklik akan mengarah ke anchor name yg kita tentukan. Dalam kasus saya kata “Pendahuluan”.
Coba lihat hasilnya, klik link berikut: Kembali ke atas
Catatan:
1. Anchor name yg berupa “pendahuluan” bisa diganti dg kata lain yg anda suka yg penting harus sama dg link name-nya.
2. Unsur LINK NAME adalah permalink URL + #linkname. Jadi url mengarah ke permalink halaman/posting yang sama. Sebagai contoh, permalink posting ini adalah http://afatih.wordpress.com/2007/11/04/membuat-link-dalam-satu-halaman/
maka linkname-nya adalah < A href=”http://afatih.wordpress.com/2007/11/04/membuat-link-dalam-satu-halaman/#pendahuluan” > Kembali ke atas
3. Fungsi lain dari link-dalam-satu-halaman ini adalah untuk footnote, bagi blogger yg membuat tulisan ilmiah dg memakai footnote di halaman yg sama di blognya. Dalam kasus footnore ini, maka ANCHOR NAME diletakkan di footnote, sedang LINKNAME ditaruh di kata-kata tulisan Anda yg merujuk ke footnote. Contoh sangat bagus tulisan ilmiah yang memakai cara ini silahkan lihat tulisan Martin van Burinessen–sarjana Belanda mantan dosen di UIN Ciputat dan Sunan Kalijaga–di sini.
Eh tes lagi yuk, Kembali ke atas
Di wordpress, “Komentar Terbaru” sidebar di blog ini pada dasarnya memakai konsep ANCHORNAME - LINKNAME ini.
1. Buat ANCHORNAME seperti ini < A NAME=”pendahuluan”> Tulis apa saja di sini atau dikosongin aja < /A>
Taruh anchor name ini di mana saja yg Anda mau, sebagai contoh, saya taruh anchor link ini sejajar dengan kata “Pendahuluan” di atas. Jadi seperti ini
< A NAME= ”pendahuluan” > Pendahuluan< /A>
Catatan: Kalau ANCHORNAME ditaruh sejajar dengan kata “pendahuluan”, maka link akan mengarah ke bawahnya kata “pendahuluan”, kalau ANCHORNAME ditaruh di atasnya kata “pendahuluan”, maka ketika linkname diklik akan mengarah persis ke kata “pendahuluan”. Untuk lebih jelasnya, silahkan Anda coba-coba sendiri.
2. Buat link name yg diarahkan ke anchor link tersebut, begini kodenya:
Kembali ke atas < /A>
Kode no.2 akan berbentuk link yg kalau diklik akan mengarah ke anchor name yg kita tentukan. Dalam kasus saya kata “Pendahuluan”.
Coba lihat hasilnya, klik link berikut: Kembali ke atas
Catatan:
1. Anchor name yg berupa “pendahuluan” bisa diganti dg kata lain yg anda suka yg penting harus sama dg link name-nya.
2. Unsur LINK NAME adalah permalink URL + #linkname. Jadi url mengarah ke permalink halaman/posting yang sama. Sebagai contoh, permalink posting ini adalah http://afatih.wordpress.com/2007/11/04/membuat-link-dalam-satu-halaman/
maka linkname-nya adalah < A href=”http://afatih.wordpress.com/2007/11/04/membuat-link-dalam-satu-halaman/#pendahuluan” > Kembali ke atas
3. Fungsi lain dari link-dalam-satu-halaman ini adalah untuk footnote, bagi blogger yg membuat tulisan ilmiah dg memakai footnote di halaman yg sama di blognya. Dalam kasus footnore ini, maka ANCHOR NAME diletakkan di footnote, sedang LINKNAME ditaruh di kata-kata tulisan Anda yg merujuk ke footnote. Contoh sangat bagus tulisan ilmiah yang memakai cara ini silahkan lihat tulisan Martin van Burinessen–sarjana Belanda mantan dosen di UIN Ciputat dan Sunan Kalijaga–di sini.
Eh tes lagi yuk, Kembali ke atas
Di wordpress, “Komentar Terbaru” sidebar di blog ini pada dasarnya memakai konsep ANCHORNAME - LINKNAME ini.
Step by Step Blog di WordPress ( Part V)
Barusan saya jalan-jalan ke Musik Pribumi-nya Gimbal, Saya lihat dia sering menempelkan foto di setiap postingnya. Sayangnya, tampaknya posisi foto menurut saya kurang fashionable: foto atau image-nya tidak menempel berdampingan dengan artikel, tapi berada di antara judul dan tulisan. Kurang jelas apa itu disengaja atau dia tidak tahu caranya mendampingkan foto (embedded) dengan tulisan artikel seperti di blog saya ini. Berikut cara mudah dan praktis memposisikan foto secara berdampingan dengan artikel :
1. Setelah Anda mengklik ‘Send Editor’ foto ke posting di wordpress, klik menu “Kode” atau “Code” yang terdapat di bawah judul.
2. Di akhir link image (sebelum tanda …/> < /a>)tambahkan kode berikutborder="0" style="float: left; margin: 0px 10px 10px 0px"
3. Klik menu “Visual” setelah tampilan ok, klik “Tampilkan” atau “Publish”
4. Selesai.
Catatan:
Kata “left” berarti posisi foto/gambar di sebelah kiri, ubah menjadi “right” kalau ingin menaruhnya di sebelah kanan.Tips bagi yg belum tahu sama sekali cara pasang foto di posting wordpress :
1. Di bagian paling bawah kotak posting, klik menu “Browse” –> pilih foto/gambar/image di komputer.
2. Kasih judul dan deskripsi di menua “Judul” dan “Deskripsi” –> ini tidak wajib, cuma menambah visibilitas di search angine.
3. Klik Upload
4. Setelah nongol fotonya, arahkan mouse ke kotak posting bagian mana foto akan ditempatkan. Contoh, klik di bagian kiri atas.
5. Kembali ke foto, klik menu “Kirim ke editor” atau “Send to editor”
6. Klik menu “Kode” atau “Code” dan tambahkan kode berikut di akhir link sebelum kode … /> < /a>:border="0" style="float: left; margin: 0px 10px 10px 0px"
7. Klik menu “Visual” untuk melihat hasilnya. Kalau puas, klik “Tampilkan” atau “Publish”
8. Selesai.
Untuk Edit posisi foto di posting blogger.com / BlogspotSetelah foto diupload di posting blogger.com / blogspot, akan tampak foto dan posting tidak sejajar / bersebelahan. Untuk membuat posting Anda bersebelahan dengan paragraf pertama, ikuti langkah berikut:Klik menu “Compose” (bagian kanan atas kotak posting) ;Arahkan mouse cursor ke kata pertama dalam tulisan -> klikTekan Backspace keyboard Anda. Maka tulisan akan naik, teruskan sampai sejajar dengan foto.
1. Setelah Anda mengklik ‘Send Editor’ foto ke posting di wordpress, klik menu “Kode” atau “Code” yang terdapat di bawah judul.
2. Di akhir link image (sebelum tanda …/> < /a>)tambahkan kode berikutborder="0" style="float: left; margin: 0px 10px 10px 0px"
3. Klik menu “Visual” setelah tampilan ok, klik “Tampilkan” atau “Publish”
4. Selesai.
Catatan:
Kata “left” berarti posisi foto/gambar di sebelah kiri, ubah menjadi “right” kalau ingin menaruhnya di sebelah kanan.Tips bagi yg belum tahu sama sekali cara pasang foto di posting wordpress :
1. Di bagian paling bawah kotak posting, klik menu “Browse” –> pilih foto/gambar/image di komputer.
2. Kasih judul dan deskripsi di menua “Judul” dan “Deskripsi” –> ini tidak wajib, cuma menambah visibilitas di search angine.
3. Klik Upload
4. Setelah nongol fotonya, arahkan mouse ke kotak posting bagian mana foto akan ditempatkan. Contoh, klik di bagian kiri atas.
5. Kembali ke foto, klik menu “Kirim ke editor” atau “Send to editor”
6. Klik menu “Kode” atau “Code” dan tambahkan kode berikut di akhir link sebelum kode … /> < /a>:border="0" style="float: left; margin: 0px 10px 10px 0px"
7. Klik menu “Visual” untuk melihat hasilnya. Kalau puas, klik “Tampilkan” atau “Publish”
8. Selesai.
Untuk Edit posisi foto di posting blogger.com / BlogspotSetelah foto diupload di posting blogger.com / blogspot, akan tampak foto dan posting tidak sejajar / bersebelahan. Untuk membuat posting Anda bersebelahan dengan paragraf pertama, ikuti langkah berikut:Klik menu “Compose” (bagian kanan atas kotak posting) ;Arahkan mouse cursor ke kata pertama dalam tulisan -> klikTekan Backspace keyboard Anda. Maka tulisan akan naik, teruskan sampai sejajar dengan foto.
Step by Step Blog di WordPress ( Part IV)
Saya pikir semua pengguna wordpress sudah tahu cara buat “read more” di wordpress. Ternyata masih ada yang tanya di komentar posting di sini. Berbeda dengan blogger.com / blogspot, membuat “read more” atau “baca selanjutnya” atau “read the rest of this entry” di wordpress itu sangat mudah. Ikuti langkah berikut :
1. Setelah login ke account wordpress Anda, Klik menu “tulis” atau “write”
2. Di bawah kotak judul / title, ada menu VISUAL dan Kode / Code –> klik menu Kode / Code
3. Di bawahnya ada deretan menu b i link. Klik menu “more”, maka di kotak posting Anda akan keluar tulisan
4. Tulisan atau posting Anda yang ingin Anda tampilkan di halaman maka harus berada di atas , sedang posting / artikel yang ingin anda “sembunyikan” yang baru tampak setelah pembaca mengklik “read more” taruh di bawahnya
1. Setelah login ke account wordpress Anda, Klik menu “tulis” atau “write”
2. Di bawah kotak judul / title, ada menu VISUAL dan Kode / Code –> klik menu Kode / Code
3. Di bawahnya ada deretan menu b i link. Klik menu “more”, maka di kotak posting Anda akan keluar tulisan
4. Tulisan atau posting Anda yang ingin Anda tampilkan di halaman maka harus berada di atas , sedang posting / artikel yang ingin anda “sembunyikan” yang baru tampak setelah pembaca mengklik “read more” taruh di bawahnya
Step by Step Blog di WordPress ( Part III )
Di Wordpress.com, mengaktifkan widget di sidebar atau kolomsisi boleh dikatakan “wajib”, sebab tanpa itu kita tidak akan dapat menambah aksesoris blog sesuai dengan yang kita inginkan. Aksesoris yang saya maksud, seperti yang bisa Anda lihat di sidebar blog ini, seperti Text Area, RSS dari blog lain, Recent Comment/Pembaca Terbaru mybloglog.com, dan lain-lain. Ikuti tip praktis berikut untuk mulai mengaktifkan widget blog Anda di sidebar.
1. Setelah login -> klik “Tampilan” atau “Presentation”
2. Klik “Widget”
3. Ada menu “Widget yang Tersedia”, di bawahnya ada kotak-kotak kecil (widget) -> Tarik kotak yang Anda inginkan ke “Kolom Sisi” atau “Sidebar” di atasnya. Contoh, tarik widget “Tulisan Terbaru” ke atas.
Tip: Cara narik: arahkan mouse ke widget -> klik kiri terus-menerus ->tarik ke “Kolom Sisi” atau “Sidebar”
4. Klik “Simpan Perubahan” atau “Update Change” (lihat bagian sebelah kanan atas dan/atau bawah).
5. Selesai. Widget Anda sudah aktif. Sidebar blog Anda sudah diisi widget. Ulangi hal serupa untuk memindahkan widget-widget lain yang masih “nganggur” di bawah. Seperti widget “Arsip”, “Komentar Terbaru”, “Meta”, “Teks”, “RSS”, dan lain-lain.
Catatan:
Untuk widget TEXT, setelah dinaikkan ke sidebar/kolom-sisi, Anda perlu mengeditnya supaya berfungsi. Caranya, klik dua-kali TEXT tersebut, setelah itu isi dengan kode html yang Anda inginkan. Contoh, isi kode tukar link saya:
Setelah itu, klik “Simpan Perubahan” atau “Update Changes”
Untuk widget RSS, setelah naikkan, klik dua kali di kotak kecil widget tersebut, setelah terbuka isi RSS blog atau situs yang ingin Anda pasang. Contoh, pasang RSS ini -> http://feeds.feedburner.com/zoelranto
Jangan lupa menyimpan dengan cara klik “Simpan Perubahan” atau “Update Changes”.
1. Setelah login -> klik “Tampilan” atau “Presentation”
2. Klik “Widget”
3. Ada menu “Widget yang Tersedia”, di bawahnya ada kotak-kotak kecil (widget) -> Tarik kotak yang Anda inginkan ke “Kolom Sisi” atau “Sidebar” di atasnya. Contoh, tarik widget “Tulisan Terbaru” ke atas.
Tip: Cara narik: arahkan mouse ke widget -> klik kiri terus-menerus ->tarik ke “Kolom Sisi” atau “Sidebar”
4. Klik “Simpan Perubahan” atau “Update Change” (lihat bagian sebelah kanan atas dan/atau bawah).
5. Selesai. Widget Anda sudah aktif. Sidebar blog Anda sudah diisi widget. Ulangi hal serupa untuk memindahkan widget-widget lain yang masih “nganggur” di bawah. Seperti widget “Arsip”, “Komentar Terbaru”, “Meta”, “Teks”, “RSS”, dan lain-lain.
Catatan:
Untuk widget TEXT, setelah dinaikkan ke sidebar/kolom-sisi, Anda perlu mengeditnya supaya berfungsi. Caranya, klik dua-kali TEXT tersebut, setelah itu isi dengan kode html yang Anda inginkan. Contoh, isi kode tukar link saya:
Setelah itu, klik “Simpan Perubahan” atau “Update Changes”
Untuk widget RSS, setelah naikkan, klik dua kali di kotak kecil widget tersebut, setelah terbuka isi RSS blog atau situs yang ingin Anda pasang. Contoh, pasang RSS ini -> http://feeds.feedburner.com/zoelranto
Jangan lupa menyimpan dengan cara klik “Simpan Perubahan” atau “Update Changes”.
Step by Step Blog di WordPress ( Part II )
Deretan menu di blog saya bagian atas seperti “About”, “Refleksi”, “Opini”, “Tip Menulis” itu adalah salah satu ciri khas dari blog dalam wordpress yang tidak ada di blogger.com/blogspot. Dalam istilah Wordpress itu disebut Pages atau Halaman. Pages atau Halaman ini adalah halaman statis yang tidak masuk dalam arsip posting. Apa gunanya? Lihat keterangannya di bawah. Berikut cara membuat Pages atau Halaman (statis) di Wordpress.
1. Setelah login, klik “Kelola” atau “Manage”
2. Klik “Halaman” atau “Page”
3. Klik menu “Buat Halaman Baru” atau “Create New Page”
4. Di “Judul Halaman” -> tulis nama halaman. Contoh, Refleksi
5. Klik menu “Tampilkan” atau “Publish”
6. Selesai. Anda sudah berhasil membuat Pages/Halaman statis di blog Anda.
Apa isi atau fungsi Pages/Halaman?
Macam-macam, terserah Anda. Isinya bisa berupa keterangan diri seperti di About blog saya atau daftar link-link posting blog Anda atau bisa juga berupa link-link situs penting atau blogrolls, dll.
Cara Mengedit Pages/Halaman
1. Klik “Kelola” / “Manages” -> klik Halaman / Pages
2. Klik menu “Ubah” atau “Edit” di Pages/Halaman yang baru Anda buat tadi. Contoh, Refleksi.
3. Isi kotak posting sesuai yang Anda inginkan.
1. Setelah login, klik “Kelola” atau “Manage”
2. Klik “Halaman” atau “Page”
3. Klik menu “Buat Halaman Baru” atau “Create New Page”
4. Di “Judul Halaman” -> tulis nama halaman. Contoh, Refleksi
5. Klik menu “Tampilkan” atau “Publish”
6. Selesai. Anda sudah berhasil membuat Pages/Halaman statis di blog Anda.
Apa isi atau fungsi Pages/Halaman?
Macam-macam, terserah Anda. Isinya bisa berupa keterangan diri seperti di About blog saya atau daftar link-link posting blog Anda atau bisa juga berupa link-link situs penting atau blogrolls, dll.
Cara Mengedit Pages/Halaman
1. Klik “Kelola” / “Manages” -> klik Halaman / Pages
2. Klik menu “Ubah” atau “Edit” di Pages/Halaman yang baru Anda buat tadi. Contoh, Refleksi.
3. Isi kotak posting sesuai yang Anda inginkan.
Step by Step Blog di WordPress ( Part I )
1. Buka www.wordpress.com
2. Klik Sign Up
3. Isi format.
a. Username: -> isi nama blog sesuai dengan keinginan (paling sedikit empat huruf/angka)
b. Password: Isi password/kata sandi (sedikitnya enam huruf/angka)
c. Confirm: Ulangi password yang sama dengan di atas.
d. Email Address: Isi email Anda (apabila belum punya email, buat dulu di gmail.com atau yahoomail.com)
e. Legal flotsam: beri tanda tik di kotak yang tersedia sebagai tanda “setuju” dengan perjanjian.
f. Beri tanda tik pada menu “Gimme a blog” (biasanya sudah otomatis ada tanda tik di sini).g. Klik “Next”h. Blog Title -> Isi judul yang sesuai.i. Language -> Pilih Bahasa Indonesia.j. Privacy -> Kasih tanda tik (biasanya sudah ada otomatis).
4. Klik Sign Up
5. Akan muncul pesan sebagai berikut:
"Your account is now active!You are now logged in as (username Anda).An email with your username, password, Akismet API key and important links has been sent to your email address.Write a post, change your template or visit the homepage."
Itu berarti Anda sudah berhasil membuat blog. Silahkan login ke blog Anda. Berikut alamat penting untuk Anda:
a. Untuk login, buka: http://namabloganda.wordpress.com/login.php
b. Isi username (=nama blog) dan password.
c. Klik “Write” atau “Tulis” untuk mulai membuat posting.
d. Klik “Publish” atau “Tampilkan”
6. Selesai (kalau mau udahan, jangan lupa klik “Log Out”).
Catatan:
Di wordpress.com, satu account hanya untuk satu blog. Ini berbeda dengan blogger.com/blogspot di mana satu account bisa untuk membuat beberapa blog.
Kelebihan wordpress.com dibanding blogger.com adalah
(1) comment friendly: pengunjung mudah berkomentar karena kotak komentar langsung terbuka di bawah posting. Bagi Anda yang suka dikomentarin, wordpress cocok untuk Anda;
(2) Posting terbaru akan muncul beberapa saat di Dashboard (Menu Utama) seluruh pemakai wordpress.com, apabila posting Anda cukup menarik Anda juga berkesempatan masuk BOTD (best of the day) yakni 10 posting terbaik hari itu dan akan muncul selama sehari di Menu Utama (Dashboard) seluruh pemakai wordpress.com. Untuk BOTD ini diklasifikasi berdasar bahasa. Pastikan Anda memilih Bahasa Indonesia pada saat mendaftar (lihat poin 3.i.)
Kekurangan wordpress.com dibanding blogger.com/blogspot adalah javascript tidak berfungsi (disabled) artinya Anda tidak bisa memasang iklan apapun–AdSense, Adbrite, dll–di wordpress.com. Tidak masalah buat blogger yang memang betul-betul ingin ngeblog saja, tanpa ada niat untuk iseng-iseng pasang iklan. Bagi yang ingin pasang iklan, dapat juga di blog gratis yang pakai software wordpress juga seperti blogsome.com atau blogs.ie. Sayangnya, kedua penyedia blog gratis ini masih memakai software wordpress lama (tak ada fasilitas widget, dan lain-lain).
2. Klik Sign Up
3. Isi format.
a. Username: -> isi nama blog sesuai dengan keinginan (paling sedikit empat huruf/angka)
b. Password: Isi password/kata sandi (sedikitnya enam huruf/angka)
c. Confirm: Ulangi password yang sama dengan di atas.
d. Email Address: Isi email Anda (apabila belum punya email, buat dulu di gmail.com atau yahoomail.com)
e. Legal flotsam: beri tanda tik di kotak yang tersedia sebagai tanda “setuju” dengan perjanjian.
f. Beri tanda tik pada menu “Gimme a blog” (biasanya sudah otomatis ada tanda tik di sini).g. Klik “Next”h. Blog Title -> Isi judul yang sesuai.i. Language -> Pilih Bahasa Indonesia.j. Privacy -> Kasih tanda tik (biasanya sudah ada otomatis).
4. Klik Sign Up
5. Akan muncul pesan sebagai berikut:
"Your account is now active!You are now logged in as (username Anda).An email with your username, password, Akismet API key and important links has been sent to your email address.Write a post, change your template or visit the homepage."
Itu berarti Anda sudah berhasil membuat blog. Silahkan login ke blog Anda. Berikut alamat penting untuk Anda:
a. Untuk login, buka: http://namabloganda.wordpress.com/login.php
b. Isi username (=nama blog) dan password.
c. Klik “Write” atau “Tulis” untuk mulai membuat posting.
d. Klik “Publish” atau “Tampilkan”
6. Selesai (kalau mau udahan, jangan lupa klik “Log Out”).
Catatan:
Di wordpress.com, satu account hanya untuk satu blog. Ini berbeda dengan blogger.com/blogspot di mana satu account bisa untuk membuat beberapa blog.
Kelebihan wordpress.com dibanding blogger.com adalah
(1) comment friendly: pengunjung mudah berkomentar karena kotak komentar langsung terbuka di bawah posting. Bagi Anda yang suka dikomentarin, wordpress cocok untuk Anda;
(2) Posting terbaru akan muncul beberapa saat di Dashboard (Menu Utama) seluruh pemakai wordpress.com, apabila posting Anda cukup menarik Anda juga berkesempatan masuk BOTD (best of the day) yakni 10 posting terbaik hari itu dan akan muncul selama sehari di Menu Utama (Dashboard) seluruh pemakai wordpress.com. Untuk BOTD ini diklasifikasi berdasar bahasa. Pastikan Anda memilih Bahasa Indonesia pada saat mendaftar (lihat poin 3.i.)
Kekurangan wordpress.com dibanding blogger.com/blogspot adalah javascript tidak berfungsi (disabled) artinya Anda tidak bisa memasang iklan apapun–AdSense, Adbrite, dll–di wordpress.com. Tidak masalah buat blogger yang memang betul-betul ingin ngeblog saja, tanpa ada niat untuk iseng-iseng pasang iklan. Bagi yang ingin pasang iklan, dapat juga di blog gratis yang pakai software wordpress juga seperti blogsome.com atau blogs.ie. Sayangnya, kedua penyedia blog gratis ini masih memakai software wordpress lama (tak ada fasilitas widget, dan lain-lain).
Senin, Desember 24, 2007
Ubud Monkey Place
Daerah ini benar-benar daerah monyet....... tapi untungnya orang-orang disini gak kelakuannya seperti monyet......Kintamani Surga Dunia
Kintamani yang
menakjubkan
ini gambar diambil sewaktu habis dari Istana Raja.......
cuaca disini sejuk banget, buat siapa saja yg singgah pasti merasa betah.....
menakjubkanini gambar diambil sewaktu habis dari Istana Raja.......
cuaca disini sejuk banget, buat siapa saja yg singgah pasti merasa betah.....
Touring to Bali
Ternyata enak juga y.... bisa jalan ke Bali....
Ternyata enak juga y.... bisa ngunjungi Bali...
Aku Bangga pada diriku sendiri
Aku Bangga pada teman-temanku
Aku Bangga pada orang-orang yg sayang padaku
Tank's God.....tlah Kau berikan kesempatan padaku
Melihat keagungan ciptaan-Mu
foto lagi di Istana Raja Tampak Siring
Langganan:
Postingan (Atom)