Cara Membuat Kode Html Banner di Blog

Assalamualaikum...

Sebelumnya saya tidak tahu mengenai cara membuat kode html banner di blog. Oleh karena itu, setelah saya berhasil menemukan banyak tutorial yang serupa yang akhirnya memotivasi saya untuk bisa membuat tutorial ini juga. Walau dengan topik yang sama, namun berbeda :))

Oke, langsung saja kita membahas tentang cara membuat kode html banner di blog. Berikut langkah-langkahnya : (Ikuti step by step jika Anda tertarik dengan artikel ini)

1. Siapkan gambar yang akan dijadikan banner. Anda dapat memperolehnya secara online ataupun dengan membuat sendiri. Di bawah ini adalah contoh gambar banner milik blog4teens.

Banner Blog4Teens

     
          Terdapat banyak aplikasi yang bisa digunakan untuk membuat gambar banner. Diantaranya:
         ~ Membuat sendiri menggunakan aplikasi Photoshop, Corel Draw, dan aplikasi graphic creator lainnya.
         ~ Secara online. Berikut situs pembuat banner secara online free.
            1. http://www.cooltext.com 
            2. http://www.loogix.com
            3. http://www.createagif.net
            4. http://gickr.com
            5. http://picasion.com
            6. www.3dtextmaker.com/
            7. www.flamingtext.com/
            8. http://www.123-banner.com
            9. http://www.quickbanner.com
           10.http://www.flashbannernow.com , dan masih banyak lagi.

        2.  Setelah itu, dapatkan URL gambar banner-nya. Anda bisa mendapatkan url tersebut dengan cara klik kanan "Copy image location" pada tempat penguploadan gambar tersebut, misalnya di postingan blog, di facebook, twitter, google plus, photobucket, dan sebagainya. Url gambar semisal : (http//02.bp.blogspot.imageblog4teens-151196.jpg).

       3.   Setelah mendapatkan url gambar, langsung saja Anda masuk ke Blogger -> Tata letak-> Tambahkan gadget -> Html/ Javascript. Selanjutnya copy dan pastekan kode di bawah ini dalam ruang html.

<div style="text-align: center;">
<img alt="Blog4Teens" border="0" src="https://scontent-b-sin.xx.fbcdn.net/hphotos-prn1/t1.0-9/1017712_437056886441082_1450155321_n.jpg" /><br />
<textarea code="" cols="25" name="" rows="5"> <center>
<a href="http://blogantikepo.blogspot.com" target="_blank" title="Blog4Teens"><img src="https://scontent-b-sin.xx.fbcdn.net/hphotos-prn1/t1.0-9/1017712_437056886441082_1450155321_n.jpg" alt="Blog4Teens" /></a></center>
</textarea></div>

Catatan : 

• Warna Ungu : Ganti dengan URL gambar yang tadi telah Anda dapatkan 
• Warna Kuning : Kode html untuk menambah garis, apabila dihilangkan maka text area html akan berada di samping banner. 
• Warna Hijau : Ubah ukuran rows (baris) dan cols( kolom). 
• Warna Merah : Nama yang akan muncul ketika kursor berada di atas banner 
• Warna Biru : Ganti dengan URL blog Anda. Link tersebut akan muncul ketika banner di klik.

Kode- kode diatas dapat Anda ubah sesuai keinginan Anda. Demikian langkah-langkah yang dapat dilakukan dalam membuat kode html banner blog. Hasil jadinya kurang lebih seperti gambar di bawah ini :

        4.  Selesai. Sekarang Banner Anda telah jadi. Terima kasih telah mengikuti cara yang kami suguhkan. Mohon bantu share artikel ini kepada blogger yang lainnya. Dan jika ada yang tidak beres, kurang jelas, bisa ditanyakan lewat kotak komentar di bawah. Saya harap Anda berkenan memasang banner kami di blog Anda, yang bisa dibuka di laman kami http://blogantikepo.blogspot.com/p/banner-exchange.html. Nanti kami akan mengkonfirmasi jika Anda telah memasang link banner kami di blog Anda. Sekian :))

Source : http://arisetim.blogspot.com/2013/10/cara-membuat-banner-dengan-kode-html.html

Wassalamualaikum ...