Cara Membuat Kursor Blog Sendiri

Kali ini saya akan menerangkan kepada sobat sekalian, bagaimana Cara Membuat Kursor Blog Sendiri. Kalau biasanya sobat masih menggunakan kursor berbentuk anak panah atau menggunakan gambar kursor yang sudah jadi, setelah membaca postingan ini saya yakin kursor blog sobat sudah akan tampil lebih keren sesuai keinginan.

Jadi pertama kali yang harus sobat lakukan adalah membuat gambar kursornya sendiri. Sobat bisa mengambil gambarnya dari google dengan sedikit pengeditan ataupun bisa membuat gambarnya sendiri. Saya menggunakan contoh kursor badan spongebob ini :

Ukurannya silakan sesuaikan sendiri dengan keinginan sobat. Akan lebih baik jangan terlalu besar tetapi jangan juga terlalu kecil. Namun gambar diatas belum siap untuk dijadikan kursor blog, karena harus melalui sedikit pengeditan diphotoshop. Oke kita lanjut ke step selanjutnya. 

1. Setelah sobat sudah mempunyai gambar yang siap dijadikan kursor, kita akan melakukan sedikit pengeditan gambar tersebut dengan photoshop. Disini saya menggunakan Photoshop CS3, namun sobat bisa menggunakan photoshop yang versi berbeda juga kok. Pertama, sobat masuk ke photoshop dan buka file gambar sobat yang ingin dijadikan kursor.

2. Kemudian perhatikan layer pada pojok kanan bawah,

Disana terdapat sebuah layer dengan nama "Background" dan masih terkunci. Supaya bisa diedit sobat harus membuat layer Background Copy nya. Caranya silakan drag layer background tersebut ke icon "create new layer" disebelah icon tong sampah (delete). Atau sobat bisa lakukan juga dengan cara Klik Kanan pada layer Background pilih Duplicate Layer lalu OK. Maka layer bernama Background Copy pun akan muncul seperti ini :

2. Selanjutnya sobat delete layer bernama Bacground dengan cara Klik layer Backgroundnya lalu drag ke icon tong sampah (delete) atau dengan cara Klik Kanan >> Delete Layer.

Setelah itu hanya akan tersisa layer Background Copy saja.

3. Kemudian perhatikan toolbar disamping kiri photoshop dan pilih "Quick Selection Tool (W)". Iconnya seperti berikut :

4. Setelah sobat memilih Quick Selection Tool silakan klik ke bagian putih atau bidang putih pada gambar kursor sobat, hingga menjadi seperti ini :

tampak bayang-bayang air pada gambar

Step diatas adalah bagian kita menseleksi bagian mana yang ingin kita hapus. Harus diperhatikan Quick Selection Tool nya ada pada bagian Tool +

5. Setelah sobat menseleksi bagaian yang ingin dihapus seperti step diatas, tekan "Delete" pada keyboard sobat lalu tekan CTRL+D, dan hasilnya akan seperti ini :

Bagian yang diseleksi akan terhapus dan menjadi bidang kotak-kotak. Bidang kotak-kotak tersebut akan membuat bidang tersebut TRANSPARAN ketika digunakan menjadi kursor nantinya. Jadi sobat sudah paham kan dari tadi kita lagi ngapain :D

6. Selanjutnya silakan sobat SAVE dengan format PNG. Ingat ya sobat harus PNG, karna kalau tidak PNG bagian yang diseleksi tadi tidak akan transparan ketika digunakan nantinya.

7. Setelah gambar kursor siap digunakan, silakan sobat hosting gambarnya dan copy URL gambar tersebut. Saya pribadi menggunakan http://beta.photobucket.com untuk melakukan hosting gambar. Bagi yang belum mengerti mengenai hosting gambar dan belum mempunyai akun di photobucket silakan baca tutorialnya DISINI.

8. Setelah sobat mendapatkan URL gambarnya silakan perhatikan HTML berikut :

<style type="text/css">

body{cursor: url("http://i1064.photobucket.com/albums/u378/dudukanteng/kursor.png"), auto;}

</style>

delete bagian yang saya beri background kuning dan GANTI/PASTE kan dengan URL gambar sobat.

9. Terakhir tinggal pemasangan HTML di blog, yaitu dengan cara :

Dashboard >> Tata Letak >> Add Gadget >> HTML/Javascript >> pastekan dikotak HTMLnya >> SAVE

dan kursor keren pun sudah bisa sobat nikmati pada blog sobat.

Bagaimana, mudah bukan Cara Membuat Kursor Blog Sendiri? sobat yang masih newbie bisa mencoba dengan kursor spongebob yang saya buat diatas. Kalau ada pertanyaan silakan ketik dikotak komentar yaaa.

Selamat mencoba :)

Read more »»  

Cara Membuat Header Ngelink

Halo sobat semua . . .

Kalian pernah gak sih ngeliat header yang unik-unik, keren-keren dan berisikan icon-icon media sosial yang bisa diklik langsung dari headernya ? pasti pernah donk sobat. Nah hari ini saya akan sedikit berbagi mengenai hal tersebut, bagaimana cara untuk Membuat Header Ngelink dengan menggunakan software Dreamweaver. Yaaa, untuk membuat header seperti itu sobat harus mempunyai software Dreamwevernya terlebih dahulu. Sobat silakan download sendiri yaaa karna saya tidak menyediakan link downloadnya.

Disini saya menggunakan software Macromedia Dreamweaver 8 untuk membuat header yang bisa ngelink ke tempat yang kita inginkan. Bagaimana cara membuatnya ? Silakan simak dengan baik penjelasannya berikut ini :

1. Silakan sediakan gambar yang akan sobat jadikan header. Pertama sobat buka software Dreamweavernya pastinya, setelah softwarenya terbuka silakan pilih HTML.

2. Setelah itu akan tampil lembar kerja dreamweavernya, tampilannya kurang lebih seperti ini :

Lembar kerja dreamweavernya akan berbentuk tampilan split seperti gambar diatas. Dimana bagian (1) adalah lembar untuk HTML dan lembar (2) adalah lembar yang akan menampilkan gambar header sobat nantinya.

3. Setelah masuk pada lembar kerja, sobat silakan lihat dideretan toolbal Pilih Insert lalu Image.

4. Selanjutnya silakan masukkan gambar yang akan sobat jadikan header, kemudian klik OK.

Jika setelah step ini muncul notifikasi berjudul "Image Tag Accessibility Attributes", notifikasi itu bisa sobat abaikan saja dengan mengklik Close.

5. Setelah step diatas gambar header sobat akan masuk ke lembar kerja. Kemudian perhatikan pada bagian pojok kiri bawah akan tampil icon seperti ini :

Icon ini yang nantinya akan menyeleksi bagian yang ingin sobat beri link pada gambar header sobat.

Jika bagian yang ingin sobat beri link berbentuk persegi silakan pilih icon yang berbentuk persegi, jika bagian yang ingin diberi link berbentuk lingkaran silakan pilih lingkaran dan jika bagian yang ingin diberi link itu tidak beraturan silakan pilih icon yang terakhir yaitu Polygon.

 6. Silakan mulai menyeksi bagian yang sobat ingin beri link dengan memilih salah 1 icon pada gambar diatas. Kemudian klik pada tepi-tepi bagian yang ingin di link tersebut hingga ada warna kebiru-biruan yang menutupi bagian yang ingin diberi link. Ilustrasinya sebagai berikut :

 Pada gambar diatas saya memilih Polygon untuk gambar yang tidak beraturan.

7. Setelah bagian itu tertutup dengan rapi dan sesuai keinginan. Silakan perhatikan seperti gambar berikut :

Pada step ini silakan sobat masukkan link yang ingin dituju pada bagian yang sudah diseleksi tadi. Bagian target bisa sobat isi dengan _blank (terbuka di new tab) atau _self (terbuka di tab yang sama).

8. Lakukan step 6 dan 7 secara berurutan pada semua bagian yang ingin diberi link. Jika semua bagian yang ingin diberi link sudah diseleksi, silakan sobat hosting gambar header tadi untuk mendapatkan URL nya. Saya pribadi biasa menggunakan photobucket, bagi yang belum memiliki akun silakan masuk ke alamat photobucket tersebut dan registrasi serta login dan UPLOAD gambar header sobat tadi untuk mendapatkan URLnya. Untuk lebih jelasnya silakan baca tutorialnya DISINI.

9. Jika URL gambar headernya sudah didapatkan, silakan copy lalu perhatikan pada lebar kerja bagian HTML.

Perhatikan setelah <img src=" terdapat nama file header sobat tadi, bagian itu sobat HAPUS dan GANTI/PASTE dengan URL gambar header sobat tadi.

10. Setelah sobat pastekan URL ditempat yang saya jelaskan diatas, copy bagian seperti yang saya block pada gambar dibawah :

Silakan COPY bagian antara <body> copy semua htmlnya </body>.

11. Hal yang terakhir adalah pastekan html tersebut ke blog sobat.

Dashboard >> Tata Letak >> Add Gadget >> HTML >> Pastekan dikotak HTMLnya tanpa judul >> SAVE

Setelah tersave silakan geser HTMLnya ke bagian atas pada posisi header dan simpan setelan

Header berlink pun sudah bisa sobat lihat pada blog sobat, mudah bukan ?

Semua sudah saya jelaskan secara detail dan bisa sobat praktekan langsung dirumah. Jika ada yang ingin ditanyakan mengenai Cara Membuat Header Ngelink bisa ditanyakan dikotak komentar. Terimakasih . . .

Read more »»  

Cara Hosting Gambar Di Photobucket

Photobucket adalah situs yang menyediakan layanan untuk menyimpan (hosting) image dengan tujuan sebagai foto album online, menyimpan image template website, sharing gambar dan sebagainya. Ada banyak situs lain yang sejenis diantaranya imageshack, picassa, flickr, tinypic dll. Dalam photobucket itu sendiri kita dalam mengambil URL gambar yang telah kita hosting tadi. Biasanya diperlukan para blogger dalam hal design, seperti untuk header, banner, kursor dan sebagainya.

Nah sekarang saya akan menjelaskan bagaimana cara menggunakan atau melakukan hosting di photobucket itu sendiri.

1. Buka situs http://beta.photobucket.com dan jika belum memiliki akun, silakan signup atau untuk mempermudah signup menggunakan akun Facebook atau Twitter. Jika signup menggunakan Fb atau twitter akan diminta pernyataan persetujuan, sobat tinggal klik izinkan saja. Setelah itu akan dipandu untuk mengisi nama pengguna dan pilih Free hosting.

2. Apabila akun sobat sudah siap digunakan, silakan menuju ke HOME lalu klik Upload atau Start Uploading.

3. Kemudian Klik Browse Files dan pilih gambar mana yang akan dihosting.

4. Setelah proses Uploadnya sukses klik "VIEW LIBRABRY", dan sobat akan diarahkan ke Album photobucket sobat. Dalam album tersebut, klik gambar yang ingin sobat ambil URLnya. Lalu perhatikan pada sidebar sebelah kanan akan muncul box seperti gambar dibawah ini :

Sobat dapat mengcopy DIRECT LINK nya dengan cara mengklik HTMLnya saja, tidak perlu diblock - klik kanan - copy. Dengan mengklik bagian HTML di Direct Link nya sekali, HTML nya akan tercopy secara otomatis.

URL pun siap digunakan :)

Selamat mencoba.

Read more »»