Cara Memasang Tooltip Pada Blog

Trik Cara Memasang Tooltip Pada Blog Dengan Jquery - Jika pada postingan sebelumnya kita sudah membahas tentang Teknik SEO On Page Paling Ampuh ,, pada malam hari ini saya ingin berbagi sedikit tips menarik untuk mempercantik tampilan blog kita dengan Tooltips.

Tooltip merupakan sebuah tampilan yang akan menampilkan informasi berupa deskripsi baik dalam bentuk teks maupun gambar, Tooltip akan tampil pada saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website maupun blog.

untuk lebih jelasnya seperti yang terlihat pada gambar dibawah ini

Dengan menggunakan tooltip, link yang terdapat pada blog anda akan terlihat lebih menarik. untuk memasang tooltip pada blog anda caranya adalah sebagai berikut:

Trik Cara Membuat Tooltip Pada Blog Dengan Jquery

* Pertama-tama Login terlebih dahulu ke akun Blogger milik anda
* Selanjutnya klik Rancangan - Pilih Edit HTML jangan lupa centang Expand Template Widget
* Jika sudah cari kode ]]></b:skin> gunakan ctrl+f untuk mempercepat pencarian
* Lalu tempatkan kode dibawah ini sebelum kode ]]></b:skin> tersebut

#easyTooltip{
padding:5px;
border:1px solid #e6e6fa;
background:#6454cd;
}

kode berwarna biru dapat anda rubah sesuai dengan keinginan anda
* Kemudian cari kode </body> lalu tempatkan kode dibawah ini sebelum kode </body> tersebut.

<!-- jQuery -->
<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>
<!-- end tooltips -->

* Terakhir simpan template

Untuk menampilak fitur tooltip-nya, silahkan lihat contohnya seperti berikut ini -->

<a class='tooltip' href='http://ardiyantobay.blogspot.com/search/label/Berita' title='update berita terbaru'>berita</a>

ganti kode berwarna biru dengan url dan deskripsi milik anda
Selamat mencoba semoga artikel tentang Cara Memasang Tooltip Pada Blog tersebut bermanfaat untuk anda

jangan lupa baca juga yang ini ya:
Cara Membuat Kotak Admin di Blogger                                Rating: 4.5