Cara Memasang Tooltip Otomatis di Setiap Link Blog

jQuery Tooltip Responsive setiap link dan image

Tutorial Cara Memasang Tooltip Otomatis Di Setiap Tag Link <a>, tag gambar <img> dan <p>. Nah Dengan script jQuery ini kita akan merubah tampilan tooltip title pada sebuah image dan link di blog kita menjadi responsive dan lebih jelas...

Script jQuery Tooltip ini akan bekerja jika dalam tag gambar dan link blog kalian terdapat title tag, jadi kalo link blog kalian tidak di sertai dengan title maka tooltipnya tidak akan tampil...

Jika kalian belum tau cara memberi tag titel pada setiap link, bisa ikuti tutorial pada post berikut ini....

Trik SEO | Cara Menambahkan Title Tag di Setiap Link Url Pada Blog

Bekitu juga dengan tag image { <img> } jika pada tag image tidak di beri title tag maka tooltipnya tidak akan tampill... untuk mengatasinya kalian bisa menambahkan title tag dan alt tag secara menual ke postingan kalian...

Apabila kalian ingin memasang title tag dan alt tag pada setiap gambar di postingan blog secara otomatis, bisa gunakan cara alternatif berikut ini....

Trik SEO | Cara otomatis menambahkan atribut alt tag dan title tag di setiap image / gambar pada blog

Nah jika semua itu sudah terpenuhi, pada setiap link dan gambar blog sudah terdapat atribut title tag, maka sekarang kita bisa melanjutkan ke tutorial cara merubah tampilan tooltip default blogger dengan tampilan yang menarik dan tentunya responsive..

Responsive Tooltip Otomatis pada link image dan gambar di blogger.

• Login terlebih dahulu ke akun blogger.com

• Setelah login kalian masuk ke Menu Template, Edit HTML, Lalu cari kode </head>

• Setelah Ketemu, Masukan CSS Dibawah Ini Tepat Di Atasnya

<style type='text/css'>
/*Simple Tooltip Responsive*/
#tooltip{text-align:center;color:#fff;background:#111;position:absolute;z-index:100;padding:15px;border-radius:3px}
#tooltip:after{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}
</style>

• Langkah selanjutnya, kalian cari kode </body>

• Kalo sudah ketemu, masukan script dibawah ini tepat di atasnya

<script type='text/javascript'>
//<![CDATA[
// Tooltip Ini Akan Bekerja Pada Tag Sebagai Berikut
    $("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>

• Kalo sudah di Pasang, tinggal save template dan lihat hasilnya :)

Jika Tooltipnya tidak tampil silahkan pasang kode dibawah ini tepat di atas </head>

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>

• Setelah Semuanya terpasang dan lancar tanpa masalah, saatnya saya bilang #shodaqollohul'adhim

Cukupsekian dan terima kasih, semoga artikel tentang Tutorial Cara Memasang Tooltip Responsive pada Blogger dengan jQuery ini bermanfaat bagi kita semua :)

http://blog.kangrian.com/2014/06/Responsive-Tooltip-di-Blog-Dengan-jQuery.html