Thursday, April 2, 2015

Trik Memasang Tooltip Simple Di Blogger

Tooltip Otomatis Paling Link dan Ringan Loading


Selamat malam menejelang pagi, kali ini saya akan share artikel tutorial blogspot yaitu Cara Memasang Tooltip Keren Di blog Simple Tanpa Memberatkan Loading Blog.Bagi sebagian orang yang sudah berpengalaman di dunia blogger kata tooltip sudah tidak asing lagi karena mereka sudah mengenal tootip sejak lama dan tooltip juga sering muncul pada blog blog tertentu. Lantas apakah Tooltip Itu...???


tooltip keren dan ringan untuk blog


Tooltip adalah suatu tulisan atau huruf yang keluar saat pointer mouse PC Kita tertuju kepada Sebuah link Aktif atau bisa dikatakan sebuah tulisan yang berwarna biru Umumnya. Menurut Gue!!!
Gimana cara memasangnya... mangga ikuti tutorial dibawah ini dengan seksama.... demonya ada diblog saya ini saya pasang sengaja untuk menarik perhatian warga...
Pasang CSS ini di ]]></b:skin> atau </style>

.tooltip {
background-color:#000;border-radius:3px;
color:white;font: 14px Oswald;
padding:10px 10px;display:block;box-shadow:0 1px 2px rgba(0,0,0,0.4);}

Pasang Script ini di atas kode </head> atau </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
    $.fn.myTooltip = function(n,o) {
        n = n || "title";
        o = jQuery.extend({
            top: 30,
            left: 30,
            fade: true,
            time: 400
        }, o);

        return this.each(function() {
            var ww = $(window).width(),
                wh = $(window).height();
            $(window).resize(function() {
                ww = $(this).width(),
                wh = $(this).height();
            });
            $(this).on({
                mouseenter:function(e) {
                    var t = $(this).attr(n),
                        tp = e.pageY,
                        lp = e.pageX;
                    $('body').append('<span class="tooltip" style="position:absolute;z-index:999;display:none;">'+t+'</span>');
                    if(o.fade) {
                        $('.tooltip').fadeIn(o.time);
                    } else {
                        $('.tooltip').css('display', 'block');
                    }
                    if($(this).attr('data-custom')) {
                        $('.tooltip').addClass($(this).data('custom'));
                    }
                    var ew = $('.tooltip').outerWidth()+30;
                    $(this).removeAttr(n).mousemove(function(e) {
                        var tp = e.pageY,
                            lp = e.pageX;
                        if(lp+ew > ww) {
                            lp = ww-ew-o.left;
                        }
                        $('.tooltip').offset({top:tp+o.top,left:lp+o.left});
                    });
                },
                mouseleave:function() {
                    $(this).attr(n, $('.tooltip').html());
                    $('.tooltip').remove();
                }
            });
        });

    };
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a[title]').myTooltip("title");
});
//]]>
</script>

Perhatikan Jquery yang berwarna biru itu, jika blog anda sudah ada pasang Jquery ini dengan versi apapun silahkan abaikan Jquery ini.

Cara Aktifkan Tooltip Pada gambar dan Link dipostingan:

01. Biasanya gambar akan telihat seperti ini setelah Upload.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--_NQxfq0k8Q/UoQiH_dZMzI/AAAAAAAAADM/VB1AoHJR9IU/s1600/Tooltip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/--_NQxfq0k8Q/UoQiH_dZMzI/AAAAAAAAADM/VB1AoHJR9IU/s1600/Tooltip.jpg" /></a></div>

Dan jika mau aktifkan tooltip akan telihat seperti dibawah ini (Kita tinggal tambahkan title pada gambar saja seperti contoh dibawah ini.

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--_NQxfq0k8Q/UoQiH_dZMzI/AAAAAAAAADI/bQd3Cf0OxqY/s1600/Tooltip.jpg" target="_blank" title="Tooltip Otomatis Paling Link dan Ringan Loading"><img alt="Tooltip Otomatis Paling Link dan Ringan Loading" border="0" src="http://3.bp.blogspot.com/--_NQxfq0k8Q/UoQiH_dZMzI/AAAAAAAAADI/bQd3Cf0OxqY/s1600/Tooltip.jpg" /></a></div>

02. Aktifkan link dan jika kita klik HTML akan terlihat seperti ini

<a href="http://tf-m.blogspot.com/" target="_blank">Tooptip</a>

Untuk Aktifkan tooltip kita tinggal tambahkan title pada link seperti contoh dibawah ini.

<a href="http://tf-m.blogspot.com/" target="_blank" title="tooltip">Tooptip</a>

Incoming Search
trik memasang tooltip keren untuk blog,cara memasang tooltip untuk blogger,trik memasang huruf yang tampil ketika mouse tertuju pada link,cara membuat huruf melayang keren di blog,trik memasang tooltip simple untuk blogger,cara memasang tooltip ringan loading blog,trik membuat tulisan melayang setelah pointer mouse di tunjukan ke Link Aktif.


Anda Sedang Membaca Artikel Tentang Trik Memasang Tooltip Simple Di Blogger Dan Artikel Ini URL Permalinknya Adalah https://muiztech.blogspot.com/2015/04/trik-memasang-tooltip-simple-di-blogger.html, Saya Harap Artikel Ini Bisa Bermanfaat Bagi Anda Yang Membacanya.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner