Tutorial : Tooltips title

 
Moshi moshi, Minna-san!!
Watashi mau ngasih tutorial 'mengapa navigate watashi muncul tulisan ketika di hover?'
Tulisan itu sebenarnya 'title' . Biasanya, kalau kita hover banner orang, muncul title itu. Untuk me-apply-kannya di blog kita, kita harus menggunakan script 'tooltips'.
Mian,  yang saya tahu, script ini hanya bisa diblogskin. Tapi, gak tau juga bisa atau gaknya di simple template/template designer.
Seperti foto di bawah ini  -_____-

                                            

Steps by steps


  • Tekan F3,  kemudian cari code <html> 
  • Copy code di bawah ini,
<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>
  • Paste code tersebut di bawah code <html>
  • Cari lagi code </style>
  • Copy code di bawah ini, dan pastekan di atas code </style>
#s-m-t-tooltip {
z-index: 99999;
    background: #D2CBBF;
    font-size: 9px;
    line-height: 11px;
    font-family: trebuchet ms;
    letter-spacing: 1px;
    text-transform: lowercase;
    color: #fff;
    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);
}
  • Untuk menggunakannya, tinggal kita tambahkan code ini terserah dimana saja  :   title="URWORD"
  • Example *mynavi :   
<a class="jieun" onClick="document.getElementById('content').innerHTML=document.getElementById('entry').innerHTML" title="posting">ENTRY</a> <span style="padding:4px;"></span>
  • Atau *mylink :
Biasanya kan link seperti ini :    <a href="http://ramadhan-liya.blogspot.com">
nah letakin di antara tanda (")   dan (>)
seperti ini :
<a href="http://ramadhan-liya.blogspot.com/"title="ramadhan liya"><img src=http://i.imgur.com/R0PU02L.gif/></a>
  • Pokoknya,  letakin di antara tanda petik (")  dan tanda lebih ( > )
  • Preview -____-
  • Done.
Orange :  kata-kata kamu. terserah =________=
Blue  :  gak usah diapa-apain. Jangan sampai tanda petik dihapus.
If you not understand / missunderstand,  ask me ._.
Credits : Blog 

No comments:

Post a Comment

Moshi - Moshi

Leave comment here
Request ? tell in cbox
Dont bad words

Obey the rules ? Free comment :)

1
2
3
4
5
 
Related Posts Plugin for WordPress, Blogger...