Malam sobat... masih tentang tootip, setelah sebelum saya
sudah membahas tentang tooltip kostum otomatis buat semua tautan, tidak jauh
berbeda dengan yang saya akan bahas kali ini. Banyak yang mengatakan bahwa
terlalu banyak menggunakan jQuery akan membebani loading blog sehingga akhirnya
blog tersebut menjadi lambat, tapi menurut sumber tooltip ini sangat ringan dan
pastinya keren bila dipasang di blog. Selain ringan ternyata sudah valid HTML5,
css3 dan pastinya SEO Friendly. Dan tooltip ini hanya akan berfungsi pada tag
title.
Caranya silahkan sobat ikuti tutorialnya:
Pertama salin kode dibawah tepat diatas kode </head>
<script src="https://mt-blog.googlecode.com/svn/trunk/js/tooltips.js" type="text/javascript">
</script>
<script type="text/javascript">
$().ready(function() {
$('[title]').style_my_tooltips( {
tip_follows_cursor: 'on', //tooltip mengikuti gerak cursor 'on' atau 'off'
tip_delay_time: 200 //delay waktu tooltip muncul
})
});
</script>
Dan pastikan ya template sobat sudah terpasang jQuery, jika
belum silahkan kodenya dibawah ini
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> selanjutnya salin kode CSS dibawah ini dan letakan tepat diatas ]]></b:skin> atau </style>#tooltip { background-color: #161616; border: 1px solid #333; border-radius: 4px; color: #fff; display: none; font-size: 11px Arial; position: absolute; z-index: 9999; padding: 3px 5px; } Terakhir simpan template sobat
Semoga bermanfaat ya...bila kurang mengerti silahkan
berkomentar dikotak komentar
Sumber: mas Rivai Silaban
0 komentar