Cara Membuat Tooltip Sederhana Dengan CSS di Blog

Selamat siang brad, gimana kabar kalian semua ? dah lama gue gak ngeposting, posting sebelumnya itu posting temen, oke sekarang gue mau ngeposting Cara Membuat Tooltip Sederhana di Blog. Penasaran kan? ok langsung aja ke tutorialnya :)

1. Pertama" Pergi ke www.blogger.com 

2. Lalu pergi ke Dashbord -> Template -> Edit HTML

3. Kemudian cari kode ]]></b:skin> Gunakan CTRL + F biar nyarinya lebih cepet dan kemudian letakkan code dibawah ini diatas kode ]]></b:skin> :

.tooltip{position:relative; display:inline-block; white-space:nowrap}
.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:auto; 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}

4. Setelah itu sisipkan kode ini di bawah kode ]]></b:skin> 

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src='https://lioneldandy.googlecode.com/files/DANDYtooltip.js'
type='text/javascript'></script>

5. Selanjutnya klik Save Template / Simpan Template

Cara utk penggunaan Tool Tip ini sangat sederhana, anda tinggal menaruh kode anda yg ingin disisipkan tooltip dengan data-tooltip="Title"  contoh :

<a class='DANDYtext' href='#test' data-tooltip='Test Tooltip | Xpress Community'>Test Tooltip | Xpress Community</a> 

Atau

<a href="Link" data-tooltip="Isi untuk judul nya (tooltipnya)">Judulnya</a> 

Nah data-tooltip='Test Tooltip | Xpress Community' itu untuk Tooltip / Titlenya ...
nih langsung aja liat demonya

Demo

nah gimana ? keren kan, oke sampe sini aja dari gue, semoga artikel yg ini berguna untuk blogger semuanya :D
Arigatou Gozaimasu ~ :)