Tutorial : Tooltip.
Assalamualaikum :)
Ada sesiapa still tak tahu apa itu tooltip? oke tooltip ni macam keterangan bagi sesuatu ikon or gambar. haha oke arrien tak reti nak terangkan but cuba tengok gambar bawah nie, Ada kan nampak yang warna kelabu tulis "ASK'' tu? kalau nak lebih tahu, click [live preview] tu :D
Nampak dah? bila korang sentuh je gambar tu dia keluar ayat yang korang letakkan untuk gambar tu. So jom pergi ke tutorialnya.
Template Designer ;
1.Dashboard > Layout > Add a Gadget > HTML/JavaScript
2. Copy code nie
<style>3. Paste kan dalam kotak HTML/JavaScript tadi.
#s-m-t-tooltip {
background: black;
font-size: 9px;
line-height: 11px;
-webkit-animation: zoom 600ms;
font-family: cambria;
letter-spacing: 1px;
text-transform: uppercase!important;
color: #fff;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
border-radius: 5px;
margin: 24px 14px 7px 12px;
text-transform: lowercase;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
4. Save!
5. Kemudian, copy code bawah nie;
title="ayatkorangsendiri"6. Paste kan sebelum tanda /> akhir gambar or icon korang. Contoh;
<img src="http://data1.whicdn.com/images/172498921/large.jpg" title="ayatkorangsendiri" />
Classic Template/Blogskin;
1.Dashboard > Template > Edit HTML
2. Tekan CTRL+F dan cari code </style>
3. Copy code bawah nie;
<style>4. Paste bawah code yang korang cari di no.2
#s-m-t-tooltip {
background: black;
font-size: 9px;
line-height: 11px;
-webkit-animation: zoom 600ms;
font-family: cambria;
letter-spacing: 1px;
text-transform: uppercase!important;
color: #fff;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
border-radius: 5px;
margin: 24px 14px 7px 12px;
text-transform: lowercase;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
5. Copy code bawah nie;
title="ayatkorangsendiri"6. Paste kan sebelum tanda /> akhir gambar or icon korang. Contoh;
<img src="http://data1.whicdn.com/images/172498921/large.jpg" title="ayatkorangsendiri" />7. Preview & Save.
Note: Warna merah tu tukarkan dengan code color yang korang nak sendiri. boleh search google ''HTML color code".
0 Comments