tutorial : buat iklan floating di sidebar..

14 comments
aduh... dah ramai orang tanya macamana nak buat ni... huhuhu~.. nampak x kat sebelah kanan blog aq tuh?... yang kecik2 floating tuh?.. haa... itu la iklan churp2... tapi floating... huhu...

klik gambar kalau x nampak..

PM kat fb.. huhu~

okeh, sebenarnya kod ni digunakan untuk buat floating button untuk fb, twitter dan formspring, tapi aq ubah sikit supaya nampak lebih kiut+kemas...

rompak gambar kat blog ni...

okeh, caranya macam ni...

1. login blog korang > design > Add a Gadget > HTML/Java Script.

2. kosongkan ruang title... kat ruang content tuh, letak kod ni...   

<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:60px; right:-12px;'>

<a class='linkopacity' href='URL LINK CHURP2 KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='AYAT KORANG'><img border="0" src="URL GAMBAR KORANG" width="80px"/></a><br />

<br />

<a class='linkopacity' href='URL LINK CHURP2 KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='AYAT KORANG'><img border="0" src="URL GAMBAR KORANG" width="80px"/></a><br />

<br />

<a class='linkopacity' href='URL LINK CHURP2 KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='AYAT KORANG'><img border="0" src="URL GAMBAR KORANG" width="80px"/></a><br />

</div>

penerangan...

a) warna biru : ganti ngan url iklan churp2 korang tuh...

b) warna ungu : cuba korang letak arrow mouse korang kat iklan churp2 aq tuh, keluar ayat kan?... haa... korang karang la sendiri ayat korang sesedap rasa... terang la sket2 pasal iklan tuh...

c) warna hijau : url gambar korang tuh... 

d) warna yang x berapa nak merah tu : besar gambar korang... part ni aq tambah.. hehe~.. saiz gambar iklan korang tuh, yang korang amek url nya tuh, x semestinya sama... walaupun berlainan saiz, korang boleh seragamkan saiz gambar2 tuh ngan kod warna merah ni... kasi sama je nombor2 ni semua...

3. apa??.. nak tambah iklan??... ish2.. tamak bebeno korang yer~.. hehehe~... tambah je kod ni :

<br />

<a class='linkopacity' href='URL LINK CHURP2 KORANG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='AYAT KORANG'><img border="0" src="URL GAMBAR KORANG" width="80px"/></a><br />
kat atas
</div>
okeh?...

4. tekan save laju2... done!!!

paham ke?.. entah la.. hehe..... aq x berbakat la buat tutorial ni~... oh ya... untuk menjawab soalan cik kat atas tadi tuh,  'macamana nak jadikan gambar tu blur, tapi bila letak arrow mouse kat situ, baru la gambar tuh terang?'.. hehehe... fungsi tuh dijalankan oleh kod ni...
class='linkopacity'
tapi x payah susah2... aq dah masukkan kat kod atas tuh okeh?.. oh ya, sebagai maklumat tambahan.. nampak x kod ni kat atas tuh :
<br />
kod tu adalah berfungsi untuk menjarakkan gambar2 tersebut... makin banyak korang letak kod tu, makin jarak la gambar tuh... jangan dok tekan 'spacebar' kat keyboard korang tuh... x boleh jarak pun gambar2 tuh walaupun korang tekan spacebar 1000X ok?..

x paham apa2?.. tanya je~..

notakepalalutut : aq buat benda ni ambik masa 2 jam... sumpah aq malas nak buat tutorial... huhuhu~..
Next PostCatatan Terbaru Previous PostCatatan Lama Laman utama

14 ulasan

  1. gary tau tak cane nak besarkan gambar
    tapi gmbar tu tak pecah?
    schaze tak reti nak buat.
    need help. sobsob

    p/s: comment kat entry schaze.. T_T

    BalasPadam
  2. warna kuning xde pon.. -,-

    BalasPadam
  3. patut la..saja2 dok men tekan arie tue...nmpk cntik ja...

    BalasPadam
  4. nice tutor gary hehe..
    MB teringn gak nak buat. naty la huhu

    BalasPadam
  5. thankyou gary for the tips. muah muah. haha

    BalasPadam
  6. Yeayyyy, berjaya dah. Maceh Gary. =D


    http://sayasibudakopto.blogspot.com/2011/07/yeay-akhirnya-berjaya-fuhh-penat.html

    BalasPadam
  7. nak wat jgk..
    thanks 4 the tuto~

    BalasPadam
  8. dah try wat..
    tp ada 1 image je mncul..
    nape ye?

    BalasPadam
  9. nice sharing Gary....tapi masih tak tahu bila hendak ikut ni...masih rasa bermalas-malasan...bookmark entry ni je dulu..kot2x musim bermalas-malasan akan hilang...hihihihi

    BalasPadam
  10. By the way, thanks for tutorial ni...
    Yg best pasal tutorial ni sbb xyah edit template blog... cume pkai widget je... nampak kemas...

    BalasPadam
  11. thanks bro, aku dah aplikasikan tutorial ini dalam blog aku. jemputla tengok *wink wink
    Blog Mohd Zakwan

    BalasPadam

nak tanya soalan tapi takder akaun blogger dan lain-lain? boleh tanya soalan kat fanpage Blog Gary!!™ :)