Membuat Tootip Pada semua Element Blog

Membuat Tootip Pada semua Element Blog

Salam buat semua pada pertemuan perdana ini saya bagikan dulu tutorial blog dulu cara Membuat Tootip Pada semua Element Blog. Nanti selanjutnya pada postingan berikutnya saya bagikan post yang lainya. Baik silahkan simak artikel berikut di bawah ini dengan seksama.

Trik Tootip Pada semua Element Blog :

Dengan trik ini blog anda bisa tampil tooltipnya pada semua element contohnya pada blog ini. semua element blog anda akan muncul tooltopsnya dari tag gambar span dan pastinya semua element akan muncul tooltipnya. Sesuai yang anda inginkan. penasaran silahkan yang ingin mencobanya.

Cara memasangnya :

Copy kode di bawah ini dan pastekan tepat di atas kode </style> atau diatas kode ]]></b:skin> cari kode </style> dan ]]></b:skin> pada bagian template anda, caranya tekan CTRL + F.

 /* tooltip */
#tooltip{text-align:center;color:#660066;background:#FFFFA8;position:absolute;z-index:100;padding:8px 15px;border-radius:3px;box-shadow:2px 2px 3px rgba(0.128.153);border:2px solid #008099;z-index:100000}
#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #FFFFA8;content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px}
#tooltip:before{width:0;height:0;border-left:12px solid ;border-right:12px solid transparent;border-top:12px solid transparent #9966CC;content:'';position:absolute;left:50%;bottom:-12px;margin-left:-12px}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #FFFFA8;top:-20px;bottom:auto}
#tooltip.top:before{border-top-color:transparent;border-bottom:12px solid #008099;top:-24px;bottom:auto}
#tooltip.left:after{left:10px;margin:0}
#tooltip.left:before{left:8px;margin:0}
#tooltip.right:after{right:10px;left:auto;margin:0}
#tooltip.right:before{right:8px;left:auto;margin:0}
 

Selanjutnya cari kode </body> Lalu copy kode dibawah ini dan pastekan tepat diatas kode </body>

 <script type='text/javascript'>
//<![CDATA[
window.twttr=function(e,t,n){var r,i,s=e.getElementsByTagName(t)[0];if(e.getElementById(n))return;i=e.createElement(t);i.id=n;i.async=true;i.src="https://platform.twitter.com/widgets.js";s.parentNode.insertBefore(i,s);return window.twttr||(r={_e:[],ready:function(e){r._e.push(e)}})}(document,"script","twitter-wjs");
$(function(){$(".menu,.menu-search").click(function(){$("#css-menu").css({right:"0"});$("#page_content").css({margin:"0 340px 0 -340px"})});$(".close-menu").click(function(){$("#css-menu").css({right:"-340px"});$('#search').hide('slow');$("#page_content").css({margin:"0"})});$('.menu-search').click(function(){$('#search').show()})});
$("#cssmenu ul ul li:odd").addClass("odd");$("#cssmenu ul ul li:even").addClass("even");$("#cssmenu > ul > li > a").click(function(){$("#cssmenu li").removeClass("active");$(this).closest("li").addClass("active");var e=$(this).next();if(e.is("ul")&&e.is(":visible")){$(this).closest("li").removeClass("active");e.slideUp("normal")}if(e.is("ul")&&!e.is(":visible")){$("#cssmenu ul ul:visible").slideUp("normal");e.slideDown("normal")}if($(this).closest("li").find("ul").children().length==0){return true}else{return false}});
INI BATAS TOOLTIP ALL KOMPI AJAIB
$('a,img,img.related-post-item-thumbnail,a.related-post-item-title,span.homekompi a,.authorphoto,blockquote,pre,ul#recent-posts a,.ringMenu ul li.main,.ringMenu ul li.main2,.ringMenu ul li a span,.credit-link a,.follow-box div.google-followbox,input.search-field,i.klik-url').not('.paginator,.paginator span a,a.related-post-item-titleimg,.follow-box a,a.alexa,img.prtool,.post-body .separator a,.facebox a,.twitter-box a,.ringMenu ul li a').attr('rel', 'tooltip');
$('.follow-box a,a.alexa,img.prtool,.post-body .separator a,.facebox a,.twitter-box a,.ringMenu ul li a').data("title", $('.follow-box a,a.alexa,img.prtool,.post-body .separator a,.facebox a,.twitter-box a,.ringMenu ul li a').attr("title")).removeAttr("title");
$('blockquote,pre').attr('title', 'Double click to select all text!');$('i.klik-url').attr('title', 'Click to block text!');
$(document).ready(function(){var e=$("[rel~=tooltip]"),t=false,n=false,r=false;e.bind("mouseenter",function(){t=$(this);tip=t.attr("title");n=$('<div id="tooltip"></div>');if(!tip||tip=="")return false;t.removeAttr("title");n.css("opacity",0).html(tip).appendTo("body");var e=function(){if($(window).width()<n.outerWidth()*1.5)n.css("max-width",$(window).width()/2);else n.css("max-width",340);var e=t.offset().left+t.outerWidth()/2-n.outerWidth()/2,r=t.offset().top-n.outerHeight()-20;if(e<0){e=t.offset().left+t.outerWidth()/2-20;n.addClass("left")}else n.removeClass("left");if(e+n.outerWidth()>$(window).width()){e=t.offset().left-n.outerWidth()+t.outerWidth()/2+20;n.addClass("right")}else n.removeClass("right");if(r<0){var r=t.offset().top+t.outerHeight();n.addClass("top")}else n.removeClass("top");n.css({left:e,top:r}).animate({top:"+=10",opacity:.9},50)};e();$(window).resize(e);var r=function(){n.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});t.attr("title",tip)};t.bind("mouseleave",r);n.bind("click",r)})});
//]]>
</script> 

Setelah kodenya terpasang dengan benar save atau simpan template anda dan silahkan coba buka posts blog anda dan coba sorot gambar dan element lain blog anda sudah tampil belum tooltipsnya. kalau belum berhasil silahkan baca ulang artikel ini. SELAMAT MENCOBA SEMOGA BERHASIL.