Cumulus swf - flash

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 «

31 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. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. makasi gan
    ane terbantu ma postingannnya

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

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

    BalasHapus
  13. 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
  14. Alhamdullah gan.. :) Tips dari gan , saya pratekin langsung bisa gan...

    Terimakasih yah gan

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

    BalasHapus
  16. Keren gan

    Kunjungi Juga
    http://jamutradisionalmujarab.com/

    BalasHapus
  17. Nice Gan Tutornya

    http://obatjellygamatgoldg.net/

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

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

    BalasHapus
  20. 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
  21. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  22. thanx gan,,,membantu sekali dalam membuat desain background yang sesuai dengan halaman blog,,,

    Kunjungi website saya ya : https://faiz4l.mahasiswa.atmaluhur.ac.id/ dan website kampus saya : http://www.atmaluhur.ac.id

    BalasHapus
  23. Ok.. ketemu juga jawaban ini..

    Thanks

    BalasHapus
  24. Pengakuan tulus dari: FATIMAH TKI, kerja di Singapura

    Saya mau mengucapkan terimakasih yg tidak terhingga
    Serta penghargaan & rasa kagum yg setinggi-tingginya
    kepada KY FATULLOH saya sudah kerja sebagai TKI
    selama 5 tahun Disingapura dengan gaji Rp 3.5jt/bln
    Tidak cukup untuk memenuhi kebutuhan sehari-hari
    Apalagi setiap bulan Harus mengirimi Ortu di indon
    Saya mengetahui situs KY FATULLOH sebenarnya sdh lama
    dan jg nama besar Beliau
    tapi saya termasuk orang yg tidak terlalu yakin
    dengan hal gaib. Karna terdesak masalah ekonomi
    apalagi di negri orang akhirnya saya coba tlp beliau
    Saya bilang saya terlantar disingapur
    tidak ada ongkos pulang.
    dan KY FATULLOH menjelaskan persaratanya.
    setelah saya kirim biaya ritualnya.
    beliau menyuruh saya untuk menunggu
    sekitar 3jam. dan pas waktu yg di janjikan beliau menghubungi
    dan memberikan no.togel "8924"mulanya saya ragu2
    apa mungkin angka ini akan jp. tapi hanya inilah jlnnya.
    dengan penuh pengharapan saya BET 200 lembar
    gaji bulan ini. dan saya benar2 tidak percaya & hampir pingsan
    angka yg diberikan 8924 ternyata benar2 Jackpot….!!!
    dapat BLT 500jt, sekali lagi terima kasih banyak KY
    sudah kapok kerja jadi TKI, rencana minggu depan mau pulang
    Buat KY,saya tidak akan lupa bantuan & budi baik KY.
    Demikian kisah nyata dari saya tanpa rekayasa.
    Buat Saudaraku yg mau mendapat modal dengan cepat

    ~~~Hub;~~~

    Call: 0823 5329 5783

    WhatsApp: +6282353295783

    Yang Punya Room Trimakasih

    ----------

    BalasHapus

 
GR | Edited by | gubhug reyot