News Update :
Home » » Membuat Tool Tips JQuery Sederhana

Membuat Tool Tips JQuery Sederhana

Penulis : Aby tantowi on Friday, 9 May 2014 | 04:40

tool-tips-jquery



Membuat Tool Tips JQuery Sederhana - Tool tips JQuery ini adalah suatu hal yang terbilang unik dan bisa membantu, fungsinya adalah untuk memberikan keterangan/informasi pada suatu tulisan atau link (bisa berupa text ataupun gambar). Selain itu, ada juga yang menjadikannya sebagai hiasan untuk menarik pandangan para pengunjung blog/webnya.

Langsung saja, ini dia tutorial untuk membuat tool tips JQuery sederhana. Silahkan bisa anda simak dan ikuti dengan baik tutorial berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

menu-template-blogger-ngeposta

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

ngeposta-edit-html

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.tooltip {
position: relative;
display: inline-block;
cursor: help;
white-space: nowrap;
border-bottom: 1px dotted #777;
}
.tooltip-content {
opacity: 0;
visibility: hidden;
font: 12px Arial, Helvetica;
text-align: center;
border-color: #aaa #555 #555 #aaa;
border-style: solid;
border-width: 1px;
width: 150px;
padding: 15px;
position: absolute;
bottom: 40px;
left: 50%;
margin-left: -76px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.1)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
background-image: linear-gradient(rgba(0,0,0,.1), rgba(255,255,255,0));
-moz-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
box-shadow: 1px 1px 0 #555,
2px 2px 0 #555,
3px 3px 1px rgba(0, 0, 0, .3),
0 1px 0 rgba(255,255,255, .5) inset;
-webkit-transition: bottom .2s ease, opacity .2s ease;
-moz-transition: bottom .2s ease, opacity .2s ease;
-ms-transition: bottom .2s ease, opacity .2s ease;
-o-transition: bottom .2s ease, opacity .2s ease;
transition: bottom .2s ease, opacity .2s ease;
}
.tooltip-content:after,
.tooltip-content:before {
border-right: 16px solid transparent;
border-top: 15px solid #fff;
bottom: -15px;
content: "";
position: absolute;
left: 50%;
margin-left: -10px;
}
.tooltip-content:before {
border-right-width: 25px;
border-top-color: #555;
border-top-width: 15px;
bottom: -15px;
}
.tooltip:hover .tooltip-content{
opacity: 1;
visibility: visible;
bottom: 30px;
}

5. Setelah itu, sisipkan kode berikut ini tepat di bawah kode ]]></b:skin>.

?
1
2
3
type='text/javascript'></script>

6. Langkah selanjutnya klik save/simpan template.

Dan untuk cara penggunaan tool tips JQuery sederhana ini cukup sederhana, anda tinggal menaruh kode ini di bagian yang anda kehendaki :

?
1
2
3
<b data-tooltip="GANTI DENGAN TEKS SESUAI KEINGINAN ANDA">
GANTI DENGAN TULISAN, LINK (TEXT/GAMBAR), DLL.
</b>

Kode tersebut bisa anda gunakan di area posting ataupun di area sidebar blog/web anda. Cukup sekian postingan tentang cara membuat tool tips JQuery sederhana ini, selebihnya saya mohon ma'a atas segala kekurangan yang ada. Semoga bermanfaat bagi anda dan salam sejahtera by ngeposta...
Share this article :

Post a comment

 
Company Info | Contact Us | Privacy policy | Term of use | Site map
Copyright © 2014. Abi Tantowi . All Rights Reserved.
Design Template by Abi Tantowi | Support by creating website | Powered by Blogger