Cara Buat Floating Button (Facebook, Twitter ect) | ˙·٠•●♥ mia suka berangan™ ♥●•٠·˙


Assalamualaikum. saya kini mengambil tempahan untuk make up Dinner, Photoshoot, Tunang dan Nikah sekitar Melaka, Negeri Sembilan, Selangor dan Kuala Lumpur. Email me oke : gardisareyou@yahoo.co.uk

Join ChurpChurp Jom!

Tuesday, December 28, 2010

Cara Buat Floating Button (Facebook, Twitter ect)

Dicatat oleh m i a di 2:15 PM
Assalamualaikum..


baeklah, hari ni nak share dengan korang semua macamane nak buat floating button macam yang saya buat untuk button FB dan Twitter tu..

again, yang ini pon mudah jugak, same je macam nak pasang widget baru kat blog..ehhe..saya memang suka buat tutorial yang senang-senang gini, yang kena edit kat html tu, takot korang tak faham pulak..pasal saya pon, try n error je kot..ekehke

oke baeklah, mari mulakan ya..

1. Design > Add and Arrange Page Elements > Add a gadget >  HTML/JavaScript

2. copy (ctrl+c) code ni, dan paste (ctrl+v) pada kotak html/javascript tadi..
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:240px; right:-12px;'>

<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TBIPXEkOOEI/AAAAAAAABFQ/DAPJdek1QbQ/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://1.bp.blogspot.com/_LZtXSNcp76A/TBIPlDeEV5I/AAAAAAAABFw/5Z4co3O_jpU/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png" /></a><br />

</div>

3. klik save, then save lagi kat bahagian atas dan view blog..


yang 240px tu, untuk ketinggian button, lagi tinggi nombor tu, lagi rendah kedudukan button tu.

korang bole ubah, sama ada nak button ada kat right (kanan) or left (kiri).

masukkan url akaun kat tempat kaler kuning

dan url image untuk button tu kat tempat kaler ungu

korang bole cari icon tu kat http://www.iconspedia.com

nak tahu url image tu, korang bole tengok tutorial ini okee

yeah da siap..ehehee..

selamat mencuba uols..

~wassalam~

pst : tutorial ni untuk yang tak tahu oke..pada yang tahu dan pakar..diam..diam..kredit untuk maribinablog
da buat?komen sini yaa..terima kasih.

9 ulasan:

azzey on December 27, 2010 at 11:41 PM said... BALAS

Perkongsian yg berguna...:)

Cik Sehari on December 28, 2010 at 12:03 AM said... BALAS

tqvm mia :)

mia on December 28, 2010 at 2:38 AM said... BALAS

@azzey

tq sis

mia on December 28, 2010 at 2:38 AM said... BALAS

@Cik Sehari

welkam dear..ehhee

♥cik mySara♥ on January 19, 2011 at 12:31 PM said... BALAS

sis..
thanx share bende ni.
ari ni bru free nk buat.hehe =,='

zombizombizuliqa on April 17, 2011 at 9:25 AM said... BALAS

salam, best la tutorial blog ni..mudah je nak faham..byk dah yg saya apply kat blog saya.

mia on April 18, 2011 at 2:45 AM said... BALAS

@♥cik mySara♥

welkam dear..all da best ya

mia on April 18, 2011 at 2:45 AM said... BALAS

@zombizombizuliqa

hehehe...sharing is caring..gud luck ya

Nina Eina Slumber on August 7, 2012 at 11:35 PM said... BALAS

Thanks...helpful sangat2...suka sangat-sangat!! thanks a lot!

 

˙·٠•●♥ mia suka berangan™ ♥●•٠·˙ Dikuasakan Oleh Blogger Template Touch Up by Mia Adnan