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:

nerdly shinny said...

tq aja..hihi

areniem lala said...

thanx :)

ainfarhannah said...

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

amir.a said...

terbaek.. :D
terima kasih..

Akma Ar'ar said...

selesai.... tq

Akma Ar'ar said...

selesai.... tq

Ain Adilah said...

thnx ajr..da jd pn ~ :D

Auni Fasihah 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

Ochtaviia 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 daniel said...

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

Karisma Merah said...

@amir.athnks banyak membantu

Dini Nadhirah said...

Yeah.... jadi tq

Hani Punya Belog said...

Tengs ^_^

Crafty Nieya said...

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

Prysmatic Closet said...

Baru tau.. Tq.. :)

fatin hanisah said...

da dpt buat! tQ :D

Aeny Minniey said...

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

Copyright© All Rights Reserved Jombinabelog.blogspot.com