Cari Artikel Blog Ini

Memuat...

Dicoba gan...

Total Tayangan Laman

CARA MENGUBAH BACKGROUND BLOG

Pengaturan background sebuah blog dapat kita lakukan dengan mudah dengan syarat harus mengenal terlebih dahulu bagian-bagian dari blog.
Bagian-bagian tersebut diantaranya :
  1. Body : bagian keseluruhan dari blog.
  2. Outer Wrapper : bagian yang didalamnya terdapat : Main Wrapper dan Sidebar Wrapper.
  3. Main Wrapper : tempat kita membuat postingan.
  4. Sidebar Wrapper : tempat kita meletakan berbagai widget
  5. Main Widget : bagian dalam dari main wrapper.
  6. Sidebar widget : bagian dalam dari sidebar.

Setelah mengetahui bagian-bagian blog tersebut, selanjutnya tinggal mengganti warna sesuai dengan pilihan masing-masing.
Kode warna dapat anda lihat pada KODE WARNA VERSI 1 dan KODE WARNA VERSI 2
  1. Pewarnaan pada bagian Body :

    body {
    background:#002E3F;
    margin:0;
    color:$textcolor;
    font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }


    Perhatikan yang berwarna merah, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

  2. Pewarnaan pada bagian Outer Wrapper :

    #outer-wrapper {
    width: 990px;
    margin:0 auto;
    padding:10px;
    text-align:$startSide;
    font: $bodyfont;
    background:#1B703A;
    }


    Perhatikan yang berwarna kuning, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

  3. Pewarnaan pada bagian Main Wrapper :

    #main-wrapper {
    width: 470px;
    float: $startSide;
    background:#80FF00;
    border:5px solid
    backgroudcolor;white;
    padding:15px 15px .25em;
    word-wrap: break-word;
    overflow: hidden;
    }


    Perhatikan yang berwarna kuning, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

  4. Pewarnaan pada bagian Sidebar Wrapper :

    #sidebar-wrapper {
    width: 230px;
    float: $endSide;
    background:#78B749;
    border:0px solid $bordercolor;white;
    padding:5px 5px .25em;
    word-wrap: break-word;
    overflow: hidden;
    margin-bottom:0px;
    }


    Perhatikan yang berwarna kuning, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

  5. Pewarnaan pada bagian Main Widget :

    .main .widget{
    background:#CAF99B;
    border:px solid #cccccc;
    margin:0 0 0.5em;
    padding:;
    }


    Perhatikan yang berwarna kuning, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

  6. Pewarnaan pada bagian Sidebar Widget

    .sidebar .widget{
    background:#CAF99B;
    border:2px solid #cccccc;
    margin:0 0 0.5em;
    padding:0.5em;
    }


    Perhatikan yang berwarna kuning, silahkan anda ganti dengan warna pilihan anda. Jika belum ada kode untuk backgroud, tinggal ditambah sesuai contoh diatas.

Silahkan anda coba dengan mengganti kode warna pada bagian-bagian blog yang anda kelola.
Selamat mencoba, semoga bermanfaat...!!


Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
8 Comments

8 komentar :

YUSRON BLOG mengatakan...

aq pertamac

abutiar mengatakan...

Mantap tutorialnya
Sayang...ini tidak berlaku untuk wordpress
Thank's

Sharing is Fun mengatakan...

Sdh pernah sih otak atik ini, tp Ntar ta coba lg ach....

rio2000 mengatakan...

sip tutorialnya

je irwan mengatakan...

tk's atas info'y...

abidhanie mengatakan...

mantapppp mannn ini bloger memang saya butuhkannnn ship semuga sekses selalalu

NUANSA UMROH mengatakan...

sip gan tks sharex ..izin cp..

Filest Blog mengatakan...

Simple tapi ini yang saya cari..

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!