back Sekai No Shouri: Cara membuat Latar Belakang/Background 1 halaman penuh total

Wednesday, May 25, 2016

Cara membuat Latar Belakang/Background 1 halaman penuh total

Bagi para pembuat blog bingung mengapa jika kita membuka blog kita sendiri latar belakangnya payah. Nah, saya punya kodenya ni, silakan mencoba jika anda paham dan tidak kebingungan.

1. login blogger, kilk template, lalu pilih edit HTML
2. copas kodenya, dan letakan di bawah <head> atau di atas </head> :
<img src="URL images.jpg" class="bg" alt="back" />
ubah URL images.jpg dengan URL images yang anda inginkan.
3. Copas lagi kode di bawah ini dan letakan di bawah <head> atau di atasnya </head> setelah kode diatas:
<style type="text/css" media="screen">
      img.bg {
        /* aturan untuk full background */
        min-height: 100%;
        min-width: 1024px;
        /* scale secara proporsional */
        width: 100%;
        height: auto;
        /* mengatur posisi */
        position: fixed;
        top: 0;
        left: 0;
      }
      @media screen and (max-width: 1024px){
        img.bg {
          left: 50%;
          margin-left: -512px; }
      }
      div#content {
        /* This is the only important rule */
        /* We need our content to show up on top of the background */
        position: relative;
        /* hanya untuk style, tidak memberi dampak pada fungsional */
        width: 500px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
        font-family: helvetica, arial, sans-serif;
        font-size: 10pt;
        line-height: 16pt;
        -moz-box-shadow: #000 4px 4px 10px;
        -webkit-box-shadow: #000 4px 4px 10px;
      }
      body {
        /* hanya untuk style, tidak memberi dampak pada fungsional */
        margin: 0;
        padding: 20px 0 0 0;
      }
    </style>
4. lalu simpan setelan atau save dan coba lihat hasil blog anda.
cara melakukan hasil percobaan, lakukan pada blog saya dengan tekan atau klik pada keyboard CTRL+atau tekan/klik CTRL+-
Bagaimana hasilnya bagus'kan. selamat mencoba dan komentar jika ada kesalahan. 


No comments:

Post a Comment