help tooltip style blogspot

Help tooltip style blogspot - cara membuat help tooltip style blogspot tanpa jquery. help tooltip style blogspot ini hanya menggunakan fungsi css, jadi code help tooltip style blogspot ini sangat ringan sehingga tidak akan mempengaruhi loading blog anda. Untuk melihat tampilan help tooltip style blogspot ini silahkan kunjungi link demo dibawah, nah bila anda merasa tertarik untuk memasang help tooltip style blogspot ini pada halaman blog anda silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Code CSS here..

.bantuan {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}.bantuan span {
margin-left: -999em;
position: absolute;
}.bantuan:hover span {
border-radius: 5px 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
position: absolute; left: 1em; top: 2em; z-index: -9999;
margin-left: 0; width: 250px;
}.bantuan:hover img {
border: 0; margin: -15px 0 0 230px;
float: right; position: absolute;
}.bantuan:hover em {
font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.0em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}.help {
border: 1px solid #2BB0D7;
background-color: #99CCFF;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;}

Format code tag HTML help tooltip style blogspot

<a class="bantuan" href="link HELP ">Help<span class="custom help"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwj9wk0WzC6-_VxH0IRGolqXHrO_PXpq3-0Rg3tZB7cz6n-bHbZxEXuGAY8hZp2NnrdHNXeOJ5f2V_fS69qpsvASYgqqDziHKrcI5H7uO5_0WxG47QLSFrfw0Obvca3hpQ2E_csM7RZaYv/s1600/imghelp.png" alt="Help" height="48" width="48" title="help"/><em>Help</em>Ini adalah sebuah tampilan tooltip dengan sistem hover show up setelah tersentuh cursor, silahkan anda klik linknya maka anda akan berada pada halaman tutorialnya..</span></a>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit