Cara membuat menu tooltip

Menu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link atau kita bisa gunakan menu ini sebagai daftar artikel, menu ini juga dilengkapi dengan tooltip yang berisi gambar dan informasi singkat tentang artikel atau link lain yang ada pada daftar tersebut. Cara membuat menu ini sangat mudah, yang kita perlukan hanya kode HTML dan beberapa kode CSS, tanpa menggunakan Javascript. Berikut ini anda bisa lihat contoh menu tooltip dibawah ini :

Cara membuat code color picker interaktif color picker interaktif dilihat dari bentuk dan fungsinya memang sangat berbeda dengan tabel kode warna yang saya bahas pada waktu yang lalu dalam artikel cara buat tabel kode warna. tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. dan pada kotak output disebelah bawah selain muncul kode color hex, juga kode color rgb, dan nilai-nilai hsv, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.

Cara membuat tab menu Accordion bentuk tampilan tab menu accordion ini sangat menarik, sangat bagus bila kita pasang pada web atau blog kita. tab menu accordion ini dilengkapi dengan efek animasi sliding. yaitu animasi sliding yang bekerja ketika kita mengklik pada salah satu tab menu accordion, maka ketika itu pula muncul sebuah kotak bergerak kebawah yang berfungsi menampilkan sebuah dokumen informasi singkat tentang link yang kita klik tadi.

Cara membuat gambar memutar fitur css memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. pada waktu yang lalu saya sudah banyak mengulas tentang fitur css dan contoh - contohnya. kali ini saya akan berikan contoh lagi tentang bagaimana kita membuat gambar memutar menggunakan css transitions. cara kerjanya sangat sederhana, yaitu ketika pointer mouse diletakkan diatas gambar maka secara otomatis gambar akan memutar dan membesar.

Cara agar blog cepat diakses dengan HP saat ini sudah bukan hal yang baru lagi, orang mengakses internet menggunakan hp. hal ini karena selain hp sudah dilengkapi fitur gprs atau 3g, tapi karena memang sudah banyak situs yang menggunakan fasilitas tersendiri sehingga dapat lebih mudah dan cepat diakses menggunakan hp, misalnya seperti facebook, twitter, yahoo, google, dan lain - lain.

Cara mengganti forum komentar blogger dengan Disqus disqus adalah platform komentar yang membantu membangun komunitas yang aktif dari pengunjung web atau blog kita. forum komentar ini memiliki banyak fitur dan bisa digunakan pada banyak platform seperti wordpress, blogger, tumblr dll, sama seperti forum komentar intensedebate

Cara mengganti forum Komentar Blogger dengan IntenseDebate forum komentar intensedebate memiliki banyak fitur menarik dibanding dengan forum komentar default milik blogger. forum komentar intensedebate bisa digunakan pada banyak platform seperti wordpress, blogger, tumblr dll.

Gimana... bagus kan...?

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type='text/css'> .tooltp a:link,a:visited{ display:block; float:left; color:#FFFFFF; border:1px solid #ffffff; background-color:#004478; width:220px; min-height: 45px; text-align:left; padding:5px; text-decoration:none; } .tooltp a:hover,a:active { color:#004478; background-color:#B3C0EF; padding:5px; } .tooltp li{ display:block; color:#FFFFFF; border:1px solid #ffffff; background-color:#8797D3; width:245px; min-height: 58px; padding:4px; text-decoration:none; } .tooltp li:hover,li:active { border:1px solid #5867A0; background-color:#5867A0; } a.tooltp { position:relative; z-index:24; text-decoration:none; } a.tooltp span{ display: none; } a.tooltp:hover span.muncul { display: block; position:absolute; float:left; top:-6px; width:200px; border:2px solid #5867A0; border-top-width:134px; border-right-width:5px; border-bottom-width:5px; font-style:italic; color:#004478; background-color:#E9EEFF; margin-left:244px; padding: 10px; } .tooltpimg{ display: block; position:absolute; float:left; top:-128px; margin-left: -9px; width:215px; height:119px; border:2px solid #ffffff; } </style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="tooltp"> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR) ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> </div>

Catatam :

• Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda :

<li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li>

5. Simpan.

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat menu tooltip" Diulas Oleh : Noercholis | Jumat, 03 Juni 2011 | 19.39 Description : Menu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya dig... Label : css,gadget,HTML,menu Rating : 6.4 Dari 10, Berdasarkan 300+ Dari 3 000+ Pengunjung.
Sampai saat ini baru ada : 3 komentar >>> Silahkan tambahkan komentar Anda...