Tooltips

Untuk sahabat Blogger yang ingin buat Tooltips Silahkan ikuti bagaimana cara membuat tooltips ,untuk contoh silahkan Anda arahkan mouse pada tulisan di bawah ini,

Tool Tips

Contoh Image Tool tips

Anda bisa meringkas tulisan di sini

Cara membuatnya Anda dalam keadaan login Klik Tata Letak Edit HTML Cari kode
]]></b:skin> jika sudah ketemu lanjutkan copy kode di bawah ini simpan kode di atas kode Tadi ,




li.sfhover .TOLtip, li:hover .TOLtip {
display:block;
}
.TOLtip {
margin:20px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:265px;
display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9DwoAxO9cAsqP8vvdLw3vlF8F6AQn33eBD9y8qFIS6ie0iRX5wrqsMFqUwJinuMQAgKntoLosd0Bc_r46Sk8f_cFnTJG50M8y7WzczJA0LJD-dnWBO0sOqt-G9YHFShZ86pYDL7pcIb8/s400/0-bgVert.jpg) bottom repeat-x;
border:2px solid #666666;
-moz-border-radius:20px;
}
.TOLtip {
margin-top:10px;
margin-left:-10px;
}
.TOLtip:hover {
display:none!important;
}
.TOLtip p {
font-size:11px;
font-family:Arial;
color: #333366;
margin:0 0 5px 0;
}
.TOLtip b {
font-size:12px;
font-family:Cursive;
font-weight:bold;
color: #996600;
margin:0 0 5px 0;
}
.TOLtip img {
margin-right:8px;
background:#666666;
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 #000;
border-bottom:1px solid #000;
font-family:Cursive;
font-size:12px;
font-weight:bold;
margin:0 0 6px 0;
padding:4px 10px;
background: #CCCCCC;
color: #006666;
}
.TOLtip span{
font-family:Arial;
font-size:11px;
margin:0 0 6px 0;
padding:0 6px;
color:#003333;
}


Setelah itu simpan template Anda kemudian untuk selanjutnya , klik Elemen laman tambah gadget pilih HTML/Javascript simpan kode di bawah ini ,


<li><a href="http://ozuratool.blogspot.com/">Judul</a><div class="TOLtip"><img src="http://www.fond-ecran.net/icones/pamelaanderson_002.jpg"/><b>Tuliskan teks di sini !</b><p>Tuliskan teks lanjutan di sini</p>
</div></li>


Silahkan Anda lihat Hasilnya semoga Berhasil.