Tutorial : Tooltip. | I N F I N I T E

HOME OWNER TUTORIAL ARTWORK BLOGSKIN ASK.FM

Tutorial : Tooltip.


Alívio Imediato
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>
#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>
3. Paste kan dalam kotak HTML/JavaScript tadi.
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>
#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. Paste bawah code yang korang cari di no.2
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".


Tiada ulasan:

 
Copyright © .2011-2017. Inspired by Kio.All Right Reserved by Arrien Amani