Cara Membuat Tooltip Simple Di Blog

  Sebelumnya saya juga pernah Posting yaitu Cara membuat Title Seperti KapanLagi.com Jadi hasil dari artikel sekarang juga hampir sama dengan judul posting Cara membuat Title Seperti KapanLagi.com.Untuk yang membedakan Tooltip yang sekarang dengan Tooltip yang Lalu adalah Tooltip yang sekarang penggunaan scripnya lebih Simple.Banyak keuntungan memakai trik ini di banding trik yang sebelumnya di antaranya adalah :

1. Scrip Tooltip dengan Trik yang sekarang Lebih Simple.
2. Penggunaan Scrip sekarang tidak terlalu memberatkan Blog dan penggunaan Scrip yang sedikit.
3. Scrip Bisa di Edit Lagi Sesuai kebutuhan Tooltip Sobat.
4. Tooltip Bisa di pasang di bagian Posting Blog.
5. Tooltip bisa di pasang Otomatis di Image alt setiap  Gambar.
6. Tooltip bisa di pasang Otomatis di semua Link yang ada di Blog.

 Itulah beberapa keuntugan Menggunakan Tooltip Simple Di Blog.Untuk cara pembuatan Tooltip itu sendiri Ikuti Langkah-langkah di bawah Ini :

1.Pertama-tama Login Blogger.
2.Langkah Kedua Template - Edit HTML - Lalu Centang Expand Template Widget - Kemuadian Cari Kode ]]></b:skin> Untuk mempercepat Proses pencarian Kode Gunakan Tombol Ctrl + F Kemudian Masukkan Kode ]]></b:skin> Kalau sudah ketemu ,Masukkan Kode di bawah ini Tepat di atas Kode ]]></b:skin> :

.tooltip {

  background-color:#ffde00;

  border:1px solid #343332;

  color:#000;

  padding:5px 10px;

  display:block;

  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);

  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);

  box-shadow:0 1px 2px rgba(0,0,0,0.4);

}

3.Langkah Ketiga Cari Lagi Kode </head> Untuk mempercepat Proses pencarian Kode gunakan Tombol Ctrl + F Kemudian masukkan Kode </head> Kalau sudah ketemu masukkan Kode di bawah ini tepat di atas Kode </head> :

 <script src='http://facewoman.googlecode.com/files/jQuery%20v1.7.2.js' type='text/javascript'/>

<script src='http://facewoman.googlecode.com/files/tooltip.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(function() {

$('a').myTooltip("title");

$('img').myTooltip("alt");

});

//]]>

</script>

Keterangan : 
" Jika Diatas Kode </head> sudah ada kode mirip  <script src='http://facewoman.googlecode.com/files/jQuery%20v1.7.2.js' type='text/javascript'/>   atau Kode mirip <script src='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>  Jadi Kode di atas sudah tidak usah anda gunakan atau anda pasang Lagi."

4.Langkah Terakhir Tinggal Simpan Template.

Note :

Untuk Langkah pemasangan Kode Tooltip :

1. Jika anda Menggunakan Kode $('a').myTooltip("title"); dan $('img').myTooltip("alt"); di atas Kode </head> Maka dengan Otomatis Tooltif akan Terpasang Otomatis di setiap Link Tittle dan Link Gambar anda.
2. Untuk membuat Kode hanya Tampil manual di setiap Link caranya Yaitu dengan mengganti Kode $('a').myTooltip("title"); dan $('img').myTooltip("alt"); dengan Kode $('a[title]').myTooltip("title"); Dan untuk cara pemasangannya adalah : 

Misalkan anda akan membuat Tooltip pada Link

<li><a href='http://facewoman.blogspot.com/' title='News Hollywood'>INDONESIA</a></li>

Maka pemasangn Tooltip yang benar adalah dengan menambahkan Kode  class='myTooltip'
Maka hasilnya adalah :

<li><a class='myTooltip' href='http://facewoman.blogspot.com/' title='News Hollywood'>INDONESIA</a></li>

 Jika langkah dari Langkah-Langkah dalam pemasangan  Tooltip Simple Di Blog maka hasil dari Tooltip itu sendiri akan seperti Tooltip di Blog Facewoman.Itulah Cara Membuat Tooltip Simple Di Blog Semoga bisa jadi Referensi anda.Jika anda kurang jelas dengan tutorial diatas bisa anda tinggalkan di From komentar.