Gudang Informasi

ayomaju.com

Bisnis Online

Cara membuat tooltip menarik untuk pemula

Stop-Dreaming-Start-ActionPostingan ini melanjutkan postingan meningkatkan klik pada iklan banner sebelumnya. Saya beri embel-embel pemula karena fitur dari script yang dipakai sebenarnya dapat digunakan untuk variasi model yang sangat banyak. Tapi jika saya jelaskan diawal, pasti kawan yang masih lebih pemula dari saya akan kesulitan memahami dan menerapkannya. Jadi awalnya akan saya jelaskan kode yang dipakai dengan model yang sudah saya buat dipostingan sebelumnya. Anda tinggal mengganti isi sesuai keinginan anda.

Untuk penjelasan variasi lebih lanjut jika saya sedang mood akan saya tulis nanti. Karena jika anda menguasai penggunaannya anda bisa membuat banyak model dan tentu saja agar “berbeda”. Langsung saja ke inti kode, dan Anda silahkan membuka halaman ini karena saya hanya akan menyebutkan modelnya saja.

Pertama anda harus menambahkan pada deretan CSS anda agar kode yang saya buat bekerja baik sesuai tampilan model yang saya buat. Silahkan letakkan kode dibawah ini diatas kode ]]></b:skin> untuk blogspot jika untuk wordpress silahkan masukkan pada file style anda.

.kotakdalam {border: 1px solid #EFF0F1;padding: 5px; background: #ffffff;-moz-border-radius:5px;}
.kotakdalam a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

Sekarang tinggal memasukkan kode-kode dibawah ini, silahkan dicoba saja kemudian kalau sudah kelihatan hasilnya anda bisa menggantinya dengan kode iklan anda sendiri. Saya tidak akan menjelaskan detil karena banyak variasi, jadi silahkan dicoba-coba dan perhatikan hasilnya, kalau salah ya edit lagi ‘kan begitu :)

Model 1
Model 3
Model 6
Model 8
Tooltip Kanan

Jika anda memasang lebih dari satu kode atau bahkan semua kode diatas, maka kode javascript-nya hanya perlu dilampirkan pada kode urutan paling akhir. Misal anda mau pasang di widget 1 widget 3 dan widget 5, maka yang perlu dilampiri kode javascript hanya widget 5 saja(terakhir).

OK semoga bermanfaat, jika ingin otak-atik silahkan saja. InsyaAllah akan saya posting bagaimana membuat variasi lainnya dengan menjelaskan cara kerja script pada semua tag HTML pada kesempatan mendatang, dan akan berguna untuk membuat Photo Galleries yang hemat tempat. Stop Dreaming Start Action!

Kode ini memang rumit sekali membuatnya, makanya saya sendiri menggunakan teknik ini dengan digabung cara melakukan generate via javascript, tapi ampun deh kalau suruh bikin tutorialnya, susah ngarang kata-katanya. Jika digenerate otomatis, kita akan repot saat awal saja kemudian script itu yang akan menuliskannya secara otomatis membuat banner iklan. Capeeek mau nulis lagi…