Cukup dengan menambahkan sebuah plugin dengan ukuran sangat kecil dan ringan, sehingga tidak mempengaruhi kecepatan loading pada blog atau website anda. Efek blink ini akan berhenti jika disorot oleh mouse dan jika dilepas maka akan berkedip lagi serta kecepatan berkedip yang berbeda pada masing-masing objek.
Untuk menerapkannya, cukup tambahkan jquery dibawah ini tepat diatas </body>.
<script type='text/javascript'>
/*<![CDATA[*/
(function($)
{
$.fn.blink = function(options)
{
var defaults = { delay:500 };
var options = $.extend(defaults, options);
return this.each(function()
{
var obj = $(this);
if (obj.attr("timerid") > 0) return;
var timerid=setInterval(function()
{
if($(obj).css("visibility") == "visible")
{
$(obj).css('visibility','hidden');
}
else
{
$(obj).css('visibility','visible');
}
}, options.delay);
obj.attr("timerid", timerid);
});
}
$.fn.unblink = function(options)
{
var defaults = { visible:true };
var options = $.extend(defaults, options);
return this.each(function()
{
var obj = $(this);
if (obj.attr("timerid") > 0)
{
clearInterval(obj.attr("timerid"));
obj.attr("timerid", 0);
obj.css('visibility', options.visible?'visible':'hidden');
}
});
}
}(jQuery))
$(document).ready(function()
{
$('.blink').blink();
$('.blink').mouseover(function(){
$(this).stop().unblink();
});
$('.blink').mouseout(function(){
$(this).blink();
});
});
$(document).ready(function()
{
$('.blink2').blink({delay:900});
$('.blink2').mouseover(function(){
$(this).stop().unblink();
});
$('.blink2').mouseout(function(){
$(this).blink();
});
});
/*]]>*/
</script>
Kecapatan berkedip bisa daiatur dengan merubah nilai 500 dan 900 pada script diatas.
Penempatan pada teks atau image yang akan diterapkan efek blink dengan cara menambah class="blink" seperti contoh dibawah.
<div class="blink">
Teks atau link image berkedip
</div>
Dan class="blink2" pada objek berkedip kedua.
<div class="blink2">
Teks atau link image berkedip kedua
</div>
Silahkan terapkan dengan benar dan lihat hasilnya.
Jika hanya ingain menarapkan efek kedip tanpa hover mouse, maka jquery-nya pakai seperti contoh dibawah.
<script type="text/javascript">
//<![CDATA[
(function(e){e.fn.blink=function(t){var n={delay:500};var t=e.extend(n,t);return this.each(function(){var n=e(this);setInterval(function(){if(e(n).css("visibility")=="visible"){e(n).css("visibility","hidden")}else{e(n).css("visibility","visible")}},t.delay)})}})(jQuery);$(document).ready(function(){$(".blink").blink();$('.blink2').blink({delay:900})})
//]]>
</script>
Jika hanya ingin menerapkan pada satu objek, maka jquery yang di teks box merah bisa dihapus.
Saya rasa hanya itu saja yang dapat saya bagikan, bisa tinggalkan pesan apabila ada yang kurang jelas.
Show Parser Hide Parser