Cara Membuat Tool Tips Jquery di Blogger

Cara Membuat Tool Tips Jquery di Blogger. Bagi sobat-sobat yang mungkin pengen blognya lebih keren. nih saya punya triknya.Trik ini pertama kali di populerkan oleh helperblogger.
Meskipun trik ini jarang digunakan oleh kebanyakan blogger tapi tidak ada salahnya sobat mau mencobatrik ini.

ok langsung ya....

pertama.. monggo lihat dulu DEMOnya

LIHAT DEMO

demo by http://tanpa-isi.blogspot.com/

keren sob????? mau tau cara buatnya gak???? hehehehe

nih tak kasih tahu....


Cara Membuat Tool Tips Jquery di Blogger

• login blog
• rancangan >> edit HTML
• cari kode ]]></b:skin>
• lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>

.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}

• lalu taruh kode dibawah ini tepat dibawah kode ]]></b:skin>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src='http://vikrymadz.googlecode.com/files/helper-blogger-tooltip01.js' type='text/javascript'></script>

• simpan template

Untuk menerapkannya dipostingan sobat memakai cara berikut ini :

<b data-tooltip="Ganti ini dengan isi tootips sobat">Kata sobat Disini</b>


gimana??? mudah kan????
selamat mencoba ^_^