Cara Membuat Banner Link

Dalam pergaulan dengan sesama blogger adakalanya kita saling tukar-menukar Link blog kita masing-masing untuk di pasang di blog teman, dengan maksud agar semakin banyak orang yang singgah di blog kita. Kita bisa dengan mudah membuat link itu dengan berupa tulisan yang di sisipi dengan kode link alamat blog kita, tapi untuk lebih mempercantiknya kita bisa juga memanfaatkan gambar/logo/banner sebagai media link blog kita. Contoh Banner Link bisa anda lihat pada sidebar widget blog saya di kolom Link and Banner. Saya membuat dahulu gambar untuk dijadikan banner dengan bantuan Photoshop, jadi bagi anda yang suka oprek-oprek Photoshop anda bisa dengan mudah membuatnya. Anda bisa memakai gambar hidup (.gif) agar lebih cantik. Well, cara-caranya adalah sebagai berikut.

• First of all, siapkan dulu gambar yang akan kita gunakan, anda bisa membuatnya dengan bantuan aplikasi grafis semisal Photoshop atau GIMP. Atau anda bisa menggunakan gambar yang telah ada. Berbagai macam jenis file gambar bisa anda gunakan seperti jpg, gif, png, dll.
• Upload gambar itu, untuk memudahkan anda bisa mengupload nya di wordpress.com. Login ke wordpress anda, lalu masuk ke Tulisan Baru, sisipkan gambar yang akan dijadikan banner, setelah terupload klik pada tab HTML.
  
• Dalam contoh maka gambar tersebut akan berubah menjadi kode HTML seperti berikut:
  <a href=”http://kamalfrz.files.wordpress.com/2010/07/banner.jpg”><img class=”size-full wp-image-472 alignnone” title=”kamalfrz’s BLOG” src=”http://kamalfrz.files.wordpress.com/2010/07/banner.jpg” alt=”" width=”200″ height=”48″ /></a>
• Copy kode HTML tersebut, kita akan meng-encode nya agar kode itu bisa tampil pada sidebar, tidak langsung di generate oleh wordpress menjadi gambar. Untuk melakukannya klik pada alamat ini http://centricle.com/tools/html-entities/. Paste kode HTML pada box yang telah disediakan di website itu. Terlebih dahulu edit kode HTML tersebut agar link-nya mengarah pada alamat blog kita. Saya juga menghapus kode alignnone agar nantinya saya bisa mengatur sendiri align nya. Setelah di edit kode HTML nya menjadi seperti ini:
  <a href=”http://kamalfrz.files.wordpress.com/”><img class=”size-full wp-image-472″ title=”kamalfrz’s BLOG” src=”http://kamalfrz.files.wordpress.com/2010/07/banner.jpg” alt=”" width=”200″ height=”48″ /></a>
  Setelah selesai lalu klik Encode. Kode HTML setelah di encode akan berubah menjadi seperti ini:
  <a href="http://kamalfrz.files.wordpress.com/"><img class="size-full wp-image-472" title="kamalfrz’s BLOG" src="http://kamalfrz.files.wordpress.com/2010/07/banner.jpg" alt="" width="200" height="48" /></a>
• Copy kode HTML hasil encode itu, anda langsung bisa paste pada Widget Teks.
• Untuk membuat tampilan di sidebar menjadi Scroll seperti pada blog saya untuk menghemat tempat, anda tinggal tambahkan kode HTML berikut di atas kode HTML banner atau bisa juga dengan kode textarea.
  
  <div style=”overflow:scroll;width:262px;height:100px;”></p><br /> <ul>
• Selesai, lalu klik Simpan. Banner Link blog anda telah jadi.