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.

Demo

Code CSS here..

/*****************************************
Name : background blockquote animasi
By : Rivai Silaban | Blog Design
Update :Jumat 10 January 2014
site : www.rivai.org
******************************************/
/*****************************************
Name : help tooltip style
By : Rivai Silaban | Blog Design
Update :Senin 20 January 2014
site : www.rivai.org
******************************************/
.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;}
/*** www.rivai.org CSS help tooltip style and ***/

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/AVvXsEiZAnKsfiAp3TLxQLiiub4HApPoF4dDeNM6L0Tu4296EL3GA0kxwGxjzeY24T5gi5Byt7l8T7UQJsIEPSvWLbdkdeJridGQTXapZ7II9_JzvR0JqmdwpiUCT1JmTtyf3oSiA1cxUVqLVt3h/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>

Bila anda masih belum memahami tata cara pemasangan help tooltip style blogspot ini pada blogspot anda silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/help-tooltip-style.html

css

• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• css widget label blogspot accordion
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat space iklan blogspot dengan CSS3
• cara membuat widget box rivai style

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:21 PM