Membuat backround image statis di posting Blog Detik

Melakukan modifikasi template untuk memberi penampilan blog berbeda dapat dilakukan dengan berbagai cara, baik ditinjau dari kode HTML yang digunakan maupun komponen penunjang yang dimanfaatkan. Komponen penunjang kode HTML terfavorit adalah sebuah image atau gambar, baik berukuran besar atupun kecil. Gambar menjadi pilihan utama karena bisa membuat sebuah blog sangat terlihat inovatif dan atraktif sehingga pengunjung blog banyak terkesima.

Penggunaan gambar sendiri bisa diwujudkan dalam berbagai bentuk penampilan dengan memanfaatkan berbagai desain atau fungsi yang tercipta melalui rangkaian kode HTML yang di dalamnya bisa melibatkan kode CSS, javascript atau xHTML. Satu yang paling sederhana memanfaatkan image untuk mempercantik blog adalah dengan menggunakannya sebagai sebuah background. Sekalipun sebenarnya banyak bagian blog bisa ditambahkan background-image, untuk kali ini kita akan lebih fokus untuk mencoba membuat background-image pada halaman posting. Lebih khusus lagi adalah kolom posting diluar judul posting. Harapan digunakannya background-image tentu saja tak lain dan tak bukan untuk membuat blog terlihat berbeda dari yang lain sehingga setiap blog masing-masing bisa menampilkan ciri khas yang lebih bervariasi dan dapat dipergunakan sebagai sarana mengexpresikan jati diri si empunya blog.

Sebenarnya jika kita mencoba mengupas lebih dalam pemanfaatan background image ada berbagai bentuk kode yang masing-masing juga berbeda tergantung gambar yang nantinya akan digunakan.

1. Background dari sebuah gambar dengan bentuk melebar (horizontal) yang hanya berketinggian beberapa px (misalnya height=5px dan width=600px).
   Contoh kode:
   background:#fff url(background-image.gif) bottom right repeat-y;
2. Background dari sebuah gambar dengan bentuk meninggi (vertical). Background seperti ini mempunyai lebar (width) hanya beberapa px sedangkan ketinggian gambar lebih diprioritaskan hingga diperoleh bentuk background yang diinginkan. Saat background seperti ini digunakan maka bantuan/tambahan berupa background color sangat sering ditambahkan agar ketinggian background image-nya lebih bisa dibatasi. Hal yang sama juga bisa diterapkan saat background horizontal yang kita pakai.
   Contoh kode yang digunakan:
   background:#000 url(background-image.png) top left repeat-x;
   background:#000 url(background-image.jpg) bottom left repeat-x;
   background:#000 url(background-image.gif) center repeat-x;, serta beberapa bentuk yang lain.
3. Background image dengan ukuran kecil.
   Background image dalam ukuran kecil bisa dibuat sebagai background berulang hingga seluruh bagian tercover secara penuh atau bisa juga diletakkan hanya pada bagian tertentu baik ditengah ataupun samping dan pojok. Beberapa macam kode digunakan disini bergantung peletakan/posisi dan berulang atau tidaknya background image tersebut.
   - Background dibuat berulang hingga seluruh bagian dapat tercover bacground image dimaksud.
   Contoh kode:
   background:url(background-image.jpg);
   - Background-image diletakkan hanya pada bagian tertentu (tak berulang)  dengan menambahkan background color untuk membentuk background secara utuh.
   Contoh kode:
   background:#666 url(background-image.gif) bottom right no-repeat;
4. Background-image berukuran besar.
   Background image dengan bentuk seperti ini tidak perlu di lakukan pengulangan karena tampilan yang dihasilkan menjadi tidak menarik dan terlihat kacau. Penggunaan kode tertentu digunakan untuk menciptakan sebuah bentuk background statis hingga background akan selalu terlihat sekalipun halaman digulung dari ujung atas hingga ujung bawah dengan ketinggian tak terbatas. Pembuatan ukuran gambar untuk background statis sebaiknya disesuaikan dengan ukuran lebar halaman posting. Untuk ketinggiannya kita bisa menggunakan height berkisar antara 550px hingga 800px. Untuk mengetahui berapa sebenarnya tinggi yang dibutuhkan sampeyan bisa melihat tinggi halaman posting yang terlihat saat blog dibuka. Jika mau dibuat gampang sebenarnya kita gunakan saja height=700px. Ketinggian background senilai tersebut sudah cukup representatif untuk digunakan diblog dengan desain template yang selama ini umumnya dipergunakan.
   Contoh kode background statis:
   background:url(background-image.jpg) center no-repeat;background-attachment:fixed;}

Kode CSS Background Statis Posting Blog

Untuk lebih jelasnya bagaimana sebuah background statis bisa tercipta dan apa saja kode terkait yang harus dirubah saat background ditambahkan, kita akan perlihatkan kode CSS serta kegunaan setiap kode yang ditambahkan.

1. Background-image dengan warna terang dominan.
   Saat background image dengan warna terang dominan, maka kita bisa menggunakan teks/font sekaligus teks link dengan warna gelap sehingga teks dan teks link dapat terbaca dengan jelas.

   Kode yang dipergunakan

   .entry{
         background:url(background-image.jpg) center no-repeat;
         background-attachment:fixed;
         padding:15px 5px;
         color:black;
   }
   .entry a, entry a:link{
         color:blue;
   }
   .entry a:hover{
         color:red;
   }

2. Background-image dengan warna gelap dominan.
   Saat background image dengan warna gelap dominan, maka kita bisa menggunakan teks/font sekaligus teks link dengan warna terang.

   Kode yang dipergunakan

   .entry{
         background:url(background-image.jpg) center no-repeat;
         background-attachment:fixed;
         padding:12px 6px;
         color:white;
   }
   .entry a, entry a:link{
         color:lightblue;
   }
   .entry a:hover{
         color:yellow;
   }

Keterangan/Catatan:

1. Gunakan lebar background seukuran dengan lebar kolom halaman posting agar beban loading blog tidak terlalu berat. Penggunaan gambar dengan ukuran terlalu besar disamping akan membuat beban blog terlalu berat juga fokus yang dikehendaki terhadap background tak tercapai.
2. Gunakan file gambar berekstensi .jpg agar loading blog dan beban lebih ringan. Jika pembuatan menggunakan software seperti Adobe Photoshop maka kualitas gambar bisa di atur seminimal mungkin yang penting tetap terlihat baik sebagai sebuah background.
3. Color pada teks dan link bisa menggunakan kode warna berbentuk angka dan/atau huruf.
4. Jika diperlukan rubahlah warna teks dan teks link esuai warna dominan background yang dipergunakan.
5. Simpan kode CSS dalam template melalui Widgetize Any HTML yang bisa diakses melalui halaman dasbor setelah login dilakukan. Untuk mengikuti panduan cara penyimpanan kode HTML (kode CSS, javascript atau xHTML) di template blogdetik, silahkan buka link berikut.
   Panduan Cara Memasang atau Menyimpan Kode HTML di blogDETIK
   Dalam panduan tersebut pada langkah ke-6 yang disimpan dalam box Widgetize Any HTML adalah javascript. Ganti javascript tersebut dengan kode CSS di atas sesuai pilihan background-image yang dipergunakan (terang dominan atau gelap dominan).
6. Di bawah ini adalah contoh kode CSS untuk sebuah background statis dengan warna gelap dominan. Silahkan jika akan dipergunakan di template sampeyan.
   

   Kode CSS-1

   <style type="text/css">
   .entry{
         background:#000 url(background-image-1.jpg) center no-repeat;
         background-attachment:fixed;
         color:#FFFFFF;
         padding:10px 8px;
   }
   .entry a, .entry a:link{
         color:#FFCC66;
         font-weight:bold;
   }
   .entry a:hover{
         color:#66CCFF;
   }
   </style>

   Ganti background-image-1.jpg dengan:
   ==>http://gundulcilik.blogdetik.com/files/2011/01/kembangapi.jpg
   

   Kode CSS-2

   <style type="text/css">
   .entry{
         background:#000 url(background-image-2.jpg) center  no-repeat;
         background-attachment:fixed;
         color:#fff;
         padding:10px 8px;
   }
   .entry a, .entry a:link{
         color:#FFCC66;
         font-weight:bold;
   }
   .entry a:hover{
         color:#66CCFF;
   }
   </style>

   Ganti background-image-2.jpg dengan:
   ==>http://gubhugreyot.blogdetik.com/files/2011/01/bgposting.jpg