Customize Tooltips

Hari ini hari Minggu dan koneksi internet lumayan cepet. Kesempatan buat post tuto nih, hehe.. Nah, kali ini aku mau bahas sama yang namanya tooltips! Tooltips itu susah sih dijelasin. Misalnya itu link, biasanya kalo kursornya nyentuh link (hover) itu, muncul kata-kata gitu. Penasaran? Read more aja yaa!

Coba kursor kalian nyentuh kata, ini. Apakah ada kata 'this is tooltips'? Itulah tooltips! ^^
Nah, seperti itulah tooltips. Kali ini, Wafia request, nih, untuk mengubah tooltips seperti punyaku. Sebelumnya, thanks for Trinadia udah ngepost soal tooltips ini ^^

Tooltips ini bisa dipakai semua template blogger, oke? Termasuk yang pakai blogskins.

• Dasbor > Template > Edit HTML

Design Templ.

• Cari kode ini

]]></b:skin>

Classic Templ. / Blogskins

• Cari kode ini

</style>

• Kalau sudah ketemu, copy kode ini

#s-m-t-tooltip {
background: #aaa;
font-size: 12px;
line-height: 12px;
font-family: comic sans ms;
font-size:12px;
letter-spacing: 2px;
text-transform: lowercase;
color: #000;
text-align: left;
padding: 5px 10px 5px 10px;
display: block;
border-radius: 5px;
margin: 24px 14px 7px 12px;
border: 2px solid #000;
 -moz-box-shadow: 0 0 0px 2px #eee;
  -webkit-box-shadow: 0 0 0px 2px #333;
}

• Paste kode tooltipsnya di atas kode </style> (untuk blogskins) dan kode b:skin (untuk design template)

Oh iya, tooltips itu belum bisa bekerja kalo nggak dipasangin kode ini nih! Jadi, ini belum selesai yaa!

• Copy kode ini

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'/>
<script src='http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js' type='text/javascript'/>
<script>
    (function($){
        $(document).ready(function(){
            $(&quot;[title]&quot;).style_my_tooltips();
        });
    })(jQuery);
</script>

• Untuk Design Templ. Paste kode tadi di atas kode

</head>

• Untuk Blogskins / Classic Templ. Paste kode tadi di atas kode 

</html> 

• Langsung save, yaaa! Semoga bermanfaat ^^  

Untuk cara pakainya, beri kode ini pada link yang ingin kalian beri tooltips.

<a href="your link"title="tulis tooltips yang kamu inginkan">ini kata-katamu</a>

Nanti, jadinya begini deh, ini kata-katamu. Coba di hover, hehe... Selamat mencoba!