Senin, 16 Januari 2012

Mengatur Logo dengan Background Transprant

Masih membahas tentang template Coolwater, saya tulis tentang cara mengatur background & letak logo. Standarnya di Header Blog akan tampil Judul dan Deskripsi  yang bersumber dari setingan. Kalau mau qonaah dengan settingan standar tak perlu utak-atik segala macam. Ukuran dan Letak dah lumayan pas. Namun, masalahnya ketika ingin menampilkan Judul Berupa gamba full sperti settingan pada gambar di bawah ini :


Nah, ketika memilih settingan seperti di atas gambar akan terletak di pojok kiri atas dan berbackground putih.  Gak simetris dan keren banget gituh. Saya coba lihat-lihat di kode HTMLnya saya coba rubah beberapa kode dan dicoba ditampilkan. Setelah beberapa kali mencoba akhirnya ketemu juga caranya.
Caranya sangat mudah kalau sudah tahu.
Pertama : Cari kode seperti di bawah ini. (Gunakan CTRL+F)


/* images */
img {
    background: #fff;
   border: 1px solid #E5E5E5;
    padding: 5px;

Rubah menjadi sperti di bawah ini :

/* images */
img {
    background: none;
   border: 0px solid #E5E5E5;
    padding: 45px;

Ada tigak tempat yang harus di robah.
1. Kode yang berwarna merah dirubah menjadi none, ini untuk menghilangkan background puting pada gambar.
2. Kode yang berwarna orange dirubah menjadi 0, ini untuk menghilangkan border gambar.
3. Kode yang berwarna biru dirubah menjadi 45, ini untuk mengatur letak gambar.

Catatan : 
Untuk bisa menampilkan gambar tanpa background, tentunya harus tanpa background juga dalam pembuatannya. Biasanya disimpan dalam file berformat .GIF atau .PNG.

Lorem ipsum is simply dummy text of the printing and typesetting industry.