Senarai Tutorial

Floating Button

Preview:

Floating button digunakan untuk memudahkan reader connect dengan sosial network korang. Selain menjimatkan ruang, ianya juga nampak kemas dan cantik. Floating button ini akan muncul pada sebelah sisi kanan atau kiri blog korang. Selain sosial network, korang juga boleh letak button lain untuk floating button ini (cth: email, link blog, youtube dan etc), bergantung kepada apa yang korang nak reader connect.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang 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:140px; left:-12px;'>

<a class='linkopacity' href='URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='URL BLOG ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />


</div>

Nota:
- Pada tulisan berwarna biru, masukkan url facebook, twitter dan blog korang.
- Pada tulisan berwarna merah, masukkan url button yang korang nak. Search button di google atau mana-mana image hosting. Kalau nak gunakan yang sedia ada pun takde masalah, tak perlu search.
- Yang warna purple pula, boleh tukar mengikut kesesuaian blog. Left boleh ditukar kepada right.

4) Save dan lihat hasilnya.

Selamat mencuba! :)


Special:
wOoWW...!!!!!
dia dicabar untuk SENYAP...
Lawak kot tengok laki hilang kemachoan diorang dalam keadaan macam ini...!!!!
watch a movie...


Sharing is caring ^_^

21 komen budak comel:

najwa iezora said...

tq aja..hihi

aniem xoxi said...

thanx :)

Anonymous said...

hmm ,sy ad mslah ni...
sy dh buat tp xjdy npe erk?

amir.a said...

terbaek.. :D
terima kasih..

Ar'ar Akma said...

selesai.... tq

Ar'ar Akma said...

selesai.... tq

Ain Adilah said...

thnx ajr..da jd pn ~ :D

Anonymous said...

saya lupa twitter saya ape...boleh ke buat tanpa twitt
er??

Jombinabelog said...

@Auni Fasihah boleh..just tinggalkan kosong pada ruang url twitter

Mrs Ariena said...

Yeay..jadi..bestnyer..tq

Ochtavia said...

koq gk bsa ?

Tasya Choco said...

akak ,takde button yg corak yang comel lagi ke ? klu ade boleh tak bgi link tu ? plz ...

azyefa said...

tq...

ezyra taharin said...

1st try da dpt hehe..thanks..btw yela,,if de link button ag comel,bg la ya^^

Unknown said...

@amir.athnks banyak membantu

Unknown said...

Yeah.... jadi tq

Hani Punya Belog said...

Tengs ^_^

Unknown said...

kalau nak mintak izin copy code boleh tak? untuk tutorial..nanti saye letak credit to~ boleh?? =)

Prysmatic Closet said...

Baru tau.. Tq.. :)

Unknown said...

da dpt buat! tQ :D

Unknown said...

slm , thanks kak ! dah jadi ! huhu ! :)

Copyright© All Rights Reserved Jombinabelog.blogspot.com