Cara membuat tool tip otomatis disetiap title pada blog

Title itu ialah ketika link disorot mouse maka akan munucul deskripsi isi link tersebut .

Apa bila pada link-link diblog Anda belum mempunyai title, sekarang saya kasih tau cara menambahkan title pada link diblog

 contoh kode link yang belum mempunyai title

<a href="http://rizkyguna1.blogspot.com/">Blog Tutorial</a>

maka hasilnya seperti ini

Blog Tutorial

Nah contoh link yang sudah ada titlenya

<a href="http://rizkyguna1.blogspot.com/"title='Blog tutorial '>Blog Tutorial</a>

Catatan

*Tambahkan tulisan yang berwarna merah dan letakkan seperti contoh diatas

*ganti tulisan berwarna hijau, sesuai dengan title yang ingin Anda munculkan ketika link disorot mouse.

Kembali pada judul diatas, setelah link Anda mempunyai title maka langkah selanjutnya 

Oiya contoh tooltip otomatisnya seperti ini :

Rizgun blog

Langkah-langkahnya

1. Login Ke Akun Blogger sobat
2. Pilih Rancangan/Design Kemudian Pilih EDIT HTML (dan jangan Lupa Untuk Mencentang Kolom Expand Template Widget )
3. Copas Kode Berikut Tepat Diatas Kode </head>

<style>#tooltip{width:200px;text-transform:capitalize;z-index: 10000000;position:absolute;background:#444;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-o-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -webkit-transition:0.5s ease-out;padding:2px 5px;font-size:12px;color:#000;border:1px dashed #ff0000;display:none;font-weight:bold}</style>
<script type='text/javascript'>
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$(&quot;a[title]&quot;).hover(function(e){
this.t = this.title;
this.title = &quot;&quot;;
$(&quot;body&quot;).append(&quot;<p id='tooltip'>&quot;+ this.t +&quot;</p>&quot;);
$(&quot;#tooltip&quot;)
.css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
.css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;)
.fadeIn(&quot;fast&quot;);
},
function(){
this.title = this.t;
$(&quot;#tooltip&quot;).remove();
});
$(&quot;a[title]&quot;).mousemove(function(e){
$(&quot;#tooltip&quot;)
.css(&quot;top&quot;,(e.pageY - xOffset) + &quot;px&quot;)
.css(&quot;left&quot;,(e.pageX + yOffset) + &quot;px&quot;);
});
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
</script>

Simpan template !

Catatan:

*Untuk mengubah style atau warnanya silahkan ubah kode yang berwarna biru

Begitulah cara membuat title link dan cara membuat tool tip otomatis disetiap title pada blog.

Semoga berhasil