Selamat malam tahun baru, sebelum tahun baru saya ingin membuat sebuah artikel tentang tutorial blog khususnya pada template ini. Saya akan membahas cara untuk memodifikasi tooltip di blog. Sebelumnya, tooltip merupakan sesuatu yang akan muncul jika mouse berada hover di text atau apapun yang memiliki title didalamnya. Tooltip yang biasanya muncul yaitu berbackground putih dan berwarna text hitam tanpa shadow atau bayangan yang menghiasinya. Namun, dengan adanya sebuah javascript tooltip tersebut bisa dijadikan lebih indah dari aslinya. Anda dapat memodifikasi warna background dan text bahkan menambahkan box-shadow pada tooltip tersebut. Tooltip tersebut bisa dilihat di blog ini. Nah, berikut tutorialnya
Letakkan Javascript di bawah tepat di atas </body>
<script type='text/javascript'>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(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 = "#e74c3c";
t.style.border = "1px solid #ccc";
t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
t.style.boxShadow = "0px 1px 5px #fff";
t.style.padding = "10px";
t.style.color = "#fff";
t.style.maxWidth = "180px";
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;
}
}
})();
//]]>
</script>
Kemudian simpan template. Simple sekali kan untuk memodifikasi tooltip. Ganti value yang memiliki text tebal sesuai keinginan anda.