Cara Membuat Bubble ToolTips

Diposting oleh ihsan's bloger on Jumat, 29 Juli 2011

Bubble tool tips ini berguna sekali untuk memberikan informasi tentang sebuah link. jika digerakkan diatas link maka secara otomatis bubble tool tips ini akan keluar dengan segala informasi yang anda tuliskan.
biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan kodenya. adapun langkah-langkahnya adalah sebagai berikut.

1) Terlebih dahulu pastikan anda telah login dan membuka halaman dashbor blogger, lalu klik rancangan


2) Setelah itu akan tampil halaman rancangan, lalu klik menu Edit HTML.



3) Kemudian pada halaman Edit HTML, cari kode ]]></b:skin>


4) Selanjutnya anda letakkan kursor mouse tepat diatas kode yang anda cari.


5) Setelah itu copy dan paste kode seperti ini

/*---------- bubble tooltip by http://trikhebat.blogspot.com-----------*/ a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; } a.tt span{ display: none; } /*background:; ie hack, something must be changed in a for ie to execute it*/ a.tt:hover{ z-index:25; color: #aaaaff; background:;} a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #993300; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat top; } a.tt:hover span.middle{ /* different middle bg for stretch */ display: block; padding: 0 8px; background: url(http://1.bp.blogspot.com/_camK6MacbVQ/SmNbQ-VEh2I/AAAAAAAAAOU/qiVSMin-U6k/s320/bubble_filler-711451.gif) repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat bottom; }


6) Kemudian simpan perubahan template yang anda buat.


7)  Setelah itu untuk mengaktifkan fasilitas ini pada postingan yaitu menggunakan kode berikut yang ditulis pada halaman Edit HTML editor postingan.
<a class="tt" href="http://www.idr-clickit.com/register.php/ihsanulirfan.html"> nama link anda <span class="tooltip"> <span class="top"></span><span class="middle"> Idr clickit ptc terpercaya dan termudah </span><span class="bottom"></span></span> </a>
Note: ganti warna merah dengan link anda, ganti warna kuning dengan keterangan link anda


8) Berikut adalah contoh pembuatan link pada halaman editor postingan blog.


9) Apabila proses posting berhasil, maka akan tercipta postingan yang berisikan link yang mempunyai bubble tool tips.


Bagaiman teman-teman? sudah berhasil? sip. kalau masih ada yang bermasalah silahkan share di komentar.

semoga artikel "Cara Membuat Bubble Tool Tips" ini berguna bagi anda :)

{ 9 komentar... read them below or add one }

Cah Ganteng mengatakan...

klo diganti dengan link gmn ya?

Pnane Weg mengatakan...

1 nfl jerseys
abercrombie and fitch outlet
nike outlet
fitflop clearance
lebron 12
the north face jackets
cheap nike shoes
www.coachoutlet.com
ugg boots sale
nike outlet store
cheap michael kors bags
north face rain jackets
lebron 12 shoes
polo shirts for men
ralph lauren polo outlet online
salvatore ferragamo belt
christian louboutin outlet
cheap canada goose
north face jackets
hermes birkin bag
nike free run
jordan shoes
red sole shoes
abercrombie and fitch outlet store
cheap nike air max
mbt outlet
nike factory store
nike high heels online
jordan 11
prada handbags
jordan 6 infrared
fitflop shoes sale
vans shoes clearance
cheap michael kors
oakley sunglasses cheap
air jordan 11
michael kors handbags
1028wjl

Pnane Weg mengatakan...

coach outlet
ugg boots on sale 70% off
christian louboutin shoes
louboutin outlet
burberry scarf
ugg boots sale
gucci shoes
air jordan retro 6
nike clearance
kd basketball shoes
burberry scarf outlet
canada goose coats
canada goose outlet
cheap rolex watches
michael kors outlet
ghd flat iron
north face sale
cheap wholesale jordans
michael kors purses sale
coach shoes
north face coats
ralph lauren polo shirts
abercrombie and fitch outlet store
fendi bags
tods outlet
louboutin outlet
nike outlet store
ghd hair
converse shoes sale
fitflops
fitflops sale
cheap jordans shoes
coach glasses
jordan 11 concord
hermes belt
wholesale nike
dior outlet
1028wjl

ninest123 mengatakan...

ninest123 16.03
uggs on sale, oakley sunglasses, uggs on sale, tory burch outlet, christian louboutin, ralph lauren polo, louis vuitton outlet, louis vuitton handbags, uggs on sale, louboutin uk, ray ban sunglasses, uggs outlet, louis vuitton outlet online, oakley sunglasses, nike outlet, ralph lauren outlet, oakley sunglasses, michael kors outlet online, prada outlet, oakley sunglasses, burberry factory outlet, cheap jordans, cheap oakley sunglasses, longchamp outlet, tiffany jewelry, michael kors outlet, tiffany jewelry, replica watches, nike air max, gucci handbags, replica watches, nike free, burberry outlet, ray ban sunglasses, ray ban sunglasses, louis vuitton outlet, louis vuitton, nike air max, christian louboutin, michael kors handbags, longchamp bags, uggs outlet, michael kors outlet online, louboutin shoes, michael kors, prada handbags, longchamp outlet, michael kors outlet online

ninest123 mengatakan...

true religion outlet, abercrombie and fitch, lunette ray ban pas cher, new balance, jordan pas cher, polo ralph lauren uk, hogan sito ufficiale, nike air max pas cher, sac guess pas cher, true religion jeans, michael kors uk, vans pas cher, timberland pas cher, true religion outlet, hollister uk, abercrombie and fitch UK, burberry pas cher, longchamp pas cher, nike roshe run pas cher, hermes pas cher, coach outlet, nike air force, nike air max uk, nike air max uk, nike roshe uk, nike free pas cher, vanessa bruno pas cher, nike blazer pas cher, michael kors, lululemon outlet, louboutin pas cher, coach outlet store online, mulberry uk, lunette oakley pas cher, replica handbags, nike tn pas cher, true religion outlet, ray ban uk, ralph lauren pas cher, polo lacoste pas cher, north face pas cher, nike air max, nike free, coach purses, michael kors outlet online, longchamp soldes, north face uk, converse, michael kors

ninest123 mengatakan...

celine handbags, reebok outlet, instyler ionic styler, louboutin, iphone 6s cases, vans outlet, softball bats, hermes handbags, converse, longchamp uk, beats by dre, timberland boots, bottega veneta, lululemon outlet, mont blanc, nike air max, new balance shoes, vans scarpe, polo ralph lauren, north face outlet, nfl jerseys, p90x workout, iphone cases, valentino shoes, oakley, ipad cases, s6 cases, hollister clothing, jimmy choo outlet, babyliss pro, ghd hair, iphone 6 cases, asics running shoes, salvatore ferragamo, abercrombie, soccer jerseys, iphone 6s plus cases, iphone 5s cases, abercrombie and fitch, chi flat iron, iphone 6 plus cases, mac cosmetics, nike roshe run, soccer shoes, north face outlet, giuseppe zanotti, herve leger, insanity workout, hollister, nike air max, wedding dresses, mcm handbags

ninest123 mengatakan...

converse shoes outlet, louis vuitton, swarovski jewelry, canada goose jackets, louis vuitton uk, thomas sabo uk, sac louis vuitton, hollister, pandora uk, canada goose, marc jacobs, replica watches, moncler pas cher, karen millen uk, moncler, swarovski uk, coach outlet, supra shoes, ugg uk, louis vuitton, moncler uk, barbour, moncler outlet, pandora jewelry, ugg,ugg australia,ugg italia, sac louis vuitton, canada goose outlet, gucci, wedding dresses uk, juicy couture outlet, ugg pas cher, barbour jackets uk, moncler, lancel, canada goose jackets, canada goose, pandora charms, bottes ugg pas cher, toms shoes, canada goose pas cher, canada goose uk, links of london uk, juicy couture outlet, montre pas cher, canada goose outlet, moncler jackets, moncler, ugg,uggs,uggs canada, pandora jewelry, moncler, ray ban
ninest123 16.03

dong dong23 mengatakan...

toms shoes
polo ralph lauren
supra shoes
jordan 4 toro
louis vuitton handbags
air max 90
louis vuitton handbags
oakley sunglasses
ray ban sunglasses
michael kors outlet
oakley sunglasses
cheap oakley sunglasses
true religion jeans
ray ban sunglasses
louis vuitton outlet
fitflops sale clearance
nike basketball shoes
oakley sunglasses
hollister outlet
hollister clothing
oakley sunglasses
nike air max
jordan retro
coach outlet
louis vuitton outlet
jordan 3
louis vuitton handbags
nike outlet store
ray ban sunglasses
ralph lauren outlet
kate spade
nike air force
giuseppe zanotti sneakers
asics shoes
ray ban sunglasses
cheap jerseys
christian louboutin shoes
michael kors outlet clearance
ray bans
rolex watches
20165.13wengdongdong

chenlina mengatakan...

chenlina20160611
coach outlet
celine outlet
replica watches
louis vuitton bags
fitflops sale clearance
coach outlet
air force 1
louis vuitton handbags
michael kors purses
fitflop sandals
tory burch outlet
louis vuitton handbags
cheap jordan shoes
louis vuitton outlet
hollister
louis vuitton outlet
adidas outlet
coach outlet online
louboutin shoes
ray ban sunglasses discount
ralph lauren outlet
beats solo
cheap jordan shoes
michael kors outlet
louboutin pas cher
nfl jerseys wholesale
oakley sunglasses
lebron shoes
jordan retro
mont blanc pens
hollister kids
louis vuitton outlet stores
air jordans
replica rolex watches
polo ralph lauren
longchamp bags
coach factory outlet online
christian louboutin shoes
coach factory outlet
juicy couture
as

Posting Komentar

silahkan copy paste, tapi jangan lupa sertakan sumbernya