Cara Membuat Efek Tooltip Keren Pada Text Link

Cara Memasang Efek Tooltip Pada Setiap Link, Sobat blogger, membuat efek tooltip pada sebuah link membuat tampilan efek link dengan title di blog anda bisa jadi lebih keren dan bergaya, ditunjang efek tooltip ini juga responsive,sebelumnya saya pernah melihat di blog orang lain pada saat cursor menyentuh sebuah link dengan tag title muncul title namun dengan efeknya yang berbeda gak seperti biasanya dan keren, nah pada kesempatan kali ini juga saya ingin membuat tutorial cara memasang efek tooltip bisa di terapkan di blog anda.

Di bawah ini adalah contoh efek tooltip ketika cursor menyentuh text link.

Catatan : Efek tooltip akan bekerja pada text yang mempunyai atribut Title="" jika pada template sobat tidak menggunakan atribut title pada setiap link atau url, silahkan tambahkan terlebih dahulu title tagnya di tutorial disini Cara Menambahkan Title Tag di Setiap Link Url dan Gambar. oke sekarang kita langsung untuk tutorialnya.

Cara Membuat/ Memasang Efek Tooltip Pada Text  Link

1. Buka akun blogger anda.
2. Pilih menu template > klik edit Html
3. Lalu letakan kode Javascript di bawah ini,tepat di atas kode </body>

<script>
//<![CDATA[
// Pengaturan Tooltip akan otomatis di pasang pada tag tertentu ( Setting di Bawah ini ) :
    $("a").addClass("tooltip");
    $("img").addClass("tooltip");
    $("p").addClass("tooltip");
// Responsive Tooltip Minify JS
$(function(){var targets=$("[class~=tooltip]"),target=false,tooltip=false,title=false;targets.bind("mouseenter",function(){target=$(this);tip=target.attr("title");tooltip=$('<div id="tooltip"></div>');if(!tip||tip==""){return false}target.removeAttr("title");tooltip.css("opacity",0).html(tip).appendTo("body");var init_tooltip=function(){if($(window).width()<tooltip.outerWidth()*1.5){tooltip.css("max-width",$(window).width()/2)}else{tooltip.css("max-width",340)}var pos_left=target.offset().left+(target.outerWidth()/2)-(tooltip.outerWidth()/2),pos_top=target.offset().top-tooltip.outerHeight()-20;if(pos_left<0){pos_left=target.offset().left+target.outerWidth()/2-20;tooltip.addClass("left")}else{tooltip.removeClass("left")}if(pos_left+tooltip.outerWidth()>$(window).width()){pos_left=target.offset().left-tooltip.outerWidth()+target.outerWidth()/2+20;tooltip.addClass("right")}else{tooltip.removeClass("right")}if(pos_top<0){var pos_top=target.offset().top+target.outerHeight();tooltip.addClass("top")}else{tooltip.removeClass("top")}tooltip.css({left:pos_left,top:pos_top}).animate({top:"+=10",opacity:1},50)};init_tooltip();$(window).resize(init_tooltip);var remove_tooltip=function(){tooltip.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});target.attr("title",tip)};target.bind("mouseleave",remove_tooltip);tooltip.bind("click",remove_tooltip)})});
//]]>
</script>

4. Selanjutnya letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

#tooltip {
  text-align: center;
  color: #fff;
  background: #111;
  position: absolute;
  z-index: 100;
  padding: 15px;
  border-radius: 3px;
}
#tooltip:after /* triangle decoration */ {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #111;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}
#tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid #111;
  top: -20px;
  bottom: auto;
}
#tooltip.left:after {
  left: 10px;
  margin: 0;
}
#tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
}

Disana anda bisa mengganti background dan warna teks sesuai keinginan anda, seperti yang saya tandai merah.

5. Sekarang pasang kode "JQuery" di bawah ini tepat di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Catatan : Jika kode JQuery tersebut sudah terpasang di template anda, berati langkah lima tidak perlu di lakukan, dan kode JQuery tidak boleh double di template blog anda.

Jika sudah silahkan save template dan lihat hasilnya, lalu arahkan cursor anda pada sebuah link, jika berhasil maka, ucapkan alhamdulillah, karena di taham cara membuat efek toolti di blog sudah selesai, untuk kurang dan lebihnya saya mohon maaf. Salam sukses selalu.

Share to:

Google+ Facebook Twitter