Customize Tooltips #2

      Mungkin kalian bosan sama tooltips yang gitu gitu aja? Nah di tuto kali ini aku mau share cara mengubah tooltips! Kodenya aku dapat dari blogskins(dot)com. Ini khusus untuk template classic! Lihat versi pertama disini^_~

After bening costumize...

Follow steps nya baik baik ya, semoga berhasil!

• Pertama tama, pasang kode fontface dulu. Copy kode ini

/* FONTS */
@font-face {font-family: "littlefont"; src: url('http://static.tumblr.com/yn7vk7p/QSsmnz073/tinyfontss.ttf');}

• Setelah itu cari kode </head>.
• Paste kode ini tepat dibawah kode </head>

<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? kemudian cari lagi kode </style>
• Kemudian paste kode ini tepat diatas kode <style>

#s-m-t-tooltip {

font:8px littlefont;

color:#fff;

text-transform:uppercase;

letter-spacing: 1px;

background: #ffe4e1;

display: none;

position: absolute;

z-index: 9999999;

padding: 2px 5px 2px 5px;

text-shadow:1px 1px 0px #ffaee8;

max-width: 150px;

margin: 10px;

border: 1px solid #ffc0cb;

}

• Ubah kode yang berwarna merah dengan kode warna favoritmu.

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