Cara pasang Floating Button di sisi blog

Untuk memasang Floating button di sisi blog seperti yang boleh anda lihat di sisi kanan blog ini, hanya ikut beberapa langkah yang mudah di bawah

Langkah 1

Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript.

Langkah 2

Salin dan edit kod berwarna biru di bawah dengan menggantikan URL akaun anda pada kod yang di bold. Anda juga boleh menggantikan icon asal dengan icon anda sendiri.

<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://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TB5XWecF0sI/AAAAAAAABHY/pPKlT79yKMA/s320/icongb.PNG" /></a><br />

<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://maribinablog.blogspot.com/feed blog' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://3.bp.blogspot.com/_LZtXSNcp76A/TBIPaMfmxJI/AAAAAAAABFY/bPNaLBTwrhQ/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://feedburner.com/akaun feedburner anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feedburner'><img border="0" src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBIPdJ0ZHsI/AAAAAAAABFg/i-CB_cBEzZM/s320/feedburner.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="http://2.bp.blogspot.com/_LZtXSNcp76A/TBIPnxEur8I/AAAAAAAABF4/edEB1NQCdGg/s320/youtube.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>

Seterusnya, paste kod yang telah siap di edit pada ruang Content HTML/Javascript.

Akhir sekali, klik Save.

Anda boleh mencari icon di  http://www.iconspedia.com
Cara pasang Floating Button di sisi blog

wahhh mantap.. terima kasih nescafe...

Anonymous
delete

aku buat jarak antara icon tu terlalu besar..
mcmne nak rapatkan ikon dengan ikon yang lain.

Wah....menarik ni.....
nak cuba la....kalau nk letak sebelah kiri mcm mna pulak? terutamanya blog yg ada shoutmix kat sebelah kanan tu..

@Iza

Erk. Tak terpikir pulak aku. hehe.

Cuba tukar right ke left

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

camne nak tukar icon?

salam..
thanks bro
amat berguna
saya gunakan
di blog saya

yeah! maceh bro!! huhu nah blnje pizza sebijik.. opss tenggelam kat lautan india..hoho.

hmm ada ke buat tutorial pasal button fb share? rasa macam tak jumpe je

ada award.huhu sudi jengah.

nes,
ifa nk tukarkan icon..but dye soh download...
cane ifa nk tukar jadi url??

Nescafe ais
delete

@♥ifa tasya♥

Download dulu. Lepas tu resizekan jadi 32px X 32 px. Lepas tu, dekat new post, upload gambar tu. Tak payah publish. Just klik draft. Salin URL ikonnya

we are offering free seo tutorials. It includes all the topic of search engine optimization. seo tutorial includes 1. keyword research 2.ON-page seo 3. Offpage seo seo tutorial

Fuyooo.... Iklan nuffnang floating.
Bila nak bagi tutorial ni.

hahaha bro yg geng blogger xde ke...nk letak gak tepi cam hang punye nie...kih3

@mrkazen
Dah letak icon GengBlogger. Cuba pasang semula.

@Nescafe ais

bro xleh r ade error laks...die tulis

Required field must not be blank

xtau nape da byk kali try

@mrkazen

da boleh da...ok thank

salam...sy dh psg slm neh..dan ok la..pastu saya nak tambah lagi...but the problem is biasanya bila masuk kod kat html/javascript...xtulis title pn xpe..bleh save...tp this time kne tulis title...xboleh blank..jd xcantik la blog tetiba ade title.

sila tgk kat blog saya yang kat http://heygirl669.blogspot.com. scroll bwh lepas arhive ade perkataan title a. camne nak buat? reply soon.

Nescafe ais
delete

@heygirl

w,salam. Guna kod ni:

<h2></h2>

Masukkan pada title

okeh..sy try bt...thanks

salam, terima kaseh. tutorial yg praktikal.

ada satu masalah bro.. die suruh letak title kat gadget tu.. jadi die kuar kat sidebar.. jadi buruk sikit.. camne ek?

ok bro.. dah jumpa kat komen lain ..
h2 /h2
thanks

formspring dah cari xde pun.. boleh x carikan

thanks bagi tuto ni...sebelum ni aku guna yang aku edit sendiri...bila klik dia tak buka kat page baru...yang ni buka kat page baru....aku suka..aku suka....tapi dah tukar icon sendiri...lebih tersendiri la orang cakap...thanks nes....

This comment has been removed by the author. - Hapus

tqvm tip2 yang menarik n berguna

mcm mana nak tambah icon? nak tambah icon tumblr and formspring?

macamana nak tmbh icon tumblr dgn formspring?

sye wt ta jdi la . ee . H E L P M E ! Hhe .

tQ.. dah dpt buat dh.. hehe

macam mana nak tukarkan imej icon?

Nescafe ais
delete

@PiNoKOoGirL(.'')

Ganti url .png tu dengan ikon yang kita nak

Contoh url ikon:

http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png

This comment has been removed by the author. - Hapus
Anonymous
delete

sye wat x jdi pon?? appear but cant click on it.then how?? sye dah tkar ke link website sye but still same..

Nescafe ais
delete

@Anonymous

Boleh bagi link?

xleyh tmbh YM ke ? sbb sy ade fb ngn ym je , yg laen xde , mls . :P

Anonymous
delete

kalau nak tambah myspace punye tak boleh ke?

asal bnde tu straight ketepi .. xkebawah ?

Nescafe ais
delete

@ainaa ke tepi macam mana yer. Melintang erk?

Hm, dah jadi. But, asal tk bleh nak click?

Nescafe ais
delete

@belle

Saya klik ok jer

tenkiu ! brjaya!

bro nk tnya, berat x blog kalau pasang ni, ada probelm lmbat loading x? ?

This comment has been removed by the author. - Hapus
Anonymous
delete

kalau untuk button formspring?
*sebab saya ada ternampak orang buat

dah follow tuto ni . sng rupa nya ! (:

saya da wat ;-D
kt sidebar kanan,,,
lau kita nk wat kt belah atas caner?

thanks nes, aku pkai yg kat ats tu..tp cam mengganggu je..huhu

@Nescafe ais

Ok, dah berjaya ubah ke kiri.
Thanks..

hey ...kLu mo tambah tumblr ... mcm na ar ...?

saya dah buat, jadi tue jadi. tapikan after add a widget kt page element. bile saya view blog, float button elok je kat kanan tapi kat side bar saya ada widget box kosong pulak. camner tue??

camne nak besarkan lagi menda ni?

terima kasih..DAH SIAP!

I want to make it as a HORIZONTAL icon...can I?

Mereka yang mahu tumblr button.. Saya tahu bagaimana caranya, anda copy saja mana2 kod, dan tukar url kod itu kepada url tumblr anda, kemudian.. anda tukar 'title' kod kepada tumblr, and done!

preview : http://kickoff-theserenitycity.blogspot.com/