menambah: Mengganti Warna pada Main, Sidebar, Dan Body Template

  Mengganti atau menambah warna pada template blogger sebenarnya sangat mudah untuk dilakukan, anda hanya tinggal masuk ke menu tata letak -->  font dan warna, kemudian tinggal ubah sesuai keinginan anda. Tetapi yang akan kita bahas disini adalah bagaimana mengganti warna pada template Minima. Seperti diketahui jika anda ingin mengubah warna main wrapper, sidebar wrapper pada template minima, ada dua cara.
  Cara pertama adalah dengan menambah atau mengubah kode warna pada css style pada edit HTML.
 Kemudian cara yang kedua dengan mendefinisikannya dengan variable juga pada edit HTML.
Tips ini nantinya bisa anda terapkan pada template yang lainnya.
Langsung saja kita praktekkan :
LogIn di Draft Blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML
Lihat kode ini

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

#main-wrapper {
background : #eeefe6 ;
width: 470px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background : #eeefe6 ;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

  Kode yang diwarnai merah adalah kode tambahan supaya main, sidebar dan outer wrapper ada latar belakang atau backgroudnnya. Anda bisa merubah warnanya dengan merobah kode HEX nya misalnya #ffffff untuk warna putih, #000000 untuk warna hitam. Jika anda kesusahan untuk mendapatkan kode warna yang sesuai dengan keinginan anda , anda bisa gunakan program editing photo, seperti photosop.

Atau jika anda tidak ingin bingung dan ingin mencoba, anda  gunakan Color Code Generator disamping kanan postingan  ini . Coba cari deh. ada enggak.?

  Jika anda ingin lebih mudah dalam mengganti warna -warni template, dan tidak ingin pusing  dalam memasukan kode-kode warna hex, anda gunakan cara kedua ini yaitu dengan membuat variable warna dan mendefinisikannya. Dengan cara ini anda tinggal merubah warna keseluruhan template cukup dalam pengaturan font dan warna di menu tata letak.

Kode untuk variable adalah seperti contoh ini :

<Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">

   Sedikit keterangan, bgcolor nama variable yang dipakai untuk mendefinisikan warna yang digunakan pada body, pada template default minima. Nama ini bisa di ubah sesuai kehendak anda, asal nantinya penamaan yang dipakai harus sama dengan nama yang akan dibuatkan variablenya.

 Kemudian page background color adalah deskripsi atau nama yang akan dipakai / muncul pada menu font dan warna nantinya. Anda bisa merubah nama ini sesuka hati anda.

Biar tidak pusing dengan keterangan keterangan diatas , langsung saja praktek biar lebih jelas.
Login ke Draft Blogger
Dalam Dasbor masuk --> Tata Letak --> Edit HTML
Misalkan kita ingin menambah background warna pada outer wrapper dengan menggunakan variable.
 

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
background: $outerbgcolor ;
  width: 930px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
background: $mainbgcolor ;
  width: 470px;
  float: $startSide;
padding-left: 10px;

#sidebar-wrapper {
background : $sidebarbgcolor ;
  width: 220px;
  float: right;
  padding-left:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#widget-wrapper {
background : $ widgetbgcolor ;
  width: 190px;
  float: right;
  padding-left:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}



  Keterangan : Yang di warnai merah adalah kode yang harus anda tambahkan.Jadi kode variable nya seperti ini, untuk outer wrapper :


<Variable name="outerbgcolor" description="outer Background Color"
             type="color" default="#fff" value="#ffffff">

 Silahkan anda buat nama variablenya untuk main wrapper, sidebar wrapper, dan widget wrapper dengan melihat contoh diatas. Setelah selesai jangan lupa Simpan Template.

kemudian coba di pengaturan font dan warna untuk mencoba hasilnya.

**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS