.
Home » » Cara membuat tool tip otomatis disetiap title pada blog

Cara membuat tool tip otomatis disetiap title pada blog

Written By Admin on Senin, 19 Desember 2011 | 12:35 AM




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



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 :


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

Share this article :

8 komentar:

sahru99 mengatakan... Reply Comment

Nice gan...mau di coba nih.. :)

Rizgun mengatakan... Reply Comment

@sahru99: Silahkan dicoba sahabat, semoga berhasil :0

DUNIA BLOG 888 mengatakan... Reply Comment

Salam persahabatan, script anda ini tidak jalan di blog aku .... tolong anda check ulang .... Terima kasih.

SHARE AJA mengatakan... Reply Comment

Tooltip yang mantap, salam kenal persahabatan.

tutorialblogspot.com mengatakan... Reply Comment

Wahhhhh...
Saya baru tahu kalau fitur yang seperti ini namanya Tool Tip...
Saya harus segera pasang ini...
Terima kasih sob atas tutorialnya...
Salam Kenal...

Fuji Agung mengatakan... Reply Comment

di blog saya juga gak jalan sob

Mike mengatakan... Reply Comment

makasih untuk tipsnya
pertanyaan saya : kalo yg auto mncul title ke smua link di blog ada?

Anonim mengatakan... Reply Comment

tutorial kontol.. dasar admin anjing bisanya hanya copas kau.. kau lihat tutorial setan ini ga berfungsi alias tidak jalan, dasar keparat tutup saja blog jelek kau ini anjing.. dasar copas kontol bisanya hanya copas tapi tidak mau praktekin sendiri... meki ayam kau.. !!!!!

Posting Komentar

Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

Komentar Blogger Sejati

Saya adalah

Foto saya
Bekasi, Jawa Barat, Indonesia
Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
 
Support : Rizkygunawan1@gmail.com | Facebook | Twitter
Copyright © 2011. Rizgun(dot)com - All Rights Reserved
Template Modify by Rizgun Blog
Proudly powered by Blogger