4 Cara Membuat Background Blog dengan CSS dan HTML

4 Cara Membuat Background Blog dengan CSS dan HTML

4 Cara Membuat Background Blog dengan CSS dan HTML - Pada dasarnya setiap blogger pasti ingin membuat tampilan blognya terlihat sedikit lebih menarik. Jadi pengetahuan tentang cara memasang background pada blog memang diperlukan.

Kali ini saya akan berbagi sedikit tentang cara memasang background dengan menggunakan CSS dan HTML. Metode ini bisa jadi cukup mudah untuk dilakukan.... Tapi bagian background gradiasi nanti akan agak kompleks, jadi harap pelan-pelan saja bagi pemula....

Perlu diperhatikan bahwa  jika kita menggunakan CSS, maka kode masih harus "dipanggil" dengan memasang nama selector pada kode HTML. Tapi penggunaan CSS ini sendiri mempunyai banyak keunggulan daripada menyuntikkan style dengan HTML. Kapan-kapan kita bahas masalah ini dalam artikel tersendiri.

Jadi kita langsung saja, 4 cara membuat background pada blog adalah sebagai berikut:

CARA PERTAMA

Membuat Background pada Blog dengan warna polos

Dengan CSS

Anggap saja kita menentukan nama id pada CSS adalah mybox. Kita ingin membuat sebuah komponen dengan ukuran 500px x 300px dengan warna background merah biru muda, dan padding 10px.... maka CSS bisa ditulis seperti berikut:

#mybox {
width: 500px;  
height: 300px;
background:#48a0e8;
padding: 10px;
color: #ffffff;
}

Contoh penerapan:
<div id="mybox">ini adalah contoh dari penggunaan warna polos pada background</div>

Dengan HTML

Berbeda dengan CSS, jika menggunakan HTML maka definisi pengaturan langsung ditaruh di dalam div dengan menggunakan fungsi style, lihat contoh di bawah

<div style="width:500px; height:300px; background:#48a0e8; padding:10px; color:#ffffff">ini adalah contoh dari penggunaan warna polos pada background</div>

Cara CSS atau HTML keduanya akan terlihat seperti di bawah ini

ini adalah contoh dari penggunaan warna polos pada background

CARA KEDUA

Membuat Background Blog Dengan Gradiasi Warna

Kita tidak perlu lagi membahas pengaturan yang lainnya karena contohnya sudah ada di atas. Kali ini kita akan spesifik saja membahas pengaturan background. Langkah pertama untuk membuat background adalah menentukan ada berapa warna dalam gradiasi yang akan digunakan?

Anggap saja kita akan menggunakan 4 warna, silahkan cari 4 kode hex dari warna yang akan digunakan. Dalam contoh kali ini saya akan menggunakan gradiasi biru...

Langkah 1: Menentukan warna gradiasi

• Warna 1: #dbebff
• Warna 2: #6695bd
• Warna 3: #8fc2e3
• Warna 4: #5494cc

Langkah 2: Menentukan Arah Gradiasi
Anggap saja warna 1 adalah warna pertama, anda ingin warna pertama ini dimulai dari mana?

• Jika dari atas maka gunakan perintah TOP
• Jika dari kiri atas maka gunakan perintah LEFT TOP
• Jika dari kiri maka gunakan perintah LEFT
• Jika dari kiri bawah gunakan perintah LEFT BOTTOM
• Jika dari bawah gunakan perintah BOTTOM
• Jika dari kanan bawah gunakan perintah RIGHT BOTTOM
• Jika dari kanan gunakan perintah RIGHT, dan
• Jika dari kanan atas gunakan perintah RIGHT TOP

Langkah 3: Menentukan titik stop setiap warna
Anggap saja seperti ini....

• warna 1 sampai 25% dari ruang
• warna 2 dari 50% ruang
• warna 3 dari 75% ruang, dan
• warna 4 dari 90% ruang....

Jika sudah menentukan 3 faktor di atas maka kita bisa membuat kode dasarnya. Anggap saja kita mau membuat gradiasi horisontal dari atas, maka kodenya adalah....

top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%

Sekarang masukkan kode ini ke dalam fungsi gradiasi CSS untuk browser....

background-image: linear-gradient(kode);
background-image: -o-linear-gradient(kode);
background-image: -moz-linear-gradient(kode);
background-image: -webkit-linear-gradient(kode);
background-image: -ms-linear-gradient(kode);

background-image: -webkit-gradient(
 linear,
 left top,
 left bottom,
 color-stop(persentase dalam desimal, warna 1),
 color-stop(persentase dalam desimal, warna 2),
 color-stop(persentase dalam desimal, warna 3),
 color-stop(persentase dalam desimal, warna 4)
); 

Hasilnya adalah seperti berikut:

background-image: linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%);
background-image: -o-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%);
background-image: -moz-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%);
background-image: -webkit-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%);
background-image: -ms-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%);

background-image: -webkit-gradient(
 linear,
 left top,
 left bottom,
 color-stop(0.2, #DBEBFF),
 color-stop(0.5, #6695BD),
 color-stop(0.75, #8FC2E3),
 color-stop(0.9, #5494CC)
); 

Dengan CSS

SEKARANG ANDA TINGGAL MENARUH KODE DI ATAS KE DALAM BENTUK CSS SEPERTI CONTOH SEBELUMNYA ....

#mybox {
width: 480px;
height: 280px;
background-image: linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -o-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -moz-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -webkit-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -ms-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF), color-stop(0.5, #6695BD), color-stop(0.75, #8FC2E3), color-stop(0.9, #5494CC) );
background-image: -webkit-gradient( 
linear, 
left top, 
left bottom, 
color-stop(0.2, #DBEBFF), 
color-stop(0.5, #6695BD), 
color-stop(0.75, #8FC2E3), 
color-stop(0.9, #5494CC) );
padding: 10px;
color: #000000;
}

Fungsi di atas tinggal dipanggil sekali lagi ke dalam HTML....dengan kode

<div id="mybox">ini adalah contoh dari penggunaan warna gradiasi pada background</div> 

Dengan HTML

Kode HTML dari CSS di atas bisa terlihat seperti ini...

<div style="width:480px; height: 280px; background-image: linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); background-image: -o-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); background-image: -moz-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); background-image: -webkit-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); background-image: -ms-linear-gradient(top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%); background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF), color-stop(0.5, #6695BD), color-stop(0.75, #8FC2E3), color-stop(0.9, #5494CC) );background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.2, #DBEBFF), color-stop(0.5, #6695BD), color-stop(0.75, #8FC2E3), color-stop(0.9, #5494CC) ); padding: 10px; color: #000000;">ini adalah contoh dari penggunaan warna gradiasi pada background</div>

Tampilan akhirnya akan terlihat seperti ini:

ini adalah contoh dari penggunaan warna gradiasi pada background

Susah?

CARA KETIGA

Memasang Background dengan Gambar

Pada dasarnya gambar itu harus diupload dulu supaya nanti kita bisa mendapatkan URL dari gambar. Anda bisa mengupload gambar dengan menggunakan INSERT IMAGE saat mengetik artikel, lalu beralih dari COMPOSE ke HTML mode untuk melihat URL GAMBAR.

Jika anda sudah mempunyai URL Gambar, maka sekarang tinggal mengenal fungsi dasar background gambar. Lihat kode di bawah....

background: url(URL GAMBAR YANG TADI DIUPLOAD);

Jika gambarnya kecil dan anda menginginkan perulangan agar terlihat penuh, maka bisa menggunakan perintah repeat, contohnya:

background: url(URL GAMBAR YANG TADI DIUPLOAD) repeat;

Sekarang anggap saja saya mau memakai URL gambar http://yourdreambuilt.com/images/thm/lifestyles/blue-diamond-pattern.jpg. Berhubung gambarnya kecil, maka saya akan memakai fungsi repeat, sehingga kodenya terlihat seperti di bawah....

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jYkR5mlnmXA6jZJwBFnHxSL8Y79D5l3bSQBxnB1FYzWSClCsPsICA-TMMAdMNb7nVIWykzDL2L_ygneKbgaoOVgIBa-IHEmNNCePyefObZftSATrnX4iznodpR229GItNRY1EgnUqRRs/s320/BluePattern.bmp) repeat;

Sekarang tinggal memasukkan kode ini ke dalam CSS atau HTML

Dengan CSS

kodenya akan terlihat seperti ini:

#mybox {
width: 460px;
height: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jYkR5mlnmXA6jZJwBFnHxSL8Y79D5l3bSQBxnB1FYzWSClCsPsICA-TMMAdMNb7nVIWykzDL2L_ygneKbgaoOVgIBa-IHEmNNCePyefObZftSATrnX4iznodpR229GItNRY1EgnUqRRs/s320/BluePattern.bmp) repeat;
padding: 10px;
color: #000000;
}

Anda tinggal memanggilnya ke dalam HTML seperti contoh berikut: 

<div id="mybox">ini adalah contoh dari penggunaan gambar pada background</div>

Dengan HTML

Kode HTML dari background gambar akan terlihat seperti ini:

<div style="width: 460px; height: 260px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9jYkR5mlnmXA6jZJwBFnHxSL8Y79D5l3bSQBxnB1FYzWSClCsPsICA-TMMAdMNb7nVIWykzDL2L_ygneKbgaoOVgIBa-IHEmNNCePyefObZftSATrnX4iznodpR229GItNRY1EgnUqRRs/s320/BluePattern.bmp) repeat; padding: 10px; color: #000000;">Ini adalah contoh dari penggunaan gambar berulang sebagai background</div>

Nanti tampilannya akan terlihat seperti di bawah ini....

Ini adalah contoh dari penggunaan gambar berulang sebagai background

CARA KEEMPAT

Memasang Background Di Blog Dengan Latar Semi Transparan

Kalau yang ini cukup mudah. Untuk membuat background ini cukup memakai kode rgba. Perhatikan contoh berikut ini:
background: rgba(0,0,0,.5)
Contoh di atas adalah kode untuk warna hitam transaparan 50%. Kode 0,0,0 adalah kode untuk warna hitam. Sedangkan kode .5 adalah kode untuk menyatakan tingkat transparan 50%. Silahkan masukkan kode di atas ke dalam CSS dan HTML

Dengan CSS
Lihat contoh kode berikut ini:

#mybox {
width: 440px;
height: 240px;
background: rgba(0,0,0,.5);
padding: 10px;
color: #ffffff;
}

Anda tinggal memanggilnya ke dalam HTML seperti contoh berikut: 

<div id="mybox">ini adalah contoh dari penggunaan semi transparan pada background</div>

Dengan HTML
Apabila ditaruh langsung ke dalam kode HTML, maka kodenya akan terlihat seperti ini....

<div style="width: 440px; height: 240px; background: rgba(0,0,0,.5); padding: 10px; color: #ffffff;">ini adalah contoh dari penggunaan semi transparan pada background</div>

Nanti hasilnya akan terlihat seperti berikut ini:

ini adalah contoh dari penggunaan semi transparan pada background

Apakah tidak terlalu jelas bahwa ini sebuah latar semi transparan? Kalau begitu kita bisa coba dengan menaruhnya di atas latar gambar.... 

Contoh kode:

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioHfZsRTLDLaa3X40dm5weyQBJLtCEzxZfxG8nyr1RHzrTl-4vjZsKeRD2TULYyfzO7EaSFnWVDmrHsNRyrTs428VDWh98MUwqaKiEvbozP3RgZQyHWnefbTk2x2p8OjCtKFiGYK2lZcY/s1600/contoh+background+gambar.jpg); height: 381px; padding: 30px; width: 340px;">
<div style="background: rgba(0,0,0,.5); color: white; height: 361px; padding: 10px; text-align: center; width: 320px;">
ini adalah contoh dari penggunaan semi transparan pada background
</div>
</div>

Hasilnya akan terlihat seperti di bawah ini....

ini adalah contoh dari penggunaan semi transparan pada background

Jadi inilah keempat cara untuk melakukan kustomisasi pada background, yaitu warna polos, warna gradiasi, gambar, dan warna semi transparan. Silahkan dipilih model background blog yang ingin anda buat.