Tuesday, August 27, 2013

Tutorial : Put Tooltips

Rilakkuma

こんにちは, 안녕하세요 , Assalamualaikum. 

Dah 2 minggu an? Atin x dapat nak update blog sebab malas la nak tengok blog hari hari hahaha. Jadi hari ni atin akan update lah ye. So hari ni punye tutor tooltips. Kalau tak tau ape itu tooltips , boleh tengok example bawah ni . Code atin credit dari ayuni k.

| LIVE PREVIEW |


Blogskin/Classic Template
 Dashboard > Template
 Tekan Ctrl + f serentak ,cari code </html>
 Copy code bawah ni : 
<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 di bawah code </html>.
 Then, cari code </style> pula
 Copy code bawah ni 
#s-m-t-tooltip {
    background: #262626;/* change the background color */
    font-size: 9px;/* change the font size */
    line-height: 11px;
    font-family: cambria;/* change the font */
    letter-spacing: 2px;
    text-transform: lowercase;/* can be lowercase, uppercase, none */
    color: #fff;/* change the text color */
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
    -webkit-box-shadow: 2px 2px 3px #ccc;
    -moz-box-shadow: 2px 2px 3px #ccc;
    box-shadow: 2px 2px 3px #ccc;
}
 Paste code di atas code </style> tadi.
 Preview & save


*caranya, tambah  title="NAME" sebelah ayat atau ape2.. 
*Example : <a href="fatinhalid.blogspot.com"  title="atinVIP" >❤</a>




Template Design/Simple
 Dashboard > Design > Edit html
 Tekan Ctrl + f serentak cari code </head>
 Copy code bawah ni : 
<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 di bawah code </head> tadi
 Then, cari code ]]></b:skin> pula
 Copy code bawah ni 
#s-m-t-tooltip {
    background: #262626;/* change the background color */
    font-size: 9px;/* change the font size */
    line-height: 11px;
    font-family: cambria;/* change the font */
    letter-spacing: 2px;
    text-transform: lowercase;/* can be lowercase, uppercase, none */
    color: #fff;/* change the text color */
    text-align: center;
    padding: 5px 10px 5px 10px;
    display: block;
    border-radius: 5px;
    margin: 24px 14px 7px 12px;
    -webkit-box-shadow: 2px 2px 3px #ccc;
    -moz-box-shadow: 2px 2px 3px #ccc;
    box-shadow: 2px 2px 3px #ccc;
}
 Paste code tu atas code ]]></b:skin> tadi.
 Preview & save

*caranya, tambah  title="NAME" sebelah ayat atau ape2.. 
*Example : <a href="fatinhalid.blogspot.com"  title="atinVIP" >❤</a>



credit : ayuni


4 comments:

Lintang A Pramesti said...

akak, saya tak de code < / html > lah

Atin Tory said...

@Lintang A Pramesti : klo xde cari code head

Charisa Dwi Santika said...

Akak, caraa tambah "Title=name" itu kat mana ?

Charisa Dwi Santika said...

Akak, pasang title=name itu kat mana ?