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 :
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:
- 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
- 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
- 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 !
Sudah pake peel banner ? Jika ya laporkan ke sini dan saya bikinin screenshotnya di artikel ini ya :
klik pada gambar untuk melihat blog Irfan Handi
4 Mei 2013 pada 02:07
sorry gan……….., kok peel banner gue munculnya sidebar bukan disudut blog. gimana tuh salahnya? help me donk
4 Mei 2013 pada 10:58
saya lihat itu sudah ada di atas dan floating, bukan disidebar
14 April 2013 pada 14:50
agan, mau nanya apakah semua code http dari widget harus di masukkan semuanya ke text? sy coba tapi tak berhasil hanya muncul codex saja
30 April 2013 pada 08:21
setelah kamu copy paste ke dalam widget text, hapus atuh tanda ” / ” dari kode tsb
30 April 2013 pada 19:25
gak jadi pake peel banner susah banget pasangnya
30 April 2013 pada 21:27
apa sudah buat peel bannernya di 123-banner? kalo ya, kirimkan ke saya file .swf-nya itu via email ke red_conjurer@yahoo.com, nanti saya yang otak atik dan koe html-nya saya kasih via email deh
11 April 2013 pada 11:36
makasih gan infonya.? udah ane coba nih dan berhasil..