Cara Membuat Tooltip Dengan Menggunakan CSS di Blogger - Cara Baru ~ berita kesehatan, tips dan tutorial

Cara membuat Tooltip Dengan CSS

Tooltip Adalah Komponen grafis dalam user interface pengguna. Komponen tersebut biasa nya muncul saat pointer mouse diarahkan ke komponen. Tooltip biasa berisi tentang bantuan ataupun suatu informasi lain yang terkait dengan komponen tersebut. trik ini bisa memudahkan pengguna atau pengunjung blog dalam mengetahui fungsi dari komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi.

Kali ini saya akan berbagi pada teman blogger khususnya blogger pemula yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.

Untuk cara membuatnya sobat bisa menggunakan cara di bawah ini:

Baca:

Seperti biasa login ke blog sobat.
Pilh tata letak.
Klik edit html.
Letakkan kode di bawah ini di atas kode ]]</b:skin>hingga posisinya sbb:

tooltip {position:relative;}
tooltip span {display:none;}
tooltip:hover span {
display:block;
position:absolute;
width:200px;
left:20px;
top:20px;
background-color:#006633;
border:3px solid #0099FF;
padding:5px;
font-size:15px;
color:#000000;
text-decoration:none;
font-family:Verdana,arial, helvetica, sans-serif;}
]]></b:skin>

Kemudian Klik simpan.

CARA MENAMPILKAN KE DALAM POSTINGAN

<a href="http://vioren-ky.blogspot.com/2012/11/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>

Ganti link yang dicetak merah dengan link milik sobat.

Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.

Cara menulis kodenya seperti di bawah ini:

background:url("http://i265.photobucket.com/albums/xx141/vioren_bucket/gambar8.jpg")no-repeat bottom;

Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.

Penutup:
Demikianlah artikel tentang cara membuat tooltip dengan memakai css di blogger.
semoga artikel ini bermanfaat, jangan luoa tinggalkan komentar di bawah