Find What You Need

28 Des 2009

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

6 komentar:

a'MoeL Pada 26 Oktober 2010 19.39 mengatakan...

=)) good ilove u

Anonim mengatakan...

kalo boleh tau letaknya tata letak dimana ya,punyaku di dahsboard ko ga da,maklum saya baru pemula,blum ngerti,tanks infonya

Eko Yulianto Pada 14 Juni 2012 10.18 mengatakan...

tips yang bermanfaat mas tolong bikinin emoticon trus kirim ke eko_yulianto.9epph@yahoo.co.id :))

Anonim mengatakan...

I'm gone to inform my little brother, that he should also visit this website on regular basis to get updated from latest news
update.

Stop by my website - evansville roof repair

Anonim mengatakan...

You actually make it seem so easy with your presentation but I find this topic to be actually something which I think I would never understand.
It seems too complicated and very broad
for me. I am looking forward for your next post, I'll try to get the hang of
it!

Also visit my blog post - Boom beach hack

mas hery Pada 19 Desember 2015 00.49 mengatakan...

minta dibuatkan animasi dragon bal Vs cell mas..
he he he..
kalo sudah jadi bida dikirm ke
sanderlover11@yahoo.com
makasih sangat membantu info nya..

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template