jendelablog.wordpress.com

budiscyan weblog area's

Membuat Open-Close Content (pop up menu)

Trik ini terinspirasi dari tampilan rekan-rekan dari blogger.com yang memasang shoutbox. shoutbox tersebut di desain untuk open-close on click. artinya jika kita mengarahkan mouse dan meng-klik tombol tersebut, maka akan keluar semacam konten (shoutbox).

Saya mencoba menerapkan trik itu di multiply, tapi seperti yang kita tahu. trik “onclick” adalah kode javascript. Jadi saya sama sekali tidak mengharapkan untuk bisa meletakkan kode itu di multiply. kita buat versi yang berbeda saja dengan sedikit modifikasi.

Oke langsung saja, berikut saya berikan contohnya. kali ini kita akan membuat pop up shoutbox.

Langkah pertama kita masukkan script ini ke CSS UPLOADER.

.popup {
position: fixed;
top: 117px;
right: 1px;
}
.popup:hover {
position: fixed;
top: 117px;
right: 250px;
}
div.content span.open {
position: absolute;
background: white;
padding: 5px;
visibility: hidden;
border: 0;
}
div.content:hover span.open {
visibility: visible;
top: 8;
left: 25px;
}

save dan hem, oke settingan CSS sudah selesai. selanjutnya kembali ke halaman muka. klik customize my theme dan masukkan kode berikut ke SIDERAIL HTML CUZTOMIZED :

<div class=”popup”><div class=”content”><img src=”http://multiply.com/mu/budiscyan/image/1/photos/83/1200×1200/1/tabsbukutamubudiscyan.png?et=K1sr3zIzJLApSE75xC1gaw&amp;nmid=420596660&#8243; border=”0″><span class=”open”>



<b>Copyright © <a href=”http://budiscyan.multiply.com”&gt; Budi Suwoko</a></b></span></div></div>

NB: Yang saya beri tulisan miring adalah script shoutbox sebagai konten. script tersebut bisa anda ganti sesuka hati, entah itu gambar, tulisan atau apa saja.
Save dan lihat hasilnya.

NB: Jika Tampilan masih berantakan anda bisa menyesuaikan dengan mengubah nilai-nilai pada bagian berikut:

.popup {
position: fixed;
top: 117px;
right: 1px;
}
.popup:hover {
position: fixed;
top: 117px;
right: 250px; <=== ubah ke skala lebih kecil atau lebih besar
}
div.content span.open {
width: 100px;
position: absolute;
background: white; <=== ubah warna background-nya
padding: 5px;
visibility: hidden;
border: 0;
}
div.content:hover span.open {
visibility: visible;
top: 8;
left: 25px; <=== ubah ke skala lebih kecil atau lebih besar
}

Semoga berhasil. Contoh penggunaan trik ini bisa anda lihat di sisi kanan site saya . Sekian Terimakasih.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 2 Maret 2011 by in artikel.

Kategori

Blog Statistic

  • 21,292 hits

Contact

%d blogger menyukai ini: