Mengganti Background Dengan Gradient Image

Salah satu cara agar pengunjung betah berlama-lama di blog kita adalah dengan menggunakan template yang menarik. Selain kecepatan loading blog juga tentunya sangat berpengaruh pada pengunjung blog, template yang menarik tentu akan sedikit menambah bumbu dalam blog kita.


Untuk membuat template yang menarik, salah satunya dengan konsep pewarnaan judul postingan, background postingan atau judul sidebar dengan background template yang pas.

Untuk membuat background blog, kita bisa menggunakan fasilitas dari http://tools.dynamicdrive.com/gradient. Dengan tools tersebut, kita bisa membuat gambar gradasi, contoh gambar gradasi bisa sobat lihat dibawah ini :



Baiklah, daripada pusing kita langsung praktek aja ya !

• Langsung saja tuju web layanan gradient image maker, masuk ke gradient dari dynamicdrive.
• Pada halaman depan sobat, pilih model gradasi yang akan sobat gunakan
  
• Pilih saja model yang pertama, kemudian isi gradient width dengan 10, dan gradient height dengan 800 ( angka ini tidak mutlak harus 10 dan 800, sesuaikan dengan keinginan sobat saja ).
  
  Pilih warna untuk top color dan bottom color, ingat warna yang bottom color karena akan kita letakkan di template kita nantinya.
• Jika sudah, sekarang klik Get full size image, dan sobat simpan gambar yang sudah jadi di komputer.
• Upload gambar tersebut ke hosting yang akan sobat gunakan, bisa menggunakan photobucket, google sites atau jika ingin yang lebih mudahnya sobat bisa membuat blog baru dengan blogspot, khusus untuk menyimpan gambar, seperti yang selama ini saya lakukan.
• Coba klik Kanan pada gambar diatas, lalu pilih properties. Perhatikan Image Properties, pada location ada url yang kemudian akan kita gunakan pada background blog nantinya.
  

Langkah selanjutnya adalah proses mengganti background template-nya :

• Login ke blogger dengan ID sobat
• Klik tab Edit HTML
• Cari kode seperti berikut (biasanya terletak di bagian atas) :
• body { width:980px; background:#FFFFFF; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
• Kemudian ganti sehingga menjadi seperti berikut :
• body { width:980px; background:#000000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
• Kemudian Simpan Template.

Eleman apa yang harus di tambahkan ?

#000000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x;

Kode yang berwarna merah sobat ganti dengan url tempat sobat mengupload gambar gradasi-nya.

Mengapa saya mengganti warna putih (#FFFFFF) dengan warna hitam (#000000)? karena pada saat membuat gambar gradasi, saya menggunakan bottom color dengan warna hitam (#000000).

Baiklah, itu saja kira-kira tutorial blog kali ini, semoga berhasil mengganti background template dengan gambar gradasi-nya.  

Mengganti Background Blog Dengan Gambar

Sebuah blog yang cantik dan enak dilihat tentu akan sangat membantu dalam meningkatkan traffic blog kita, karena saya sendiri lebih tertarik mengunjungi sebuah blog yang warnanya cerah dan enak dilihat, daripada blog yang warnanya gelap dan bentuknya tidak karuan alias acak kadut. Walaupun postingannya menarik tetapi membuat sakit mata, lebih baik saya pelototi blog saya selama berjam - jam.

Saya akan berbagi tips sedikit yang saya tahu tentang merubah warna background blog atau mengganti background dengan gambar yang sudah sobat upload ke tempat penyimpanan online, misalnya di Google Sites atau Photobucket.

Berikut langkah - langkahnya :

• Login ke Blogger.
  
• Klik Tata Letak --> Edit HTML.
  
• Kemudian cari kode yang mirip seperti ini :

  body { background: #FFFFFF;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: center }
  

  
  Atau jika bingung silahkan klik Ctrl + F kemudian ketikkan body {, biasanya letaknya diatas.
  

• Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :

  body { background: #D8D8D8;
  margin:0; color:#000000;
  font:12px trebuchet ms;
  text-align: justify }
  

• Untuk mengganti background dengan image atau gambar, misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :
  
  http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800
  
• Sehingga hasilnya menjadi seperti berikut ini :
  

  body { background:#FFFFFF url(http://lh4.ggpht.com/_7Y9pl24WpQY/StGOm72nY7I/AAAAAAAAB4c/mWg4brKUK4Q/body_thumb%5B4%5D.jpg?imgmax=800) repeat-x;
  margin:0; color:#000000; font:12px trebuchet ms;
  text-align: justify}
  

• Jika sudah selesai kemudian Simpan Template sobat.

Untuk gambar yang continuous sobat tambahkan repeat-x setelah kode url gambar. Lebih jelasnya sobat bisa baca postingan saya tentang cara mengganti backgroud blog dengan gradient image disini.

 

Selamat mencoba !

Membuat Background Pada Postingan

Untuk mempercantik postingan kita, kadang - kadang kita memerlukan tambahan background di belakang tulisan kita. Pada pembahasan terdahulu tentang cara membuat tabel sebenarnya agak mirip dengan postingan ini, tapi bedanya kalau tabel hanya menampilkan warna saja sedangkan pembahasan kali ini background akan berupa warna dan gambar.

I. Mengganti warna background.

• Cukup menambahkan kode berikut ke dalam postingan sobat :
  
  
  
  <div style="background:kode_warna_disini;">
  
  Tulisan sobat letaknya disini
  
  </div>
  
  
  Untuk kode warna bisa sobat lihat disini
  

II. Mengganti Background dengan gambar

• Kodenya seperti berikut ini :
  
  
  
  <div style="background:url(alamat url tempat sobat mengupload gambar) no-repeat right top; text-align:justify; font-size:100%; padding:10px">
  
  Tulisan yang akan sobat tulis didalam postingan sobat letaknya disini
  
  </div>
  
  
  

Ganti tulisan yang saya tandai warna merah dengan alamat url tempat sobat mengupload gambar, bisa di Photobucket atau Yahoo Geocities. Untuk contoh punya saya yang telah saya upload ke Photobucket, kodenya seperti ini : http://i643.photobucket.com/albums/uu155/miskahiper/Kolom-1.png

kemudian akan menjadi seperti ini :

<div style="background:url(http://i643.photobucket.com/albums/uu155/miskahiper/Kolom-1.png) no-repeat right top; text-align:justify; font-size:100%; padding:10px">

Tulisan yang akan sobat tulis didalam postingan sobat letaknya disini

</div>

Sangat mudah ya..selamat mencoba !