Cara Membuat Gambar dengan Posisi Statis

Wednesday, November 25, 2009

Kemaren (apa uda kemarennya lagi yak? ) hehehehe baru nengokin blog. Ada yang nanya, gimana sih cara membuat gambar statis yang ga ikut di scroll. Keknya uda banyak deh tutorial dari para mastah yang berkeliaran di search engine, diriku kan nyubih.

Gambar gimana sih Bong? Itu tuh kek gambar illustrasi cewe di sebelah kiri blog ku, yang bisa statis (fixed) dan ga ilang kalau di scroll. Caranya sebenernya cukup dengan sedikit CSS.

#leftimage{
background:url(http://URL-GAMBAR.png) no-repeat;
bottom:0;
left:0;
width: 360px;
height: 360px;
position:fixed;
z-index:10000;
}
Jadi kuncinya
bottom : 0; artinya posisi berada di titik nol sebelah bawah (mepet bawah)
left:0; artinya posisi berada di titik nol sebelah kiri (mepet kiri)
position:fixed; artinya posisi fix, ga ikut kegeser kalau di scroll
z-index:1000; artinya bagian ini berada di paling atas , ya contohnya kek menu bagian bawah itu tuh pas di scroll konten blog berada di bawah nya

Sebenernya yang dibutuhin ya cuma position:fixed; yang lainnya ya sekedar editing mau ditempatkan di mana posisinya.

Demikian sedikit ilmu purbakala saya, semoga bisa membantu

Share This Story

Tags:

You Might Also Like

48 comments

  1. keboajaWednesday, November 25, 2009

    komen dulu ah

    ReplyDelete
  2. Erikson Bin Asli AzizWednesday, November 25, 2009

    oo gituu... kalo yang gambarnya bisa nabok-nabok gimana bong?

    ReplyDelete
  3. t.e.3.k.4Wednesday, November 25, 2009

    :j: makasih ilmunya bong... :j:

    ReplyDelete
  4. HartinahWednesday, November 25, 2009

    kerrreenn, pengen pasang template yg kayak bgini juga tapi blum mengerrti caranya :i:

    ReplyDelete
  5. keboajaWednesday, November 25, 2009

    asik juga buat jual link... tuh mbak...

    ReplyDelete
  6. PencerahWednesday, November 25, 2009

    cuba dulu ah

    ReplyDelete
  7. cikrikWednesday, November 25, 2009

    wooooowwwww, makasih mbak... :-)

    ReplyDelete
  8. vie_threeWednesday, November 25, 2009

    owalaaaahhhh cewek yang lagi duduk ini toh...... gitu caranya toh mbak.....

    ReplyDelete
  9. Seti@wan Dirgant@RaWednesday, November 25, 2009

    Makasih yah bong atas infonya,..
    meskipun ilmunya udah purbakala, tapi hal baru bagi saya

    ReplyDelete
  10. DennyWednesday, November 25, 2009

    ampooonn mbak bongg...

    ReplyDelete
  11. xitalhoWednesday, November 25, 2009

    Asemik ..!! puinter tuenin cah iki....

    ReplyDelete
  12. PRofWednesday, November 25, 2009

    Utek'e Cebong emang encer...!!! Resep'e napo toh..??? Sering2 berendam di aer kale yo..???

    MElu ah....:D

    ReplyDelete
  13. waroeng ubuntuWednesday, November 25, 2009

    maksud gambar statis seperti blogmu ini yah?

    ReplyDelete
  14. SubagyaWednesday, November 25, 2009

    luar biasa ibu ini :D .. apa biasa di luar

    ReplyDelete
  15. marsudiyantoWednesday, November 25, 2009

    Lha ndelehe ning endi?
    Maksudnya setelah kode apa, diatas kode apa atau gimana...
    Masalahe nggonaku kan WordPress...

    ReplyDelete
  16. marsudiyantoWednesday, November 25, 2009

    Sing nduwe blog iki bareng pindahan ning FB njur gak tau inguk2 blogku...
    xixixixixi...

    ReplyDelete
  17. sibaho way is learning toyota production systemWednesday, November 25, 2009

    CSS? opo kui bong :P

    ReplyDelete
  18. Sungai KuantanWednesday, November 25, 2009

    walau tutor purbakala...
    kan baru nongol disini... yah kayak menemukan fosil aja nih... sangat beharga... mana tau nemu harta karun Bong... hehhe.. salam kompak selalu :C:

    ReplyDelete
  19. Just BryanWednesday, November 25, 2009

    O iya inget..
    Dulu aku juga pernah ngedit kayak gitu..

    ReplyDelete
  20. OsiWednesday, November 25, 2009

    Boleh gak bagi2 ilmu cara buat template kayak koleksi Ipiet...gue bangeeettt gitu seleranya...:h:

    Terima kasih Ipiet

    ReplyDelete
  21. Membuat template blogWednesday, November 25, 2009

    makasih yahh tipsnya muachhh:d::d:

    ReplyDelete
  22. Kang SugengWednesday, November 25, 2009

    wuaaaaaaaaaaaaa.......... mantab... sangat bermanfaat ini Mbak, ilmu baru juga buat saya, hedhehehehe.....

    ReplyDelete
  23. RanggaGoBloGWednesday, November 25, 2009

    trimakasih suhu atas pencerahannya.... btw gak pake div div an gitu ya mbak... hihihihi *sotoy mode on

    ReplyDelete
  24. Berita NarsisThursday, November 26, 2009

    Hadoooh...itunya si mudah mbak, cuma otak atik templatenya supaya bisa kayak gini yang susah, wkwkwkwk...
    Setting sana setting sini, njelimet :D

    ReplyDelete
  25. All Finance HereThursday, November 26, 2009

    thanks infonya tante..

    ReplyDelete
  26. detEksiThursday, November 26, 2009

    pake iframe juga bisa bong ;)

    ReplyDelete
  27. Blog IjoThursday, November 26, 2009

    :c:
    :h:

    muagh..muagh..
    cebong emang masternya...
    *ajari bong*

    ReplyDelete
  28. cebong ipietThursday, November 26, 2009

    @keboaja :hayah silahkan mas
    @Erikson Wijaya : coba deh pasang gambarmu
    @t.e.3.k.4 : hehehe sama sama
    @●Hartinah● diutak atik aja
    @keboaja :wekz kok bisa
    @Pencerah : halah hoax
    @cikrik : pakabar mas buwel
    @vie_three : iyoh mbak yu
    @Seti@wan Dirgant@Ra : hehehehe saya juga cuma intip intip pak
    @Denny : wowoow salahmu opo
    @xitalho : wekz.. css contek sana sini
    @PRof : kwkwkwkkw ndak nduwe utek ki :p
    @waroeng ubuntu : yoi gitu deh yang nangkring itu
    @subagya : kwkwkkwkw undangannya woe
    @marsudiyanto : bwehhehehe saiki sapidi rodo dudud sering matek hikz
    @sibaho way : contek sana sini
    @Sungai Kuantan : hehehehehe lha tinggal nambahi sebaris kode
    @Just Bryan : yoi...
    @Osi : hehehehe asal bisa mbayangin designnya pasti bisa
    @Membuat template blog : wow
    @Kang Sugeng : hehehe coba nguthek nguthek dewe kang
    @RanggaGoBloG : iyo div nya ya di HTML itu kek biasa
    @Berita Narsis : wkkwkwkw ya gitu dah eneg eneg dah liat html
    @All Finance Here : sama sama
    @detEksi : heEm..cuman diriku blum tau caranya om xiixix iku ae ngintip nggone anang
    @Blog Ijo : hayah... gilo prie kkwkwkwkwkw

    ReplyDelete
  29. Slamet RiyadiThursday, November 26, 2009

    alhamduliah mba cebong bagi bagi ilmu
    rahasia biar pintar apa si h mbak? (rahasianya bukan berenang dikali kan?)

    ReplyDelete
  30. Slamet RiyadiThursday, November 26, 2009

    :c:
    hehehehe akhirnya aku bikin juga belum bisa, dasar dedel!!

    ReplyDelete
  31. free backlinksThursday, November 26, 2009

    tante bong kalau menunya itu carane gimana biar gak scroll juga? (home, emoticon dan sebagainya)

    terimkasih

    ReplyDelete
  32. Cebong IpietThursday, November 26, 2009

    wackz dipanggil tante :i:
    sama aja kok..menunya mau ditempatin di mana, misal di taruh di #lower, tinggal ditambahin kode yg fixed sama z-index nya

    #lower {
    position: fixed;
    background:#bbcf4a url(http://3.bp.blogspot.com/_nxOMLf2KJwU/So2y6hOZQ1I/AAAAAAAABxA/14k43iKeEoc/s1600/footer.png) repeat-x top;
    height:106px;
    width:100%;
    right:0;
    z-index:1000;
    bottom:0;
    }

    ReplyDelete
  33. GraviswareThursday, November 26, 2009

    he.he.. CSS neeh.. siiip!! langsung dicatat, ntar ajarin yang laen lagi yah..

    ReplyDelete
  34. sendy semprolFriday, November 27, 2009

    :c: pengen les sama cebong.... :g:

    ReplyDelete
  35. Edi PswFriday, November 27, 2009

    Wah, kereen....

    ReplyDelete
  36. UnknownFriday, November 27, 2009

    Thanks yo mbak, contohnya kaya templit ini ya?

    ReplyDelete
  37. free backlinksFriday, November 27, 2009

    jangan nangis dong tante aku ganti dech budhe ya :) eh thanks ya sangat membantu.. kapan2 tanya lagi deh... trus berkarya...

    ReplyDelete
  38. afwan auliyarFriday, November 27, 2009

    mantaaaaaaaaaaps bong :)
    wew... meyakinkan sekali neh tipsnya :c:

    ReplyDelete
  39. YolizzFriday, November 27, 2009

    hoooo.. begituu toohh... tapi kayakny agak susah aku praktekin sendiri neehh,, secara dudul!! :i:

    ReplyDelete
  40. dunia vernMonday, November 30, 2009

    hahahhaa, ini aku yg tanya...
    waktu itu mau nyempurnain themes yg http://anime-themes.blogspot.com/
    makasih udah dibuatin tutor penjelasannya :D

    ReplyDelete
  41. yusakoSaturday, December 05, 2009

    terharu, mba cebong ini mau berbagi ilmu! semoga Allah memberkatimu, bu.. :i:

    ReplyDelete
  42. yusakoSaturday, December 05, 2009

    eh salah icon maksudnya :j:

    ReplyDelete
  43. Vicky OktryaMonday, December 07, 2009

    mbak ceboong, jadi backgroundnya udah kita bikin sendiri, gitu? gambarnya bikin pake aplikasi apa, mba?
    hehehe

    ReplyDelete
  44. AnonymousTuesday, December 08, 2009

    wordpress yg free bisa ngga ?

    ReplyDelete
  45. ndopSaturday, December 12, 2009

    nek sing bagian fixed, aku wis mudeng ket jaman friendsteran biyen, bottom 0, z index, aku jiayn gung ruh... ahhahaha..

    suwun suhuuu... suwun uplineku...

    ReplyDelete
  46. Warung BebasTuesday, December 15, 2009

    Mbak Cebong emang jago CSS, yang susah bikin gambarnya itu loh.... kok bisa nyatu...

    :e:

    ReplyDelete
  47. panduThursday, June 24, 2010

    tengkyu tengkyu mbak cebong
    sekarang jadi pengen mbuat archive list melayang
    bisa ga ya
    tespercobaan123.blogspot.com ha ha berantakan banget

    ReplyDelete
  48. PingkanThursday, September 09, 2010

    mbak, itu kode tinggal dikopas ke CSS kan ya? kok gambar saya ga keluar ya? tolong bantuannya ya :j: thx

    ReplyDelete