Cara membuat atau memasukan gambar yang akan dijadikan background dihalaman posting blog, background bisa kita gunakan dengan gambar yang berbeda, disetiap posting. Sebelumnya saya sudah membuat artikel tentang cara membuat background berbeda dihalaman berbeda, yaitu dengan cara memasukan background berdasarkan URL halaman.
Dan kali ini background di halaman posting, langsung dari artikelnya. Jadi kita memasukan gambar ke artikel untuk dijadikan background. Untuk lebih jelasnya silakan lihat background gambar dibagian akhir artikel ini. Atau lihat halaman profil dan halaman Contact di blog ini.
Langsung saja, cara membuat background disetiap postingan blog, ikuti langkah-langkah dibawah ini.
- Login ke blogger, lalu buatlah entri baru. Atau edit artikel yang lama.
- Selanjutnya copy kode dibawah ini.
- Dan pastekan di awal tulisan blog, pada bagian HTML. Contoh Gambar.
- Setelah itu masukan kode </div> diakhirtulisan blog, masih pada bagian HTML.
- Selanjutnya, pratinjau gambar, untuk memastikan apakah background sudah ada atau belum.
- Jika sudah baru publikasikan(untuk artikel baru), atau Perbarui(untuk artikel lama). Selesai.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrcpH_JDD2gxRn39T26cHgd9Mx2el2VF5i5g8p3JDVocAaxm1xHwcC6r2wjpAF4tG_ICVInzPVuqFpDDUe08hO5H0UGDBZptBmdtHkzVENlhMIP4uj0e3ZGpN_Xm1n1tu4PdgZbL28zQFq/s1600/Fandra+Juani+copy.png") no-repeat right bottom;">
<div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrcpH_JDD2gxRn39T26cHgd9Mx2el2VF5i5g8p3JDVocAaxm1xHwcC6r2wjpAF4tG_ICVInzPVuqFpDDUe08hO5H0UGDBZptBmdtHkzVENlhMIP4uj0e3ZGpN_Xm1n1tu4PdgZbL28zQFq/s1600/Fandra+Juani+copy.png") no-repeat right bottom;">
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrcpH_JDD2gxRn39T26cHgd9Mx2el2VF5i5g8p3JDVocAaxm1xHwcC6r2wjpAF4tG_ICVInzPVuqFpDDUe08hO5H0UGDBZptBmdtHkzVENlhMIP4uj0e3ZGpN_Xm1n1tu4PdgZbL28zQFq/s1600/Fandra+Juani+copy.png ini url gambar yang akan dijadikan background. Silakan diganti dengan URL gambar kalian sendiri.
- no-repeat berfungsi agar background gambar tidak berulang. untuk mengubah background gambar berulang, ganti menjadi repeat-x;
- right bottom ini posisi background, bisa diganti dengan.
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom
Jika belum tau cara membuat dan mengambil URL gambar sendiri, kamu bisa baca di cara cara upload dan ambil url gambar. Disitu ada cara upload dan ambil url sendiri dengan mudah. Background pada artikel ini saya letakan dibagian paling bawah, yaitu dibagian center bottom. Karena warna background nya terang, jadi tulisannya tidak terlihat.
Kalian bisa gunakan background dengan warna yang gelap, agar tulisan artikel bisa terlihat.
contoh background dengan gambar. Tulisan ini sengaja saya blog, karenga tidak terlihat. Semoga Bermanfaat.
EmoticonEmoticon