4 Cara Menciptakan Background Blog Dengan Css Dan Html

4 Cara Membuat Background Blog dengan CSS dan HTML - Pada dasarnya setiap blogger niscaya ingin menciptakan tampilan blognya terlihat sedikit lebih menarik. Makara pengetahuan wacana cara memasang background pada blog memang diperlukan.

Kali ini saya akan menyebarkan sedikit wacana cara memasang background dengan menggunakan CSS dan HTML. Metode ini dapat jadi cukup gampang untuk dilakukan.... Tapi serpihan background gradiasi nanti akan agak kompleks, jadi harap pelan-pelan saja bagi pemula....

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

Makara kita pribadi saja, 4 cara menciptakan background pada blog ialah sebagai berikut:

CARA PERTAMA

Membuat Background pada Blog dengan warna polos

Dengan CSS

Anggap saja kita memilih nama id pada CSS ialah mybox. Kita ingin menciptakan sebuah komponen dengan ukuran 500px x 300px dengan warna background merah biru muda, dan padding 10px.... maka CSS dapat ditulis menyerupai berikut:

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

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

Dengan HTML

Berbeda dengan CSS, jikalau menggunakan HTML maka definisi pengaturan pribadi ditaruh di dalam div dengan menggunakan fungsi style, lihat teladan di bawah

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

Cara CSS atau HTML keduanya akan terlihat menyerupai di bawah ini

ini ialah teladan dari penggunaan warna polos pada background

CARA KEDUA

Membuat Background Blog Dengan Gradiasi Warna

Kita tidak perlu lagi membahas pengaturan yang lainnya sebab misalnya sudah ada di atas. Kali ini kita akan spesifik saja membahas pengaturan background. Langkah pertama untuk menciptakan background ialah memilih ada berapa warna dalam gradiasi yang akan digunakan?

Anggap saja kita akan menggunakan 4 warna, silahkan cari 4 isyarat hex dari warna yang akan digunakan. Dalam teladan 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 ialah 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 menyerupai ini....

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

Jika sudah memilih 3 faktor di atas maka kita dapat menciptakan isyarat dasarnya. Anggap saja kita mau menciptakan gradiasi horisontal dari atas, maka kodenya adalah....

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

Sekarang masukkan isyarat 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 ialah menyerupai 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 ialah teladan dari penggunaan warna gradiasi pada background</div> 

Dengan HTML

Kode HTML dari CSS di atas dapat terlihat menyerupai 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 ialah teladan dari penggunaan warna gradiasi pada background</div>

Tampilan hasilnya akan terlihat menyerupai ini:

ini ialah teladan dari penggunaan warna gradiasi pada background

Susah?

CARA KETIGA

Memasang Background dengan Gambar

Pada dasarnya gambar itu harus diupload dulu supaya nanti kita dapat mendapat URL dari gambar. Anda dapat mengupload gambar dengan menggunakan INSERT IMAGE dikala mengetik artikel, kemudian beralih dari COMPOSE ke HTML mode untuk melihat URL GAMBAR.

Jika anda sudah memiliki URL Gambar, maka kini tinggal mengenal fungsi dasar background gambar. Lihat isyarat di bawah....

background: url(URL GAMBAR YANG TADI DIUPLOAD);

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

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

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

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JZoeKT7dQl6EH6urHib9TbVOuErq6tmrpfPwCwXny0irOWnnLWuhH_UJV49ug56VqsHlMbheG57vCpurOOutw8oQdLOuoHTaPuEEk8hNZjOHmN8yJ8eKR3v7fusibeTL1tS9z2bSxiSz/s320/BluePattern.bmp) repeat;

Sekarang tinggal memasukkan isyarat ini ke dalam CSS atau HTML

Dengan CSS

kodenya akan terlihat menyerupai ini:

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

Anda tinggal memanggilnya ke dalam HTML menyerupai teladan berikut: 

<div id="mybox">ini ialah teladan dari penggunaan gambar pada background</div>

Dengan HTML

Kode HTML dari background gambar akan terlihat menyerupai ini:

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

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

Ini ialah teladan dari penggunaan gambar berulang sebagai background

CARA KEEMPAT

Memasang Background Di Blog Dengan Latar Semi Transparan

Kalau yang ini cukup mudah. Untuk menciptakan background ini cukup menggunakan isyarat rgba. Perhatikan teladan berikut ini:
background: rgba(0,0,0,.5)
Contoh di atas ialah isyarat untuk warna hitam transaparan 50%. Kode 0,0,0 ialah isyarat untuk warna hitam. Sedangkan isyarat .5 ialah isyarat untuk menyatakan tingkat transparan 50%. Silahkan masukkan isyarat di atas ke dalam CSS dan HTML

Dengan CSS
Lihat teladan isyarat berikut ini:

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

Anda tinggal memanggilnya ke dalam HTML menyerupai teladan berikut: 

<div id="mybox">ini ialah teladan dari penggunaan semi transparan pada background</div>

Dengan HTML
Apabila ditaruh pribadi ke dalam isyarat HTML, maka kodenya akan terlihat menyerupai ini....

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

Nanti hasilnya akan terlihat menyerupai berikut ini:

ini ialah teladan dari penggunaan semi transparan pada background

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

Contoh kode:

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAgeEmIQR27wHTkvi5g1C2FWIOYoxLw9_SJuxP90d1LjlONn2XjZdAhvcNEOnVrKBz_cYsG28tvyPKeIojh2pPyHYBiUr3sAlRJo_kkoJURM7LgC6Ri3hHikkktHGCfY98jX_Aap4JBG8/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 ialah teladan dari penggunaan semi transparan pada background
</div>
</div>

Hasilnya akan terlihat menyerupai di bawah ini....

ini ialah teladan dari penggunaan semi transparan pada background

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

Share this post