Cara Membuat dan Memasang Javascipt Tooltip-1: Tutorial BloGGeR ToolTIP

Javascript Tooltip-1 berbeda dengan CSS tooltip sebelumnya yang memfungsikan hover untuk menghasilkan tooltip. Dengan javascript ini, tooltip dimunculkan melalui "title" pada link yang kita gunakan. Tentu saja CSS masih juga diperlukan untuk pengaturan beberapa fungsi, seperti posisi (padding dan margin), warna, background, serta jenis, tebal dan ukuran teks/font.

Kode CSS :

.plustips{
        font-size:12px;
        color: #33CCFF;
        font-weight:bold;
        font-family:Arial;
        text-decoration:none;
}
.plustips:hover{
        color:#33FFFF;
}  
#tholtip{
        position: absolute;
        left: -300px;
        width: 290px;
        border: 2px solid #C0C09F;
        padding: 3px 0 10px 10px;
        background:#e0f5ca url(https://lh6.googleusercontent.com/-AiO136IsZdA/T3Ei8uAiG2I/AAAAAAAAAi4/7ta62-I4Io8/h120/greenwithhead.jpg) no-repeat;
        visibility: hidden;
        z-index: 100;
        border-bottom-left-radius:20px;
        border-bottom-right-radius:20px;
        filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,strength=4);
}
#pointertip{
        border:1px solid #333;
        width:25px;
        height:40px; 
        background:#999; 
        padding:4px;
        border-bottom-left-radius:20px;
        border-bottom-right-radius:20px;
        position:absolute;
        left: -300px;
        z-index: 101;
        visibility: hidden;
}
#tholtip p{
        font-size: 11px;
        font-family:Arial;
        color: #333;
        line-height:1.4em;
        margin-right:10px;
        margin-top:5px;
}
#tekstip {
        font-weight:bold;
        font-family:Times New Roman;
        font-size: 12px;
        color: #333300;
        margin-right:10px;
}

Javascript » Javascript Tooltip-1 :

<script src="http://gubhugreyot-tooltip.googlecode.com/files/GRtholtip.js" type="text/javascript"></script>

xHTML » Javascript Tooltip-1 :

<a href="URL" class="plustips" title="<div id='tekstip'>Judul Tooltip !</div><p> Tuliskan teks tooltip di sini !</p>"> Nama Link ! (contoh: Tutorial Blogger)</a>

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. Cari kode </body>
8. Copy javascript dan letakkan di atas </body>
9. Klik "Simpan Template (Save Template)".
10. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Panduan cara backup template, mencari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials yang terletak di menu sebelah kiri halaman.
2. Beberapa perubahan bisa dilakukan baik di KODE CSS ataupun javascript untuk merubah tinggi, posisi, warna, background dan beberapa yang lain.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «