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".
3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".
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... Description: Membuat Tool Tips JQuery Sederhana Rating: 4.5 Reviewer: Muhammad Khoirul Umam - ItemReviewed: Membuat Tool Tips JQuery Sederhana
0 komentar:
Posting Komentar
http://alyahacker.blogspot.com