Cara Pasang Tooltip Script Di Blog

Posted by : Stiker Jalingkut

Postingan Kali ini Tentang
Cara Pasang Sticky Tooltip Script

Langkah 1: Masukkan kode berikut ke bagian <head> halaman Anda

<p> Some page contents here...</p> <p> <a href="http://selladrtrenunanjiwa.blogspot.com/" data-tooltip="sticky1">Thailand</a></p> <p> <a href="http://selladrttutorialbloger.blogspot.com/">British Columbia</a></p> <p> <img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p> <p> Some page contents here...</p>  <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:200px"> <img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br /> Thailand boasts some of the most popular and luxurious resorts in Asia. </div> <div id="sticky2" class="atip" style="width:262px"> <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://selladrtvidioibunya.blogspot.com/r">Vancouver</a></b> is BC's largest city. </div> <div id="sticky3" class="atip"> <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" /> </div> </div> <div class="stickystatus"> </div> </div>

Referensi kode di atas ke file eksternal yang harus Anda download di bawah ini (klik kanan, lalu pilih "Save As"):
stickytooltip.js
stickytooltip.css
Langkah 2: Masukkan bawah sampel tooltip kode markup ke bagian <body> halaman Anda:
<p> Some page contents here...</p> <p> <a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p> <p> <a href="http://en.wikipedia.org/wiki/British_columbia" data-tooltip="sticky2">British Columbia</a></p> <p> <img src="http://img403.imageshack.us/img403/3403/redleaves.jpg" data-tooltip="sticky3" /></p> <p> Some page contents here...</p>  <div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:200px"> <img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br /> Thailand boasts some of the most popular and luxurious resorts in Asia. </div> <div id="sticky2" class="atip" style="width:262px"> <img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city. </div> <div id="sticky3" class="atip"> <img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" /> </div> </div> <div class="stickystatus"> </div> </div>

Mendefinisikan tooltips Anda

Semua tooltips pada halaman harus didefinisikan dalam sebuah DIV tunggal, dengan masing-masing DIV sendiri melilit DIV dengan atribut ID unik. Struktur dasar adalah:

<div id="mystickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1"> Sticky Tooptip 1 content here... </div> <div id="sticky2"> Sticky Tooptip 2 content here... </div> <div id="sticky3"> Sticky Tooptip 3 content here... </div> </div> <div class="stickystatus"> </div> </div>

Jangan Lupa Seret Juga Sumber Nya Sobat Heheh

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

Subscribe to Posts | Subscribe to Comments

TUTORIAL™

--✽-✽--WELCOME TO --✽-✽--

Cara Pasang Tooltip Script Di Blog

Leave a Reply

Gabung Yuk

Labels

Mengenai Saya

Pengunjung

Labels

Pengikut