Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, January 20, 2014

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="http://3.bp.blogspot.com/-vTiNHfQ-4TM/UtysHryVU1I/AAAAAAAACLQ/1qSccIbBQ0k/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

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 12:21 PM

0 komentar :

Post a Comment

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog