4 Cara Membuat Background Blog dengan CSS dan HTML
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....
Sekarang masukkan kode ini ke dalam fungsi gradiasi CSS untuk browser....top, #DBEBFF 20%, #6695BD 50%, #8FC2E3 75%, #5494CC 90%
Hasilnya adalah seperti berikut: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) );
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
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....
Jika gambarnya kecil dan anda menginginkan perulangan agar terlihat penuh, maka bisa menggunakan perintah repeat, contohnya:background: url(URL GAMBAR YANG TADI DIUPLOAD);
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....
Sekarang tinggal memasukkan kode ini ke dalam CSS atau HTMLbackground: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI3-No-iChpg27omwCT5o85HNd-UYXl6_JVLsAy0CnOwMV29i7rrQu26nAX8gpNBVJFtRoYKCl3vlCp3ohfmWTJqJs1MpWPMWzLi8s-AQIqRVpM7T_GmM7eUKX8_egC9OpleWhGakBAQn4/s320/BluePattern.bmp) repeat;
Dengan CSS
kodenya akan terlihat seperti ini:Anda tinggal memanggilnya ke dalam HTML seperti contoh berikut:#mybox {
width: 460px;
height: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI3-No-iChpg27omwCT5o85HNd-UYXl6_JVLsAy0CnOwMV29i7rrQu26nAX8gpNBVJFtRoYKCl3vlCp3ohfmWTJqJs1MpWPMWzLi8s-AQIqRVpM7T_GmM7eUKX8_egC9OpleWhGakBAQn4/s320/BluePattern.bmp) repeat;
padding: 10px;
color: #000000;
}
<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/AVvXsEiI3-No-iChpg27omwCT5o85HNd-UYXl6_JVLsAy0CnOwMV29i7rrQu26nAX8gpNBVJFtRoYKCl3vlCp3ohfmWTJqJs1MpWPMWzLi8s-AQIqRVpM7T_GmM7eUKX8_egC9OpleWhGakBAQn4/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:
Anda tinggal memanggilnya ke dalam HTML seperti contoh berikut:#mybox {
width: 440px;
height: 240px;
background: rgba(0,0,0,.5);
padding: 10px;
color: #ffffff;
}
Dengan HTML<div id="mybox">ini adalah contoh dari penggunaan semi transparan pada background</div>
Apabila ditaruh langsung ke dalam kode HTML, maka kodenya akan terlihat seperti ini....
Nanti hasilnya akan terlihat seperti berikut 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>
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....
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_pNH0hnprIvzdtiQdtpLq2bYyNRQNErTICUIXxk5Ccv44lBAhnPyNyTKFVrGYxa3V_gZX7T0LGyZ08sRlv96KikO8CGjcdp48So1ESFVGTe0P5bXNgtLF5IW4QynYLpzBe9H56GM7gbQ/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.
:: 8-HTML FRAME ::
