Sebenarnya tutorial ini saya dapatkan dari sahabat blogger tapi lupa yang mana, hehe. Tooltip yang saya share ini menggunakan Jquery tapi tidak akan membebani atau menambah berat blog. Tapi jikalau tidak memakai Jquery pemasangannya harus manual.
Untuk demo lihat gambar berikut atau link dibawah :
Berikut Tutorialnya :
1. Silahkan log in ke blogger.com2. Ke Dasboard > Template > Edit Html.
3. Salin kode berikut dan tempelkan di kode ]]></b:skin> atau </style>
#tooltip { background-color: #000; border: 1px solid #333; border-radius: 5px; color: #fff;display: none; font-size: 13px; position: absolute; padding: 4px 8px; box-shadow : 0 3px 4px black;}4. Selanjutnya salin juga kode berikut lalu tempel diatas kode </head>
<script src='https://kang-pp.googlecode.com/svn/Jquery/tooltip' type='text/javascript'></script>
<script type='text/javascript'>
$().ready(function() {
$('[title]').style_my_tooltips( {
tip_follows_cursor: 'on',
tip_delay_time: 100
})
});
</script>5. Simpan Template dan Selesai.
Catatan
Tooltip ini hanya bekerja pada attribute title=" ". Dan jika sobat belum terpasang kode Jquery berikut silahkan pasang namun jika sudah ya jangan pasang lagi.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>Terima kasih sudah berkunjung, silahkan berkomentar setelah membaca artikel.
Tag :
Jquery,
Tutorial Blog
0 Komentar untuk "Cara membuat tooltip link otomatis keren di blog"