Cara Membuat CSS Tooltips
Tooltip adalah Keterangan atau penjelasan berupa tulisan atau gambar yang muncul ketika kursor berada diatas link maupun gambar yang sudah diberi tooltip, Untuk melihat Contohnya, silahkan arahkan Kursor anda
Ugi Blog
Hidup untuk menuntut Ilmu
disini atauHidup untuk menuntut Ilmu
Ilmu, Seni dan Agama !Dengan imu hidup menjadi mudah, dengan seni hidup menjadi indah dan dengan agama hidup menjadi teratur dan terarah
Langkah langkah untuk membuat CSS Tooltips:
- Edit HTML kemudian cari KODE: ]]></b:skin> (gunakan ctr+F) untuk memudah kan pencarian,
- Copy dan paste KODE CSS Tooltips di bawah ini dan letakkan di atas KODE : ]]></b:skin> tadi
KODE CSS Tooltips:
/* KODE CSS Tooltips Start */
li.sfhover .TOLtip, li:hover .TOLtip { display:block;
}
.TOLtip {
margin:20px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:auto;
display:none;
background:url() bottom repeat-x;
border:2px solid #FFFFFF;
-moz-border-radius:20px;
}
.TOLtip {
margin-top:-160px;
margin-left:-10px;
}
.TOLtip:hover {
display:none!important;
}
.TOLtip p {
font-size:12px;
font-family:Arial;
color: #1500FF;
margin:0 0 5px 0;
}
.TOLtip b {
font-size:13px;
font-family:Cursive;
font-weight:bold;
color: #00FBFF;
margin:0 0 5px 0;
}
.TOLtip img {
margin-right:8px;
background:#FF00AE;
border:1px solid #FF0000;
width:100px;
height:auto;
float:left;
padding:8px 3px 3px 3px;
-moz-border-radius:10px;
}
.TOLtip h3 {
border-top:1px solid #FF0059;
border-bottom:1px solid #FF0011;
font-family:Cursive;
font-size:14px;
font-weight:bold;
margin:0 0 6px 0;
padding:4px 10px;
background: #BF00FF;
color: #8CFF00;
}
.TOLtip span{
font-family:Arial;
font-size:10px;
margin:0 0 6px 0;
padding:0 6px;
color:#F2FF00;
}
/* KODE CSS Tooltips End */
- Simpan Template
- Kemudian gunakan KODE berikut ini untuk melakukan posting :
<li><a href="Link-Judul">Judul</a><div class="TOLtip"><img src="Image.jpg"/><b>Tuliskan teks di sini </b><p>Tuliskan teks lanjutan di sini</p>
</div></li>
</div></li>
- Selesai dan lihat hasilnya,
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon