Cara Mudah Membuat Peel Banner dengan 123-Banner

123-Banner sudah terkenal sebagai layanan untuk membuat animasi flash banner gratisan dan punya banyak template yang bisa kita gunakan untuk berkreasi membuat flash banner dengan mudah. Kali ini saya ingin memberikan tutorial membuat peel banner dan menaruhnya dalam blog berplatform WordPress.com seperti punya kita – kita ini.

Peel banner itu apaan sih ? Nih contohnya : (hover mouse anda ke peel bannernya)


Kira-kira seperti inilah peel banner yang dibuat dengan animasi flash. Bentuk bannernya seperti halaman yang dibuka atau dikupas (peel). Pada contoh ini peel banner saya letakkan di halaman postingan, padahal contoh yang benar harusnya seperti ini: klik disini

Peel banners are also known as magic corners or pagepeels. They are displayed as a small animated corner of the page and wakes the curiosity of most users. Only if the user moves his mouse onto, it peels impressively over the real homepage.

123-banner.com

Begitulah ujud penampakan yang benar dari peel banner. Letaknya ada di sudut kanan atas, seperti halaman pada buku yang dilipat untuk memberi tanda. Sifat dari peel banner ini adalah float, jadi pas kita scroll halamannya ke bawah dan ke atas dia tetap berada di tempatnya. Mau pasang banner seperti ini? Simak tutorial berikut:

Cara Pasang Peel Banner

  • masuk ke 123-banner dan pilih peel banner yang ada di bagian atas.

klik supaya jelas

  • di halaman peel banner baru ada 3 template (sampai saat tutorial ini dibuat). pilih salah satu dari template yang anda sukai dan kemudian tekan tombol “create your own pagepeel”
  • ikuti instruksinya. gampang kok. nanti anda disuruh memilih gambar dari komputer, masukin kata-kata dan masukin laman website yang mau dituju ketika animasi flashnya nanti diklik.

klik supaya jelas

  • setelah animasi flashnya jadi, kita diminta untuk meng-save animasi tsb ke dalam komputer kita. Klik kanan pada link-nya agar kita bisa menyimpan animasi flash tersebut (formatnya adalah SWF)

klik supaya jelas

  • setelah file tsb disimpan di komputer, sekaranglah saatnya kita memasukkan file animasi ini ke dalam blog WordPress.com kita. Tapi tidak bisa langsung loh. Kita akan menggunakan third party alias pihak ketiga. Pihak ketiga yang saya maksud adalah Widgipedia. Untuk itu saya minta anda membaca dengan teliti artikel yang telah ditulis bro Nyoman di blognya ini: klik disini
  • Jika anda sudah membaca dan mempraktekkan tulisan bro Nyoman itu, maka sekarang anda sudah terdaftar di Widgipedia , sudah meng-upload file animasi flashnya ke Widgipedia dan sudah mendapatkan kode instalasi dari file animasi itu. Langkah berikutnya adalah memasang kode instalasinya dipadukan dengan HTML kode untuk menjadikannya peel banner yang floating / melayang. Ini kode HTML-nya :
<code><a style=”display:scroll;position:fixed;top:0;right:0;”> <div style=”text-align:left;width:480px;height:480px;margin:0 auto;”>[/gigya width=” src=”http://www.widgipedia.com/widgets/red_conjurer/Banner-Hajar-Jahanam-004-Peel-banner-16371-8192_134217728.widget?__install_id=1339655416844&amp;__view=expanded” quality=”high” width=”480″ height=”480″ align=”middle” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer&#8221; wmode=”transparent” /]</div></a></p></code>

Cara Pasang:

  • masuk ke dalam dashboard admin blog wordpress.com >>> Tampilan >>> Widget >> lalu drag widget teks dan copy paste kode HTML-nya ke dalam widget teks tersebut.

Keterangan:

  1. yang ditandai warna biru adalah tinggi dan panjang dari file animasi peel banner kita. Defaultnya adalah 480 x 480. Jika terlalu besar mungkin anda mau merubahnya lebih kecil ke 300 x 300 atau terserah nilainya pada anda
  2. yang ditandai warna merah adalah kode instalasi file flash kita yang sudah diletakkan di widgipedia. masukkan kode instalasi file  flash anda sendiri menggantikan kode berwarna merah itu
  3. hapus tanda ” / ” agar kode HTML ini dapat digunakan di wordpress.com

Kerugian Menggunakan Peel Banner

  • Jika sidebar anda dipenuhi banyak link atau gambar berlink maka besarnya peel banner (default 480×480 pixel) akan menjadikan link tsb engga bisa diklik. Semua teks, link, gambar masih dapat terlihat namun akan berada “dibalik” peel banner tersebut.  Solusinya adalah dengan mengurangi besaran pixel dari peel banner kita menjadi 300 x 300 atau kurang.
  • Jika traffic anda banyak datang dari pengguna mobile phone/smart phone maka penggunaan peel banner ini akan menghalangi banyak link (gak bisa diklik). Saya rasa ini cukup merugikan. Kecuali jika anda tidak perduli dengan mobile platform, it’s okay

Peel Banner untuk Pengguna WordPress.org

Untuk pemakai blog yang dihosting sendiri dengan platform WordPress.org dapat menggunakan plugin bernama Page Peel. Klik disini untuk mengunduhnya.

Screenshot:

peel banner  menggunakan plugin, mouse belum dihover ke atasnya

Peel Banner terbuka ketika mouse dihover ke atasnya

Bagaimana bro/sis ? Tertarik menggunakan Peel Banner di blogmu ? Coba aja cara ini : Cara Mudah Membuat Peel Banner dengan 123-Banner !

About Eduard de Grave

Blogger tampan, seksi, kaya raya & baik hati. Blog pribadi: annunaki.me | lapak jualan: agenhajarjahanam.net | Google Plus Twitter: @eduard777

Lihat semua pos milik Eduard de Grave

Komentar ditutup.