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.

·
Share On Whatsapp Or Line:
Previous
Next Post »

4 comments

Click here for comments
April 2, 2015 at 10:45 PM ×

Kalau diterapkan di halaman website yang html bukan blogspot bisa tidak ya mas?

Reply
avatar
April 3, 2015 at 5:22 AM ×

Saya Kurang Tau... tapi saya rasa Bisa lah kayanya!! :-bd :-bd :-bd

Reply
avatar

NB: Blogger Yang Bijak Selalu Meninggalkan Jejak!!!


Thank You!!! Please Jangan Lupa Follow My Blog !!!

[+] Berkomentarlah Dengan Baik Dan Sopan serta Jangan Meninggalkan Spam!!!
[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Untuk Memasukan Kode HTML Ke Kolom Komentar Anda Perlu Parse Dulu Kode tersebut Dengan Cara Klik Tombol conversion
[+] Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
[+] Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
[+] Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
[+] Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
ConversionConversion EmoticonEmoticon

Thanks for your comment