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

You Might Also Like

51 comments

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

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

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

    ReplyDelete
  4. wooooowwwww, makasih mbak... :-)

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

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

    ReplyDelete
  7. Asemik ..!! puinter tuenin cah iki....

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

    MElu ah....:D

    ReplyDelete
  9. maksud gambar statis seperti blogmu ini yah?

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

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

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

    ReplyDelete
  13. 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
  14. O iya inget..
    Dulu aku juga pernah ngedit kayak gitu..

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

    Terima kasih Ipiet

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

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

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

    ReplyDelete
  19. :c:
    :h:

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

    ReplyDelete
  20. @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
  21. alhamduliah mba cebong bagi bagi ilmu
    rahasia biar pintar apa si h mbak? (rahasianya bukan berenang dikali kan?)

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

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

    terimkasih

    ReplyDelete
  24. 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
  25. he.he.. CSS neeh.. siiip!! langsung dicatat, ntar ajarin yang laen lagi yah..

    ReplyDelete
  26. Thanks yo mbak, contohnya kaya templit ini ya?

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

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

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

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

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

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

    ReplyDelete
  33. wordpress yg free bisa ngga ?

    ReplyDelete
  34. 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
  35. Mbak Cebong emang jago CSS, yang susah bikin gambarnya itu loh.... kok bisa nyatu...

    :e:

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

    ReplyDelete
  37. The fashion ed hardy shoes for girls skinny leg denim jeans is massive! There are sever ed hardy shoes al reasons for this following. Firstly, these ed hardy shoes figure squeezing jeans are well-liked by teen superstars and girls often like to emulate their most loved star. They are also very easy to wear – jeans complement everything in your wardrobe and can be dressed up or dressed down
    based on the situation. Additionally, young women and teen girls prefer ed hardy clothing to have on something their own mothers can’t, and skinny ed hardy outlet leg jeans fit this description.

    ReplyDelete
  38. guoweigang More often than not, even pandora bracelets sale the kind of material used for the jewelry is also diverse. Most necklaces are normally made from silver or gold, but there are others that use leather or even bones and shells.Other necklaces contain precious stones, most commonly diamond, similar to discount pandora bracelets what rap stars usually wear. Among these so called "bling" the most common design is usually the cross.Aside from the obvious fashion purposes, these cross pandora jewerly necklaces can mean so much more depending on the personal faith of the wearer.Pretty much, cross necklaces can either be worn to symbolize faith pandora 2010 or plainly as a fashion statement. They can showcase the personal faith of the wearer. There are plenty of sites online as well as stores offline that can help you find the right men's cross necklaces to wear for yourself or to give away to male friend or lover.

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

    ReplyDelete