Customize Tooltips

   Assalamu'alaikum! Aku bawa tutorial baru nih! Credit code ke kak Ehza. Khusus untuk template classic! Lihat versi kedua disini^_~

After being customize..

Live preview

Follow steps nya baik baik ya, semoga berhasil!

• Go to Template > cari kode </head>
• Paste kode ini tepat di bawah kode </head>

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

• Sudah? cari lagi kode </style>
• Kemudian paste lagi kode ini tepat di atas kode</style>

#s-m-t-tooltip {
    max-width:250px;
    background: #F1F6FF;/* change the background color */
    font-size: 10px;/* change the font size */
    line-height: 13px;
    box-shadow:inset 0px 0px 2px 2px #E6EEFF;
    font-style:italic;
    font-family: Georgia;/* change the font */
    letter-spacing: 2px;
    text-transform: lowercase;/* can be lowercase, uppercase, none */
    color: #222222;/* change the text color */
    text-align: center;
    padding: 3px 4px 3px 6px;
    display: block;
    z-index: 100;
    border-radius: 5px;
    position: absolute;
    margin-left:10px;
    margin-top:16px;
}

Edit the code :

Merah : warna background

Biru : nama font

Fuchsia : warna tulisan tooltips

How to use the tooltips?
Copy below code and paste it anywhere you want it to appear...

<a href="http://www.anugerahsalsa.co.vu/" title="AnugerahSalsa♥">Hover here !</a>

The blue highlighted text : the link.
The pink highlighted text : the title of the tooltips.

Re-tutor? re-contribute? re-post? Please give my blog url under your post!

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest