Cara membuat dan Memasang CSS Tooltips-2: Tutorial BloGGeR ToolTIP

CSS tooltips yang ke-2 ini sangat jauh berbeda strukturnya bila dibandingkan dengan css tooltips sebelumnya. Jauh lebih bagus dan yang terpenting adalah : kompatibel dengan semua browser. Selain mampu menampilkan tips yang berupa teks, tooltips ini dapat mempreviewkan image dengan ukuran yang bisa diatur. Kode css sudah didesain sedemikian rupa sehingga tips yang tertampilkan membentuk tatanan yang sangat rapi dan menarik.

Screenshoot CSS Tooltip-2

KODE CSS CSS Tooltips-2 :

li.sfhover .TOLtip,li:hover .TOLtip{ 
        display:block;
        z-index:999;
}
.TOLtip {
        margin:20px 6px 0 6px; 
        padding:15px 10px 15px; 
        position:absolute; 
        width:265px; 
        display:none; 
        background:url(https://lh6.googleusercontent.com/-B1OjRE-HQTQ/T3ED1X9ndGI/AAAAAAAAAiQ/-WCpESXiFLo/h400/bg-grad-1x400.jpg) bottom repeat-x;        border:5px solid #888;
        border-radius:20px;
        font-famil:Arial;
        font-size:12px;
}
.TOLtip { 
        margin-top:10px; 
        margin-left:-10px; 
}
.TOLtip:hover { 
        display:none !important; 
}
.TOLtip p {
        color: #333366; 
        margin:0 0 5px 0; 
} 
.TOLtip b {
        font-weight:bold; 
        color:#996600; 
        margin:0 0 5px 0; 
}
.TOLtip img { 
        margin-right:8px; 
        background:#666666; 
        border:1px solid #222;
        width:100px;
        height:auto; 
        float:left; 
        padding:8px 3px 3px 3px;
        border-radius:10px; 
}
.TOLtip  h3 {
        border-top:1px solid #000;
        border-bottom:1px solid #000; 
        font-size:14px; 
        font-weight:bold;
        margin:0 0 6px 0; 
        padding:4px 10px; 
        background:#CCCCCC; 
        color:#006666;
} 
.TOLtip span{
        font-size:11px;
        margin:0 0 6px 0; 
        padding:0 6px; 
        color:#003333;
}

xHTML :

<li><a href="URL" target="_blank">Gosip Terbaru Artis Papan Atas</a><div class="TOLtip"><img src="https://lh4.googleusercontent.com/-7VV32P3_dEo/T24fYqtEeDE/AAAAAAAAAiA/WqJoPavei1Q/s144-c/BigBackground.jpg"/><b>Terlibat Affair dengan Menlu</b><p>Sebuah gosip panas tengah beredar di kalangan celebritas Holliwood. Artis cantik yang doyan tampil seronok ini dikabarkan terlibat adu mulut yang berujung cakar-cakaran dengan isteri menteri luar negeri sang negara antah berantah ...</p></div></li>

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. Untuk merubah ukuran image/gambar tooltips, lakukan perubahan width:100px; pada KODE CSS di bagian syntax :
   

   .TOLtip img{
           ...
           ...
           width:100px;
   }

   .

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 «