Membuat Efek Tooltip Sederhana

Membuat Efek Tooltip Sederhana adalah tema saya kali ini, sudah agak lama tidak update postingan di karenakan memang belum ada bahan untuk saya publikasikan, dan akhirnya tanpa tak sengaja terpikir untuk berbagi tentang tutorial Tooltip tersebut.
Baiklah mari sekarang kita mulai saja bagaimana cara pasang Tooltip pada Blog.
Langkah-langkahnya adalah sebagai berikut:
*Langkah yang pertama.
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah ketemu, silahkan Copy Kode CSS dibawah ini dan Pastekan persis di atas kode ini ]]></b:skin>

a.tooltip {position:relative}
a.tooltip span {
display:none;
padding:4px 5px 4px 6px;
z-index:100;
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5A30pxXsNQ380MZ7I_P0GwKDosybxPwgT3yuacHsLUE43hz6Lqz7orlkVFs8OmIP8wD4h76SUfVgrXk6JQDE5sySTwSIiqSkXQJXTfJMh4D7f20qcsok3nn165kmYmMJKnlGIvUIo8vEH/s320/nav.gif) repeat-x;
color:#FFFFFF;
text-decoration:none;
width:100%;
height:auto;
text-align:center;
-moz-border-radius:5px;
border:1px solid #999999;
}
a:hover.tooltip {
font-size:99%;
cursor:pointer
}
a:hover.tooltip span {
display:block;
position:absolute;
-moz-opacity:0.9;
top:auto;
left:auto;
right:-20px;
bottom:30px;
line-height:14px;
font-size:12px;
font-weight:normal;
}

@- Jika sudah jangan lupa klick SAVE TEMPLATE / SIMPAN TEMPLATE
@- Nah... langkah yang pertama sudah selesai.

* Langkah berikutnya agar efek tooltip muncul, sobat hanya cukup menyisipkan kode yang berwarna MERAH TEBAL di link yang mau sobat beri efek Tooltip, dan contoh kodenya seperti di bawah ini.

<a class="tooltip" href="http://LINK ARTIKEL BLOG ANDA">JUDUL ARTIKEL BLOG ANDA<span><strong>JUDUL ARTIKEL BLOG ANDA</strong></span></a>

@- Dan hasil dari kode di atas adalah seperti ini » » JUDUL ARTIKEL BLOG ANDAJUDUL ARTIKEL BLOG ANDA

@- Tambahkan link gambar, jika sobat menginginkan efek tooltip disertai dengan gambar, sobat cukup menambahkan kode link gambar yang berwarna PINK, dan contoh kodenya seperti dibawah ini.

<a class="tooltip" href="http://LINK ARTIKEL BLOG ANDA">JUDUL ARTIKEL BLOG ANDA<span><center><img src="http://GANTI DENGAN LINK GAMBAR ANDA"/></center><strong>JUDUL ARTIKEL BLOG ANDA</strong></span></a>

@- Hasil efek tooltip yang disertai dengan gambar » » JUDUL ARTIKEL BLOG ANDAJUDUL ARTIKEL BLOG ANDA

@- Nah... selesai sudah saya berbagi cara membuat efek tooltip sederhana hanya dengan kode CSS saja, monggo... monggo... silahkan dicoba semoga bermanfaat.
@- Mohon maaf jika dalam postingan ini ada banyak kekurangannya, harap maklum kalau saya juga masih belajar.
@- Sukses selalu buat SAHABAT BLOGGER semua.