Postingan dengan Warna Latar Berbeda-beda

Rabu, 27 Juni 2012
Sekarang saya akan berbagi dengan kawan tentang mempercantik Blog khususnya pada halaman Postingan dengan background yang berbeda-beda baik pada setiap postingan yang kita publish maupun pada satu Artikel :o;
Memang sih sedikit merepotkan kita setiap mau posting Artikel, apalagi setiap alenia baru dengan warna latar [background] yang berbeda-beda atau warna background di tengah warna background utama, asal kita mau mencoba berkreasi sudah pasti ada jalan untuk mencapai tujuan  :s;
Kawan kan tahu, pada umumnya warna latar [background] Blog / Site menoton alias itu - itu saja dan menjenuhkan, untuk menghilangkan rasa jenuh para pengunjung yang ingin membaca makanya saya secara pribadi mencoba ber-Kreasi agar tampil beda. :y
Sebagai Demo :  Artikel yang kawan baca sekarang ini........... Bagaimana KEREN KAN, 

Kalau kita perhatikan icon pada post editor, saya rasa semuanya sudah tersedia seperti contoh icon Huruf A untuk warna teks dan disampingnya ada text background color dan lain sebagainya, cuma hasilnya tidak seperti yang kita harapkan :x;

Caranya sebagai berikut :
  • Setiap kawan mau posting pada editor post pilih HTML 
  • Sebelum kawan menulis pada post editor tambahkan  <div style="background: KODE WARNA;"> ISI ARTIKEL KAWAN -diakhiri dengan </div> ini adalah cara paling dasar yang bisa kawan terapkan dan selanjutnya bisa dikembangkan lagi seperti postingan saya yang penting  <div> ditutup </div> <br />
  • Tujuan dari <br /> dibelakang </div> supaya kawan bisa menulis lagi [buat alenia baru] 
  • Sabagai contoh yang saya terapkan pada Artikel ini

Untuk tampilan supaya kelihatan rapi tambahkan padding [untuk jarak pada sisi Artikel] seperti tampilan diatas, kode-kode yang saya tambahkan sebagai berikut :
<div style="background: [warna gardient]; [padding]; [border];[text-align]; ">
<div style="background: [warna hitam]; [padding]; [border];[color:white];[text-align];"></div>
<div style="background: [warna biru]; [padding]; [border];[text-align];"></div>
</div><br />

Tampilan diatas adalah background ditengah background, sedangkan yang ini dengan background terpisah [saya pisahkan dengan <br />, seperti yang saya sampaikan diatas, sedangkan yang dibawah ini tanpa penambahan kode apapun alias background asli postingan :i 

Penjelasan untuk background dan font-color khususnya untuk setiap warna bisa memakai :
  • Dengan Nama Warna seperti : black, white, yellow, blue dan seterusnya 
  • Dengan Kode warna seperti : #000000; [warna hitam] atau  rgb(255, 255, 255); [warna putih]
  • Khusus untuk background bisa memakai Gradient [penggabungan 2 warna atau lebih] 
  • Padding: 10px [artinya jarak antara sisi / tepi / border dengan huruf]
  • Border : garis sisi yang mengelilingi Obyek / Artikel, misalnya 1px, 2px dan seterusnya
  • text-align: untuk mengatur kalimat [align left / Align center / Align right / justify]
  • yang kalah penting kawan bisa menambahkan shadow
Selamat Mencoba dan Berkreasi - Sukses Selalu :y;  :z; 

0 komentar:

Posting Komentar