Cara Mudah Mengganti Background Blog WordPress & Blogspot
Pembelajaran membuat blog kali ini saya akan membagikan tips bagaimana cara mengganti background di blog dengan cara mengedit bagian CSS. Disini saya akan membagi menjadi tiga, yaitu mengganti dengan warna HTML, image (gambar) dan image yang di encode ke base64.
Sebelum kita lanjut ke tutorial mengubah background blog, lebih baik anda pergi dulu ke bagian edit template atau css.
Untuk yang ngeblog di blogger anda pergi ke Dasboard ↠> Template ↠> Edit HTML.
Jika anda ngeblog di WordPress silakan menuju wp-admin ↠> Tampilan ↠> Penyunting ↠> Edit Style.css atau file .css
Cara menggantinya anda tinggal mencari kode body {, lalu masukan perintah background: #ff0000; (background: #kode warna;) atau bisa juga dengan background-color: #ff0000;. Nanti hasilnya akan menjadi seperti ini: body {background: #ff0000;}
O ya, tips dari saya gunakan gambar dengan ukuran yang kecil saja, seperti belajar membuat blog ini yang menggunakan gambar kecil yaitu dengan ukuran 121 x 60.
Cara mengganti background blog dengan gambar hampir sama dengan yang pertama yaitu mengganti bagian body {, lalu kita hanya perlu memasukan code css background: url('url dari gambar anda'); atau dengan yang ini background-image: url('url dari gambar anda');
hasilnya menjadi body {background-image: url('url dari gambar anda');}
Cara mengganti background dengan image base64
Sebelum kita lanjut ke tutorial mengubah background blog, lebih baik anda pergi dulu ke bagian edit template atau css.
Untuk yang ngeblog di blogger anda pergi ke Dasboard ↠> Template ↠> Edit HTML.
Jika anda ngeblog di WordPress silakan menuju wp-admin ↠> Tampilan ↠> Penyunting ↠> Edit Style.css atau file .css
1. Mengganti Background Blog dengan Warna Html
Sudah tau warna apa yang akan di gunakan? jika anda masih bingung dengan warna html silakan klik disini untuk mengetahui warna-warna html yang sudah saya sediakan.Cara menggantinya anda tinggal mencari kode body {, lalu masukan perintah background: #ff0000; (background: #kode warna;) atau bisa juga dengan background-color: #ff0000;. Nanti hasilnya akan menjadi seperti ini: body {background: #ff0000;}
2. Mengganti Background Blog dengan Image (GAMBAR)
Anda siapkan dulu gambar yang menurut anda paling bagus, lalu anda upload ke blog anda, hati-hati jangan pake foto saya ya. HeeO ya, tips dari saya gunakan gambar dengan ukuran yang kecil saja, seperti belajar membuat blog ini yang menggunakan gambar kecil yaitu dengan ukuran 121 x 60.
Cara mengganti background blog dengan gambar hampir sama dengan yang pertama yaitu mengganti bagian body {, lalu kita hanya perlu memasukan code css background: url('url dari gambar anda'); atau dengan yang ini background-image: url('url dari gambar anda');
hasilnya menjadi body {background-image: url('url dari gambar anda');}
3. Mengganti Background Blog dengan Image yang di encode ke Base64
Nah yang ketiga ini merupakan hasil lanjutan dari yang kedua mengubah background blog dengan image tetapi gambarnya di ubah ke base64. Kelebihan menggunakan image base64 blog kita lebih cepat di akses, silakan anda lihat postingan saya tentang cek kecepatan loading blog. Kekurangannya cuma file css sedikit bengkak. HeheeeCara mengganti background dengan image base64
- Siapkan gambar yang akan di convert ke base64.
- Silakan anda pergi ke www.askapache.com/online-tools/base64-image-converter/
- Upload gambar anda disana terus klik Encode/Decode.
- Hasil dari convet tadi anda salin (copy).
- Pemasangannya kita bisa menggunakan kode background-image: url(''); atau background: url('');
- Cari kode body {, lalu anda tambahkan background-image: url('image yang sudah di convert ke base64');
- Nanti hasilnya jadi: body {background-image: url('image yang sudah di convert ke base64');}