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 kalau 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, sanggup ikuti tutorial pada post berikut ini....

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

Bekitu juga dengan tag image { <img> } kalau pada tag image tidak di beri title tag maka tooltipnya tidak akan tampill... untuk mengatasinya kalian sanggup 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, sanggup gunakan cara alternatif berikut ini....

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

Nah kalau semua itu sudah terpenuhi, pada setiap link dan gambar blog sudah terdapat atribut title tag, maka kini kita sanggup 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 isyarat </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 isyarat </body>

• Kalo sudah ketemu, masukan script dibawah ini sempurna 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 risikonya :)

Jika Tooltipnya tidak tampil silahkan pasang isyarat dibawah ini sempurna 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, biar artikel perihal Tutorial Cara Memasang Tooltip Responsive pada Blogger dengan jQuery ini bermanfaat bagi kita semua :)

https://tutorialcarapintar.blogspot.com//search?q=memasang-tooltip-otomatis-di-link-blog