Cara Membuat Tooltip Sederhana

Selamat Malam sobat Wahid Emalution, Ini post ke -3 pada hari ini. Saya rasanya lagi niat banget buat post. Aishh jadi curhat begini 😂.

Oke pada kali ini saya mau membagikan tutorial cara membuat tooltip sederhana pada Blogger. kita ke penjelasannya dulu ya, tooltip ini tidak untuk ke semuah link , melainkan hanya ke bagian-bagian penting pada blog saja, contoh : Breadcrumb , Judul Post , Tanggal Post , DSB. Jadi tool tip ini tidak untuk ke semuah link . 

langsung saja kita ke caranya .

1. login ke Blogger.com

2. lalu ke menu Template lalu Edit HTML.

3. Lalu sobat Letakan Kode Dibawah tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag

(function() {
    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#52b3d9";
        t.style.border = "1px solid #eaeaea";
        t.style.font = "italic 11px Ruda,Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0px 1px 5px #52b3d9";
        t.style.padding = "10px";
        t.style.color = "#fff";
        t.style.maxWidth = "200px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');
    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";
    }
    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }
    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }
})();
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt4.checked) cv = cv.replace(/</g, "&lt;");
    if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
        cv = cv.replace(/^/, "<i rel=\"pre\">");
    } else {
        cv = cv.replace(/^/, "<i rel=\"code\">");
    }
    cv = cv.replace(/$/, "</i>");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
//]]>
</script>

Nah begitu saja , Untuk tampilan , sobat bisa Atur Sendiri .

Sekian tutorial dari saya Semoga bermanfaat untuk sobat Blogger Yang Lainnya.

Terima kasih.