Cara membuat dan memasang CSS Tooltip-3: Panduan BloGGeR ToolTIP

Desain CSS Tooltip-3 sudah ditambahkan dengan efek transparansi dan lebih sederhana dibandingkan CSS Tooltip-2. Cara pembuatan kedua tooltip ini sama persis, perbedaan yang ada hanyalah penggunaan xHTML pada saat posting dilakukan. Untuk mencobanya silahkan pelajari cara pembuatan CSS Tooltip-2.

KODE CSS Tooltip-3 :

Kode CSS :

.GRinfo-tips a{
        text-decoration:none;
}
.GRinfo-tips a:hover{
        position:relative;
}
.GRinfo-tips a span{
        display: none;
}
.GRinfo-tips a:hover span{
        display:block;
        position:absolute;
        top:10px; 
        left:20px; 
        width:248px;
        border:1px solid #333;
        background:#666 url(https://lh4.googleusercontent.com/-VuTJyWKTudE/T3EP1KMG4SI/AAAAAAAAAig/jp79n0DHXNs/h400/grad-anima-2x400.gif) top center repeat-x; 
        color:#003333;
        text-align:justify;
        padding:10px 8px;
        font:12px Arial; 
        z-index:100;
        opacity: 0.5;
        filter:alpha(opacity=50); 
        border-radius:12px;
}
.GRinfo-tips a:hover span:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
  z-index:200;
} 
.GRinfo-tips a:hover span h4{
        font-size:12px Times New Roman;
        font-weight:bold;
        font-style:italic;
        color:#990033;
        margin:0;
        padding:0 8px;
} 
.GRinfo-tips a:hover span img{
        width:100px;
        height:auto;
        border:2px solid #666;
        padding:4px;
        margin:5px 8px -2px 0;
        background:#999;
        float:left;
}

xHTML-1 :

<div class="GRinfo-tips"> 
<a href="Link-1.html">Nama Link-1<span><h4>Judul-Tooltip-1</h4><br />Tuliskan teks tooltip di sini !<img src="Image-tooltip1.jpg"/>Tuliskan lanjutan teks tooltip di sini !!!<h4 align="right">Tgl/Identitas/Nama/Teks penting !</h4></span></a>
</div>

xHTML-2 :

<div class="GRinfo-tips"> 
<a href="Link-2.html">Nama Link-2<span><h4>Judul-Tooltip-2</h4><img src="Image-tooltip2.jpg"/>Tuliskan teks di sini !!! Tuliskan teks tooltip di sini !!!<h4 align="right">Tgl/Identitas/Nama/Teks penting !</h4></span></a>
</div>

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. Klik "Simpan Template (Save Template)".
8. 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. Dengan 2 model xHTML seperti terlihat di atas, maka anda bisa menampilkan 2 model tooltip dalam satu blog

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 «