Nampak tak yang kaler kuning tuh ? Nampak kan ?
So, harinih mira nak share tooltips title hover nih dengan korang . Sebenarnya mira ingatkan kat blogskin je boleh guna . But lepas godek godek code . Alhamdulillah . Baru jadi kat classic template nih .
So jom kita mulakan okie . Step by step tau .
- korang cari code <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/>
<script src='http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>
<script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
- paste kan bawah code <head> tadi .
- Then, korang carik pulak code ]]></b:skin> and korang paste kan code kat bawah nih atas code ]]></b:skin>
#s-m-t-tooltip {
z-index: 99999;
background: #FCFAD4;
font-size: 9px;
border:1px dashed #eee;
line-height: 11px;
font-family: trebuchet ms;
letter-spacing: 1px;
text-transform: lowercase;
color: #000;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
border-radius: 5px;
margin: 24px 14px 7px 12px;
-webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
}
Tambah kan title="TITLE ANDA" dibelakang link anda yang anda nak tooltips title hover nih ada
Yang nih sebijik cam saya but boleh ejas dan tukar kalau nak ^^
Nota kaki : Merah tuk tukar kaler background
Biru tuk tukar border sama ada dashed,solid atau dotted
ketebalan dan warna tukar lah kalau nak
Oren tuk tukar kaler font tuh
So apalagi , cubalah . But preview dlu okay . Tak pon save template tuh . Kang tak jadik nangis pulak hilang code code yang lain :)
Selamat mencuba !
terima kasih kak yus guna tuto ni ae? :DD
ReplyDeleteThanks! ^^
ReplyDelete