Tutorial Tooltips

---

Assalamualaikum


Today aku nak share tutorial dekat korang semua iaitu Tutorial Tooltips. Memandangkan aku tengah rajin & kebetulan pula ada orang request kat aku, so dengan rajin nya aku nak mengajar korang semua how to put Tooltips ni. Sebelum aku merapu meraban dekat sini jom kita start xD





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;
   }
 Paste code di atas code </style>
 Preview & save


*tambah  title="NAME" sebelah ayat atau gambar or ape2
*Example : <a href="ninakaryana.blogspot.com"  title="NinaShukri" >Nina</a>
*Example : <img src="http://media.tumblr.com/tumblr_m2fwq0QdoJ1qdlkyg.gif"  title="NinaShukri" />


Template Design

 Dashboard > Template > 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>
 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;
  }
 Paste code tu atas code ]]></b:skin> tadi.
 Preview & save

*tambah  title="NAME" sebelah ayat atau gambar or ape2
*Example : <a href="ninakaryana.blogspot.com"  title="NinaShukri" >Nina</a>
*Example : <img src="http://media.tumblr.com/tumblr_m2fwq0QdoJ1qdlkyg.gif"  title="NinaShukri" />

Credit : AtinTory

---