Cara Membuat dan Memasang Javascript Tooltip-3 Display inline: Panduan BloGGeR ToolTIP

Sangat jauh berbeda dila dibandingkan tooltip yang biasa dipergunakan. Tooltip ini akan menampilkan teks tooltip dalam baris teks di sebelah kanan nama link yang dipergunakan. Sangat sederhana dan sangat sedikit javascript serta KODE CSS yang dipergunakan. Seperti biasanya : simpan KODE CSS di atas KODE ]]></b:skin> , sedang javascript di letakkan di atas KODE </body> atau di bawah KODE ]]></b:skin> . xHTML digunakan untuk posting.

KODE CSS, Javascript dan xHTML - "Javascript GRinlinetips-3"

Kode CSS :

.GRinlinetips {
 font-style:italic;
 font-weight:bold;
 display:none;
 padding:0 6px; 
 color: #33CCFF;
 background-color:red;
}

Javascript :

<script type="text/javascript">
//<![CDATA[
function toggleInline(thol) {
var x = document.getElementById(thol).style;
if (x.display == 'inline') x.display = 'none';
else x.display = 'inline';
return false;
}
//]]>
</script>

xHTML :

<a href="http://bloggerstuars.blogspot.com" onmouseover="toggleInline('tholthol1');"
onmouseout="toggleInline('tholthol1');">This is a link</a> <span id="tholthol1" class="GRinlinetips"> This is GRinlinetips inline</span> teks GRinlinetips ini diperlihatkan disebelah kanan nama-link yang kita gunakan (This is a link)!

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Copy javascript dan letakkan di bawah ]]></b:skin>
8. Klik "Simpan Template (Save Template)".
9. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.