Kalian tahu apa itu tooltip, bagi yang belun tau disini saya akan menjelaskannya, kegunaan atau fungsinya...akan memberi kesan cantik pada blog, karena link2 yang ada pada blog kamu akan muncul seperti title yang bisa sangat mudah kamu atur, coba kamu arahkan mouse kamu pada blog ini, nah,itulah yang dinamakan tooltips.
Login ke blogger kamu
Silahkan menuju pengaturan template
cadangkan dulu dengan mendownload template kamu untuk berjaga2 jika terjadi kesalahan dapat dengan mudah di pulihkan.
4. Cari kode ]]></ b:skin> dan letakkan kode berikut tepat diatas kode ]]></ b:skin>
#easyTooltip {
padding: 5px;
border: 1px solid #008000;
color: #00cc00;
background: #004000;
}
5. Selanjutnya copy kode di bawah ini, dan letakkan di atas kode </ head> dan letakkan kode berikut diatas kode </ head> padding: 5px;
border: 1px solid #008000;
color: #00cc00;
background: #004000;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- begin Tooltips --><script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Simpan template kamu
Sekarang pada template blog kamu sudah dilengkapi dengan tooltip, untuk memanggil fungsi tooltips lihat kode dibawah ini:
<a class='tooltip' href='url link' title='pesan tooltip'>text link</a>
Nah, tambahkan yang berwarna merah tersebut pada link kamu, demikian cara membuat tooltip dengan jQuery di blogger, semoga bisa membantu kamu....
Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan
Anda telah membaca artikel Cara Membuat Tooltip Dengan jQuery Ditulis oleh Keiruchan Agatha pada Jumat, 18 Mei 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging.
{ 0 komentar... read them below or add one }
Posting Komentar
Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...