Cara Membuat Banner Iklan Sendiri Untuk Blog dengan Adobe Photoshop

Hallo sobat pembaca blog indravedia.com, di artikel kali kita akan membahas tutorial tentang cara membuat banner iklan animasi sederhana dengan adobe photoshop untuk kemudian ditempatkan di blog sebagai sebuah widget ataupun banner iklan sisipan di area postingan. Maksud banner iklan animasi di sini adalah berupa file gambar berformat gif. Dan dalam hal ini kita akan membuat banner dengan animasi huruf sederhana yang berkedip-kedip seperti menyala, sehingga diharapkan dapat menarik perhatian para visitor untuk mengklik banner yang nantinya akan kita tempatkan di blog.

Adapun untuk kemudian sobat bisa memanfaatkan banner ini sebagai iklan yang mana jika diklik akan mengarah ke sebuah link halaman, baik itu link affiliasi ataupun link menuju blog / halaman artikel sobat yang lainnya yang ingin dipromosikan sehingga mendapat kunjungan lebih dari para visitor. Dan seperti yang saya tuliskan di bagian awal, di sini saya menggunakan Adobe Photoshop sebagai media pembuatan bannernya. Kenapa pakai Photoshop? Ya karena pengen aja.. He, bercanda. Tentu saja alasannya tidak seegois itu. Alasannya yaitu karena selain sebagai salah satu software desain grafis 2D yang banyak digunakan dan sudah sangat familiar, juga memang penggunaannya cukup mudah, dan mendukung juga untuk membuat gambar bergerak berformat gif sederhana, seperti yang akan kita praktekkan berikut ini.

Baik, supaya lebih real di sini akan saya contohkan membuat banner iklan animasi huruf sederhana yang nantinya akan saya arahkan ke website / link affiliasi sebuah program kursus online yang saya ikuti.

1. Buka program Adobe Photoshop-nya. Lalu buat dokumen baru dengan klik menu File > New. Di sini saya masih menggunakan Adobe Photoshop CS3.

2. Tentukan ukuran piksel dari banner yang akan dibuat. Untuk sidebar blog, basanya menggunakan ukuran 338x280 pixel, atau 300x250 pixel, atau untuk banner header biasanya berukuran 720x90 pixel. Tinggal disesuaikan saja mana yang ingin kita buat. Untuk kali ini saya memilih ukuran 338x280 pixel menyesuaikan dengan ukuran lebar sidebar blog.

Untuk lebih mempermudah, bisa dilihat deretan gambar panduan berikut ini.

 3. Masukkan gambar pendukung untuk mempercantik tampilan

 4. Berikan warna pada background dan isikan tulisan dan material yang pendukung.

 5. Buat tulisan CTA (Call To Action). "KLIK DI SINI" di bagian bawah banner. Seperti nampak pada gambar di bawah ini.

 6. Klik pada menu Window > Animations. Maka akan muncul panel untuk mengatur animasi frame by frame. Klik pada frame 1, lalu klik tombol Duplicate Selected Frame, untuk menggandakan frame.

 7.  Setelah terduplikat, klik pada frame 2 (hasil duplikat). Lalu berikan efek blending pada tulisan "KLIK DI SINI" pada frame 2. Klik kanan pada layer tulisan KLIK DI SINI, lalu klik Blending Options. Pilih Stroke untuk memberikan kesan tegas border pinggir pada tulisannya. Lebih jelasnya lihat gambar di bawah ini.

 8. Berikan durasi masing-masing 0.5 detik pada frame1 dan frame2 untuk menciptakan efek kedipan, jika animasinya diputar. Lihat seperti gambar di bawah ini.

 9. Jika sudah, langsung saja simpan bannernya dengan klik tombol File > Save For Web & Devices. Simpan dalam format GIF, lalu klik OK.

 10. Selesai

Alhamdulillah selesai. Sampai di tahap ini, kita sudah berhasil membuat banner iklan. Sekarang langsung saja kita masuk ke tahap berikutnya, yaitu menempatkan banner tersebut di blog bagian sidebar dan mengarahkannya (jika di klik) ke suatu halaman yang ingin dipromosikan, baik itu berupa link dari program affiliasi ataupun link blog/artikel sobat yang lain, dengan bantuan sedikit script perintah tentunya. Untuk kali ini, saya akan coba menyematkan sebuah link affiliasi dari salah satu program Online Course yang saya ikuti.

Baik langsung saja, kita mulai langkah-langkahnya:

1. Login ke akun blogger. Lalu klik tombol Entri Baru (Sama seperti ketika hendak membuat postingan baru).Sehingga tampillah halaman entri posting. Di sini kita akan mengupload gambar / banner yang telah kita buat tadi dengan Adobe Photoshop. Namun bukan berarti kita langsung publish bannernya melalui halaman entri posting ini. Ini hanya kita gunakan sebagai media perantara untuk nantinya kita mendapatkan link address dari gambar/banner tersebut. Tujuannya buat apa? Nanti akan kita lihat di langkah 3.
Sekarang upload dulu bannernya ke blog, lalu insert / masukkan ke halaman entri posting.

2. Setelah gambar masuk ke dalam halaman entri posting, klik kanan pada banner tersebut. Lalu klik pada pilihan Copy Link Location. Lalu pastekan (link-nya) di mana saja, bisa di notepad atau sekadar di-paste di new tab di address bar. Tujuannya cuma untuk menyimpan link gambar / bannernya. Nanti link addressnya akan kita copy paste kan lagi ke script perintah.

3. Kembali ke dashboard blogger, pilih menu tata letak / layout. Menuju bagian sidebar, klik tombol Add Gadget, klik pada pilihan HTML/Javascript. Lalu copy script di bawah ini ke bidang yang tersedia. Ini adalah kode HTML untuk mengarahkan banner iklan (jika diklik) menuju sebuah halaman yang dipromosikan.

<a href='http://www.belajaringgris.net/member/aff/go/rusman103' target='_blank' title='Belajar Bahasa Inggris Fun'><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik74Kt2OxOiu1V0NDt2UYsAqBsAfEP9bk-bWb5wvk4wAkuigqtpmjTZqTleJief9ZVPVPCnwmQmYCiHGNFKRZ6EsdKE6thA6KAyRVaKXmRjPURVGNIVEhIsH7ARK96zkwhlYX6BT8BdAU/s320/ecompusoft.gif' alt='Belajar Bahasa Inggris Fun' border='0'height='280' width='338'/></a>

Keterangan:

• Tulisan merah adalah URL target, yaitu halaman yang akan terbuka jika bannernya diklik.
• Tulisan warna hijau adalah URL dari gambar / banner yang ingin ditampilkan. Kita buka lagi script yang tadi sudah dicopy-paste ke notepad. Copy kembali URL/Link tersebut, kemudian pastekan dengan menggantikan tulisan hijau di atas.
• atur 'height' / tinggi dan width / lebar sesuai dengan ukuran banner, dalam hal ini height: 280 pixel dan width 338 pixel.

4. Jika dirasa sudah benar, dari mulai link target, link banner dan ukuran (lebar dan tinggi banner), langsung saja klik tombol Simpan. Lalu tempatkan / geser widget di bagian sidebar yang dikehendaki, di atas atau di tengah atau mungkin di bawah. Lalu simpan pengaturan. Dan lihatlah sekarang hasilnya. Jika langkah-langkahnya benar, maka di sidebar blog sobat sekarang sudah terpampang secara jelas sebuah banner iklan buatan sobat sendiri. Ajiib.

***

Dan selesai sudah pembahasan kita tentang cara membuat banner iklan sendiri untuk dengan adobe photoshop dan menempatkannya di sidebar blog. Saya pribadi berharap semoga postingan sederhana ini bisa memberikan pencerahan kepada sobat blogger sekalian yang ingin mempromosikan sebuah halaman melalui media banner yang diletakkan di sidebar atau di bagian blog lainnya.

Dalam kasus ini, karena banner yang kita buat adalah berupa iklan, tentu kita berharap akan banyak yang melihat dan mengklik banner tersebut supaya halaman yang dipromosikan bisa dikunjungi oleh lebih banyak orang. Salah satu cara untuk meningkatkan impresi dan jumlah kunjungan pada halaman yang dipromosikan di banner tersebut - yakni dengan membuat sticky widget, artinya kita membuat banner tersebut menjadi sebuah widget yang sticky, melayang dan tetap menempel tidak hilang dari pandangan walaupun layar di-scroll ke atas dan ke bawah sekalipun. Untuk lebih jelasnya, bisa baca artikel berjudul Cara Membuat Sticky Widget Pada Blog.

Baik, sekian saja artikel ini. Semoga bermanfaat bagi sobat blogger semuanya. Sekian dan terima kasih. Salam

Tweet