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


{ 64 comments.. read them below or add one }

A-Y-I-E A-Y-I-E 8:48 PM
wahhh mantap.. terima kasih nescafe...
AnonymousAnonymous 8:54 PM
aku buat jarak antara icon tu terlalu besar..
mcmne nak rapatkan ikon dengan ikon yang lain.
Iza Iza 9:51 PM
Wah....menarik ni.....
nak cuba la....kalau nk letak sebelah kiri mcm mna pulak? terutamanya blog yg ada shoutmix kat sebelah kanan tu..
Nescafe ais Nescafe ais 10:38 PM
@Iza

Erk. Tak terpikir pulak aku. hehe.

Cuba tukar right ke left

div style='display:scroll; position:fixed; top:240px; right:-12px
Along25 Along25 12:02 AM
camne nak tukar icon?
zulkbo zulkbo 3:07 AM
salam..
thanks bro
amat berguna
saya gunakan
di blog saya
bellar0ssa bellar0ssa 1:59 PM
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
bellar0ssa bellar0ssa 3:31 PM
ada award.huhu sudi jengah.
♥ifa tasya♥ ♥ifa tasya♥ 2:33 AM
nes,
ifa nk tukarkan icon..but dye soh download...
cane ifa nk tukar jadi url??
Nescafe aisNescafe ais 2:37 AM
@♥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
seo tutorial seo tutorial 5:23 PM
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
RIS-IT RIS-IT 8:37 PM
Fuyooo.... Iklan nuffnang floating.
Bila nak bagi tutorial ni.
mrkazen mrkazen 6:57 AM
hahaha bro yg geng blogger xde ke...nk letak gak tepi cam hang punye nie...kih3
Nescafe ais Nescafe ais 9:49 AM
@mrkazen
Dah letak icon GengBlogger. Cuba pasang semula.
mrkazen mrkazen 2:57 PM
@Nescafe ais

bro xleh r ade error laks...die tulis

Required field must not be blank

xtau nape da byk kali try
mrkazen mrkazen 3:11 PM
@mrkazen

da boleh da...ok thank
heygirl heygirl 3:44 AM
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 aisNescafe ais 4:09 AM
@heygirl

w,salam. Guna kod ni:

<h2></h2>

Masukkan pada title
heygirl heygirl 3:44 PM
okeh..sy try bt...thanks
karkuzaridakwahiman karkuzaridakwahiman 10:12 AM
salam, terima kaseh. tutorial yg praktikal.
Fyzal Fyzal 4:20 PM
ada satu masalah bro.. die suruh letak title kat gadget tu.. jadi die kuar kat sidebar.. jadi buruk sikit.. camne ek?
Fyzal Fyzal 4:28 PM
ok bro.. dah jumpa kat komen lain ..
h2 /h2
thanks
yanalililala yanalililala 6:10 PM
formspring dah cari xde pun.. boleh x carikan
SD SD 10:09 AM
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....
Fathurrahman b. Alias Fathurrahman b. Alias 11:44 AM
This comment has been removed by the author.
merdeka merdeka 8:08 AM
tqvm tip2 yang menarik n berguna
MJ MJ 2:10 PM
mcm mana nak tambah icon? nak tambah icon tumblr and formspring?
alia alia 10:56 PM
macamana nak tmbh icon tumblr dgn formspring?
DabeL 'a' DabeL 'a' 11:44 AM
sye wt ta jdi la . ee . H E L P M E ! Hhe .
Anak Gemilang Anak Gemilang 1:25 AM
tQ.. dah dpt buat dh.. hehe
PiNoKOoGirL(.'') PiNoKOoGirL(.'') 8:28 PM
macam mana nak tukarkan imej icon?
Nescafe aisNescafe ais 9:40 PM
@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
Norasliza Norasliza 3:27 PM
This comment has been removed by the author.
AnonymousAnonymous 3:35 PM
sye wat x jdi pon?? appear but cant click on it.then how?? sye dah tkar ke link website sye but still same..
Nescafe  aisNescafe ais 5:19 PM
@Anonymous

Boleh bagi link?
Farah + Hanis :) Farah + Hanis :) 11:31 AM
xleyh tmbh YM ke ? sbb sy ade fb ngn ym je , yg laen xde , mls . :P
AnonymousAnonymous 1:24 PM
kalau nak tambah myspace punye tak boleh ke?
ainaa ainaa 8:28 AM
asal bnde tu straight ketepi .. xkebawah ?
Nescafe aisNescafe ais 12:23 PM
@ainaa ke tepi macam mana yer. Melintang erk?
belle belle 12:15 PM
Hm, dah jadi. But, asal tk bleh nak click?
mogobja mogobja 2:05 PM
time kaseh ! :D
Nescafe aisNescafe ais 2:23 PM
@belle

Saya klik ok jer
miya miya 2:13 PM
tenkiu ! brjaya!
redzuan redzuan 6:55 AM
bro nk tnya, berat x blog kalau pasang ni, ada probelm lmbat loading x? ?
acha acha 5:54 PM
This comment has been removed by the author.
AnonymousAnonymous 10:25 PM
kalau untuk button formspring?
*sebab saya ada ternampak orang buat
Cikin Cikin 1:34 PM
dah follow tuto ni . sng rupa nya ! (:
cantekk cantekk 9:44 AM
saya da wat ;-D
kt sidebar kanan,,,
lau kita nk wat kt belah atas caner?
good_boy good_boy 6:15 PM
thanks nes, aku pkai yg kat ats tu..tp cam mengganggu je..huhu
Iza Iza 7:08 PM
@Nescafe ais

Ok, dah berjaya ubah ke kiri.
Thanks..
nellyn lover purple nellyn lover purple 2:28 AM
hey ...kLu mo tambah tumblr ... mcm na ar ...?
Hanie Puteri Hanie Puteri 1:00 PM
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??
Syuhada Elmi. Syuhada Elmi. 3:42 PM
camne nak besarkan lagi menda ni?
fatenalina fatenalina 4:24 PM
terima kasih..DAH SIAP!
Kim Kim 12:41 PM
I want to make it as a HORIZONTAL icon...can I?
Nurul Izzati Nurul Izzati 3:40 PM
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/