4 Caranya Membuat Background Blog dengan CSS dan HTML - Pada dasarnya setiap blogger niscaya ingin menciptakan tampilan blognya terlihat sedikit lebih menarik. Makara pengetahuan perihal trik memasang background pada blog memang diperlukan.
Kali ini saya bakal membuatkan sedikit perihal trik memasang background dengan menggunakan CSS dan HTML. Metode ini dapat jadi cukup Mudah untuk dilakukan.... Tapi pecahan background gradiasi nanti bakal agak kompleks, jadi harap pelan-pelan saja bagi pemula....
Perlu diperhatikan bahwa bila kita menggunakan CSS, maka isyarat masih Musti "dipanggil" dengan memasang nama selector pada isyarat HTML. Tapi penggunaan CSS ini sendiri mempunyai banyak keunggulan daripada menyuntikkan style dengan HTML. Kapan-kapan kita bahas dilema ini dalam Maknakel tersendiri.
Makara kita pribadi saja, 4
trik menciptakan background pada
blog yaitu sebagai berikut:
Caranya PERTAMA
Membuat Background pada Blog dengan warna polos
Dengan CSS
Anggap saja kita memilih nama
id pada CSS yaitu mybox. Kita ingin menciptakan sebuah komponen dengan ukuran 500px x 300px dengan warna background merah biru muda, dan padding 10px.... maka CSS dapat ditulis mirip berikut:
#mybox { width: 500px; height: 300px; background:#48a0e8; padding: 10px; color: #ffffff; } Contoh penerapan:
<div id="mybox">ini yaitu pola dari penggunaan warna polos pada background</div> Dengan HTML
Berbeda dengan CSS, bila menggunakan HTML maka definisi pengaturan pribadi ditaruh di dalam div dengan menggunakan fungsi style, lihat pola di bawah
<div style="width:500px; height:300px; background:#48a0e8; padding:10px; color:#ffffff">ini yaitu pola dari penggunaan warna polos pada background</div>
Caranya CSS atau HTML keduanya bakal terlihat mirip di bawah ini
ini yaitu pola dari penggunaan warna polos pada background
Caranya KEDUA
Membuat Background Blog Dengan Gradiasi Warna
Kita tidak perlu lagi mengulas pengaturan yg lainnya sebab contohnya sudah ada di atas. Kali ini kita bakal spesifik saja mengulas pengaturan background. Langkah pertama untuk menciptakan background yaitu memilih ada berapa warna dalam gradiasi yg bakal digunakan?
Anggap saja kita bakal menggunakan 4 warna, silahkan cari 4 isyarat hex dari warna yg bakal digunakan. Dalam pola kali ini saya bakal 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 yaitu 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 mirip 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 yaitu mirip 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;
}
Manfaat di atas tinggal dipanggil sekali lagi ke dalam HTML....dengan kode
<div id="mybox">ini yaitu pola dari penggunaan warna gradiasi pada background</div>
Dengan HTML
Kode HTML dari CSS di atas dapat terlihat mirip 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 yaitu pola dari penggunaan warna gradiasi pada background</div>
Tampilan alhasil bakal terlihat mirip ini:
ini yaitu pola dari penggunaan warna gradiasi pada background
Susah?
Caranya KETIGA
Memasang Background dengan Gambar
Pada dasarnya gambar itu Musti diupload dulu supaya nanti kita dapat mendapatkan URL dari gambar. Anda dapat mengupload gambar dengan menggunakan INSERT IMAGE Saat mengetik Maknakel, kemudian beralih dari COMPOSE ke HTML mode untuk melihat URL GAMBAR.
Jika anda sudah mempunyai URL Gambar, maka kini tinggal mengenal fungsi dasar background gambar. Lihat isyarat di bawah....
background: url(URL GAMBAR yg TADI DIUPLOAD);
Jika gambarnya kecil dan anda menginginkan perulangan supaya terlihat penuh, maka dapat menggunakan perintah repeat, contohnya:
background: url(URL GAMBAR yg 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 bakal menggunakan fungsi repeat, sehingga kodenya terlihat mirip di bawah....
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVm3Jaxxexog7b4pANRYsuaBOBIScJiQGpdy6ZYvOesUJIIPFgZaB3o7nEtM-xxMuij3l8AMYU2SWarPhEStVfyeOuBAILhePENu3pwVjagNNDnjawdXWNAF5XdHGB7zNs8ruiDisYk9UH/s320/BluePattern.bmp) repeat;
Sekarang tinggal memasukkan isyarat ini ke dalam CSS atau HTML
Dengan CSS
kodenya bakal terlihat mirip ini:
#mybox {
width: 460px;
height: 260px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVm3Jaxxexog7b4pANRYsuaBOBIScJiQGpdy6ZYvOesUJIIPFgZaB3o7nEtM-xxMuij3l8AMYU2SWarPhEStVfyeOuBAILhePENu3pwVjagNNDnjawdXWNAF5XdHGB7zNs8ruiDisYk9UH/s320/BluePattern.bmp) repeat;
padding: 10px;
color: #000000;
}
Anda tinggal memanggilnya ke dalam HTML mirip pola berikut:
<div id="mybox">ini yaitu pola dari penggunaan gambar pada background</div>
Dengan HTML
Kode HTML dari background gambar bakal terlihat mirip ini:
<div style="width: 460px; height: 260px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVm3Jaxxexog7b4pANRYsuaBOBIScJiQGpdy6ZYvOesUJIIPFgZaB3o7nEtM-xxMuij3l8AMYU2SWarPhEStVfyeOuBAILhePENu3pwVjagNNDnjawdXWNAF5XdHGB7zNs8ruiDisYk9UH/s320/BluePattern.bmp) repeat; padding: 10px; color: #000000;">Ini yaitu pola dari penggunaan gambar berulang sebagai background</div>
Nanti tampilannya bakal terlihat mirip di bawah ini....
Ini yaitu pola dari penggunaan gambar berulang sebagai background
Caranya KEEMPAT
Memasang Background Di Blog Dengan Latar Semi Transparan
Jika yg ini cukup mudah. Untuk menciptakan background ini cukup menggunakan isyarat rgba. Perhatikan pola berikut ini:
background: rgba(0,0,0,.5)
Contoh di atas yaitu isyarat untuk warna hitam transaparan 50%. Kode 0,0,0 yaitu isyarat untuk warna hitam. Sedangkan isyarat .5 yaitu isyarat untuk menyatakan tingkat transparan 50%. Silahkan masukkan isyarat di atas ke dalam CSS dan HTML
Dengan CSS Lihat pola isyarat berikut ini:
#mybox {
width: 440px;
height: 240px;
background: rgba(0,0,0,.5);
padding: 10px;
color: #ffffff;
}
Anda tinggal memanggilnya ke dalam HTML mirip pola berikut:
<div id="mybox">ini yaitu pola dari penggunaan semi transparan pada background</div>
Dengan HTML Apabila ditaruh pribadi ke dalam isyarat HTML, maka kodenya bakal terlihat mirip ini....
<div style="width: 440px; height: 240px; background: rgba(0,0,0,.5); padding: 10px; color: #ffffff;">ini yaitu pola dari penggunaan semi transparan pada background</div>
Nanti hasilnya bakal terlihat mirip berikut ini:
ini yaitu pola dari penggunaan semi transparan pada background
Apakah tidak terlalu terang bahwa ini sebuah latar semi transparan? Jika begitu kita dapat coba dengan menaruhnya di atas latar gambar....
Contoh kode:
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxEkxxnl6QrQhyphenhyphenSVMD2yheKXapb53_8ox9IbssGnO_TgCunrMCFTzMrqlQh7rKA_aHOoRyPHWm05R7Qev8Gd-qtrRNaXisgqoU4aZw9BkiSRErrjNA8Wv_8iawpeIrXK0SiSMAi6f4BSM/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 yaitu pola dari penggunaan semi transparan pada background
</div>
</div>
Hasilnya bakal terlihat mirip di bawah ini....
Makara inilah keempat trik untuk melaksanakan kustomisasi pada background, yaitu warna polos, warna gradiasi, gambar, dan warna semi transparan. Silahkan dipilih model background blog yg ingin anda buat.
If you enjoyed this post and wish to be informed whenever a new post is published,
