Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Berapapun Ukurannya, Background Selalu Pas di Blog: Background Size Property

Penasaran dan rasa kecewa menggerogoti hati tatkala background blog nggak sesuai dengan lebar halaman blog? Background blog kebesaran? He ...he ... atau mungkin justru kekecilan? Pssssstttt ... nggak perlu marah-marah atau kecewa! Atasi saja dengan menambah sedikit kode CSS background-size property. Nggak percaya? Ho ... ho ... coba saja! Eit... tapi jangan lupa update terus browser-nya dengan yang terbaru. CSS3 tabu untuk dibuka dengan browser-browser yang sudah ketinggalan "sepur". Haiya... Oke?!

Kode CSS background-size property sangat tepat bila digunakan sobat-sobat blogger yang menggunakan background image sebagai latar-belakang/background blog, terlebih bagi yang saat ini menggunakan template blogger dari "New Blogger Templates" ((NBT). Yah..., karena sebagin besar NBT menggunakan image sebagai background body, yang bahkan kebetulan semua background image yang digunakan berukuran jumbo dan berakibat tidak seluruh bagian gambar terlihat di halaman blog. Sebagai perumpamaan, jika misalnya background image yang digunakan berupa gambar sampeyan sendiri yang lagi makan jengkol, maka mungkin yang terlihat hanya berupa muka sampeyan "yang mirip jengkol", sedang jengkolnya sendiri hilang karena background yang kebesaran. Perlu diketahui bahwa background image yang ada di NBT rata-rata menggunakan ukuran lebar sebesar 1800px, sedang sebenarnya yang dibutuhkan 1024px (sesuai lebar layar dan coba bayangkan apabila gambar yang tersedia lebarnya 1800px, maka berapa bagian gambar yang akan hilang?).

Kode CSS Background Size Property

Kode CSS background size property di sini berfungsi untuk merubah ukuran background image secara otomatis agar sesuai dengan ruang yang tersedia. Jadi ketika kita gunakan di bagian body (sebagai background body) maka biar selebar apapun ukuran gambarnya, maka akan terlihat dihalaman blog sesuai lebar body yang digunakan (:sesuai lebar halaman blog!). Ada dua Kode CSS yang bisa digunakan, silahkan pilih salah satu!

Kose CSS yang ini digunakan untuk NBT

Kode CSS I

body{
      background-attachment:fixed;
      background-size:cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Kode CSS II

body{
     background-attachment:fixed;
     background-size:1024px auto;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}
Jika diperhatikan di NBT kode CSS syntax body adalah seperti ini (ini hanya satu contoh dari "Travel" NBT)
body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
}
Letakkan CSS I atau CSS II tepat di bawahnya sehingga menjadi seperti berikut:
body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
}
body{
     background-attachment:fixed;
     background-size:cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Atau bisa juga digabungkan sekalian menjadi seperti berikut:
body {
     font: $(body.font);
     color: $(body.text.color);
     background: $(body.background);
     background-attachment:fixed;
     background-size:cover;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}
Silahkan lakukan cara yang sama untuk penggunaan kode CSS II.

Cara menyimpan kode css

  • Login ke Blogger dengan cara menuliskan Email Address, Password kemudian klik LOGIN
  • Setelah DASBOARD (Dasbor) terbuka, klik "DESIGN" (Rancangan).
  • KLIK "Edit HTML" kemudian lanjutkan klik "DOWNLOAD FULL TEMPLATE" (Download Template Lengkap) untuk melakukan penganmanan terhadap template (back-up templates). Simpan file template di folder PC.
  • Setelah file template tersimpan dengan aman, silahkan lihat kembali kode-kode di "Edit HTML" kemudian cari syntax body
    Contoh:
    body {
         font: $(body.font);
         color: $(body.text.color);
         background: $(body.background);
    }
  • Tambahkan kode baru di bawahnya atau sesuai contoh di atas.
  • KLIK "SAVE TEMPLATE".

Catatan - Keterangan

  • Kode CSS I akan membuat lebar background image secara otomatis selebar body/halaman blog.
  • Kode CSS II diset pada width=1024px. Untuk lebar yang berbeda bisa dilakukan perubahan nilai guna penyesuaian.
  • Jika kode background size dari IE 8 mau diabaikan, silahkan buang kode :

    filter: progid:DXImage .... dan -ms-filter: "progid:DXImage ....
  • Jika menghendaki kode background size untuk IE 8 dan digunakan di NBT, anda bisa mencari URL background body-nya di Variable definitions yang terletak di bagian atas template. Untuk lebih jelasnya bisa membaca panduan yang berkaitan dengan hal tersebut melalui link di bawah ini :



  • Penggunaan pada desain blog/template secara umum menggunakan kode seperti di bawah ini:
body{
     background:#fff url(.../images/bg_body.jpg);
     background-position:left top;
     background-repeat:no-repeat;
     background-attachment:fixed;
     background-size:cover; /* atau background-size:1024px auto; */
     margin:0; /* in IE */
     padding:0; /* in IE */
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}
Atau dalam bentuk berbeda:
body{
     background:#fff url(.../images/bg_body.jpg) center center no-repeat fixed;
     background-size:cover; /* atau background-size:1024px auto; */
     margin:0; /* in IE */
     padding:0; /* in IE */
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale'); /*IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-body.jpg', sizingMethod='scale')";  /*IE 8 */
}

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - gubhugreyot «

30 komentar:

  1. nice post.

    mas, mau nanya, tolong post kan cara buat widget jadi nyala cahayanya pas disorot ama mouse. macam widget punya mas itu, keren mas soalnya. pengen belajar. cara buat widgetnya jadi semi-transparan gitu gimana caranya? mohon pencerahannya di email ku : alexers.flash.club@gmail.com, atau langsung jawabannya aja ya..
    thanks

    BalasHapus
  2. bapa/ om/ mas gmn sih cara bikin statistik blog kaya e991,, masa bisa berjalan terus tanpa pengunjung ?

    BalasHapus
  3. Thank's boz,
    atas Info nya!
    Sangat bermanfaat, tuk pemula kek ane. :D

    BalasHapus
  4. D7++
    cari gambar di google dengan ukuran 1200cm karena ukuran tersebut adalah ukuran standart..!!
    contoh gambar...!
    http://dark.pozadia.org/images/wallpapers/Dark-Forest-35836-240944.jpeg

    BalasHapus
  5. Mas mau tanya kalo mau pasang game di blog joomla gimana caranya? Kalo lagi ada waktu kunjungi blog saya ya mas di http://bennyshop.vacau.com ...kasih saran bagusnya kayak gimana. Terima kasih.

    BalasHapus
  6. wah hebat mas... lengkap sekali .. mau berguru terus mas...

    BalasHapus
  7. blognya keren nie..
    aku member 523 kk..
    follow ya..
    :D

    BalasHapus
  8. blog na mantap..penuh dengan JS..
    maen k blog ane juga y juragan

    di

    Photoshop TutorialTips BlogHitsuke

    BalasHapus
  9. Blog'e Cah Nganjuk mensupport blog agan agar trs berkarya...keep write gan biar cpt dpt pr dr google :)

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. makasi gan
    ane terbantu ma postingannnya

    BalasHapus
  12. Wahhh makasih sob, bener" membantu banget :) #seneng
    Blognya juga keren nih :)
    Sukses slalu ya

    BalasHapus
  13. Trims dah tak praktekkan... mantep "sukses"

    BalasHapus
  14. kk aq blum sukses
    baground belakang sih emang full
    tapi di atas background jika di scroll mousenya
    gambar baground belakangnya masih nempel dengan header seperti nyatu dech
    mohon beri pencerahannya

    BalasHapus
  15. Alhamdullah gan.. :) Tips dari gan , saya pratekin langsung bisa gan...

    Terimakasih yah gan

    BalasHapus
  16. Bagus nih..... kunjungi juga ya di
    www.tik-lebihdekat.blogspot.com
    Semangat Ngeblog ya!!! Sukses deh

    BalasHapus
  17. Keren gan

    Kunjungi Juga
    http://jamutradisionalmujarab.com/

    BalasHapus
  18. Nice Gan Tutornya

    http://obatjellygamatgoldg.net/

    BalasHapus
  19. Thank Gan infonya, ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/

    BalasHapus
  20. You're help me full! Thanks for the information.
    Feed back please http://animesakuin.blogspot.co.id/

    BalasHapus
  21. blog sama artikelnya keren kunjung balik ea sapa tau tambah ganteng https://abangjarothz.blogspot.co.id/2013/03/cara-meluruskan-rambut.html

    BalasHapus
  22. ane udah ctrl+f kemudian cari
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }
    Kok gak ada ya. Tolong pencerahannya min.

    BalasHapus

 
GR | Edited by | gubhug reyot