Cara Membuat Efek Tooltip dengan CSS di Link Blog ~ [Url]Rhenaldy

Cara Membuat Efek Tooltip dengan CSS di Link Blog

Cara Membuat Efek Tooltip di Link Blog. Mungkinsobat sudah pernah melihat berbagai macam jenis tooltip yang tampil di blog. apa itu tooltip? Mungkin para sahabat blogger ada yang belum tahu apa itu tooltip, Nah tooltip ini layaknya seperti title pada link blog atau juga seperti title pada gambar blog, ini adalah tulisan yang muncul ketika kursor Mouse diarahkan ke link tersebut.

Membuat efek seperti ini dapat membantu sobat misalkan untuk menjelaskan link tujuan yang ada di dalam postingan ataupun template blog sobat. Bisa juga untuk Memberitahukan arti dan maksud dari suatu kata yang ada dalam postingan blog sobat. Live demo atau contohnya sobat dapat melihatnya langsung dibawah ini.

[DEMO]

CARA MEMASANG GAME ONLINE DI BLOG TERBARU 2015 Hai Kali Ini Saya Akan memberitahukan bagaimana Cara memasang Game Online di Blog Kalian...View Bareng Yuk..

Cara Penerapannya :

Masuk ke edit HTML template Blog sobat.
Cari kode ini : ]]></b:skin>
Letakan kode CSS dibawah ini keatas kode ]]></b:skin>.

/* Tooltip Provided by www.url-rhenaldy.blogspot.com */
a:link,
a:visited {
position:relative;
}
.bgttooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#2aa4cf;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background: #2aa4cf;
border-color:#2aa4cf;
}
.bgttooltip:before,
.bgttooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.bgttooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .bgttooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.bgttooltip,
.bgttooltip.left {
left:0;
right:0;
}
.bgttooltip:before,
.bgttooltip:after,
.bgttooltip.left:before,
.bgttooltip.left:after {
left:40px;
right:auto;
}
.bgttooltip:before {
border-top-color:#2aa4cf;
}
.bgttooltip:after {
border-top-color:#2aa4cf;
}
/* Tooltip Provided by www.url-rhenaldy.blogspot.com */