Membuat Tukar Banner, Edisi Komplit

Meski banyak yang sudah mengerti bagaimana cara membuat tukar Banner, tapi banyak pula yang belum memilikinya. Entah belum tahu cara pembuatan ataupun belum tahu cara mendapatkan kodenya. Nah, kali ini saya berikan tutorial cara membuat banner, mulai dari yang mudah sampai yang cukup sulit. Bagaimana upload beserta cara mendapatkan kode dan juga menampilkannya di blog kita.

1. Mengapa Kita Membutuhkan Banner?
Seperti halnya tukar link, Banner yang yang mengandung link kita juga sangat penting untuk mendongkrak posisi kita di SE. Kegunaannya sama, tetapi Banner akan jauh lebih menarik mata pembaca daripada sekedar text. Pembaca cenderung melirik info berupa gambar ketimbang tulisan.

2. Bagaimana Sebaiknya Banner?
Ukuran secukupnya. Gunakan ukuran standart misal 125 x 125. Jika banner terlalu kecil maka Banner tak akan terlihat. Jika terlalu besar, bebrapa blog akan males memsang banner kita karena menghabiskan halaman blog kita.

Banner baiknya unik dan menarik. Memang telah ada beberapa web penyedia pembuat banner gratis, tetapi jika kita menggunakan template mereka tentu ada berjuta kesamaan model di dunia ini dengan banner kita. Jika ingin membuat unik, rancanglah sendiri di Corel atau Photoshop.

Tetapi tetap saya akan memberikan cara mudah (melalui jasa pembuatan web) dan cara agak panjang dengan merancang dulu di Corel Draw. (Saya pilih corel lagi hehehe)

3. Membuat Banner Mudah
Nah, saya beri tutor dulu yang mudah.
- Buka http://cooltext.com/
- Pilih model banner
- Lakukan setting (mudah kok ikuti saja)
- Kalau sudah klik Render Logo
- Tunggu bebrapa saat tunggu proses
- Kalau sudah klik DOwnload Logo
- Simpan di komputer kamu
- Banner sudah jadi....

4. MEmbuat Baner Melalui Corel
Nah, kali ini menggunakan corel Draw
Langkah-langkahnya adalah...
- Setting Banner
- Export

Setting Banner
Setting Banner gak musti rumit, hanya berbekal kotak dan text sudah bisa membuat yang unik di corel draw.
- Buat rectangle
Klik tanda kotak di sebelah kiri jendela corel
- Beri Warna
Klik objek dulu lalu klik warna di sebelah kanan


- Tambahkan tulisan
Klik tanda "A" di toolbar sebelah kiri, ketikkan tulisan, atur jenis huruf dan ukurannya


- Atur tulisan dan kotak sehingga bagus
- Jika sudah aktifkan gambar dan text
(Ctrl+A lalu Ctrl+G untuk menggabungkan)

Export
- Aktifkan objek yang sudah jadi
- Klik File, lalu pilih Export (Cara Cepat telkan Ctrl + E)


- Muncul jendela Export, pilih lokasi penyimpanan file
- Isikan nama pada file name
- Klik Options


- Centang pada Selected Only
- Klik Export
- Klik OK, lalu OK lagi

Maka banner Anda sudah tersimpan di komputer


Upload Banner ke Blog
Setelah menggunakan cara pembuatan mudah ataupun lewat corel, tugas kita adalah upload ke webhosting. Tapi saya akan memberikan cara mudah upload ke blogger sekaligus mendapatkan kodenya.
1. Login ke blogger
2. Buat postingan baru (pilih Compose bukan Edit HTML)
3. Unggah gambar yang telah di buat dari komputer (pilih posisi tengah ya...)
4. Maka di halaman postingan akan muncul gambar kaaaan
5. Klik pada gambar dan beri link
(Klik gambar lalu tekan tombol insert hiperlink pada toolbar, isikan alamat tujuan)

Nah, jika sudah jadi berpindahlah dari tab compose ke tab Edit HTML
- Maka gambar berganti menjadi kode HTML
- Copy semua dan Simpan di Word dengan nama Kode Banner 1

Encode Kode
- Bukalah site berikut http://centricle.com/tools/html-entities/
- Copy kode HTML padaKode Banner 1
- Paste pada kotak isian di centricle
- Klik Encode
- Maka otomatis kode akan berubah
- Copy kode tersebut dan simpan di Word dengan nama Kode Banner 2

Menampilkan Banner kita dan Kode Di Blog
Selain menampilkan kodenya kita juga harus menampilkan banner kita agar sobat blogger bisa tahu bagaimana banner kita sehingga menjadi pertimbangan bagi mereka.

- Menuju Tata Letak (Kotak edit postingan ditutup tidak masalah)
- Elemen Halaman
- Add Gadget
- Pilih HTML/Java Script
- Lalu isikan kode HTML berikut untuk Gadget Anda

Copas Kode Banner 1 disini

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 250px; height: 100px;" name="txt">
Copas Kode Banner dua disini
</textarea></p></form>

Lihat hasilnya setelah Anda simpan

Promosikan Tukar Banner
Nah, kalau sudah tinggal Anda ajak blogger lain untuk tukar banner
Selamat mencoba...