27 Mei 2013

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 ._.

byte ~
credit:mintcoco

10 komentar:

  1. Makasih, Kak! ^ ^
    Ribett... :3

    BalasHapus
  2. @Mayla : Mōshiwake arimase, hai -____- tsukon.

    BalasHapus
  3. saya tanya kalo efek gambar yang ada bingkainya itu gimana ya? terus pas disorot juga keluar rounding pada sudut2 gambar..
    Apa memang bawaan template blogskin gitu?
    Gomawo~

    BalasHapus
  4. @ Wahyu : itu bukan bawaan blogskin, ka .______. Sebenarnya bisa digunakan template lain, dan yg pasti ada acara edit-mengedit code html.

    BalasHapus
  5. Makasih banyak liya!;) btw blog kamu keceh banget (y)

    BalasHapus
  6. @ Dina : Makasih kembali. Lebih keceh kamu :D

    BalasHapus
  7. THANKS! dah jadik! tapi saya guna denim template :D

    BalasHapus
  8. @ Adam : oh, ternyata di denim juga bisa? okeh makasih kembali infonya ;D

    BalasHapus
  9. MINTCOCO itu siapa, ya kak? hehehe.. xD

    BalasHapus
  10. blog nya http://ayunipororo.blogspot.com/

    BalasHapus

NO HARSH WORDS
please, don't SPAM here!
I'll reply if I didn't busy -.-