Membuat background gambar Responsive dan Tidak bergeser di blogspot
Background atau Latar belakang adalah salah satu hal penting dalam situs blog, khususnya bagi Anda yang ngeblog di Blogger (Blogspot). Di blogspot sendiri kita di permudah dengan fitur 'Desainer Tema' untuk mengubah tampilan blog kita supaya lebih kece dan sesuai keinginan kita, salah satu tools dari desainer tema sendiri ada yang berguna untuk mengubah latar belakang dengan warna sesuai keinginan kita atau kita juga dapat menggunakan gambar sebagai latar belakang.
Ada dua metode yang dapat kita gunakan untuk memasang latar belakang gambar di blog, pertama dengan memilih gambar yang sudah di sediakan pihak blogger atau menggunggah gambar yang sudah kita sediakan. Untuk mengganti latar belakang blog dengan gambar, caranya sangat mudah.
1. Pertama masuk ke halaman Dashboard Blogger, kemudian buka menu bagian Tema dan pilih tombol Sesuaikan.
2. Selanjutnya kita sudah masuk di halaman Desainer Tema, pilihlah tools Latar Belakang, klik menu Gambar Latar dan setelah itu akan muncul jendela pop up, disana terdapat banyak gambar dengan berbagai kategori yang Anda dapat pilih saebagai latar belakang blog Anda. Namun, jika ingin menggunakan gambar yang Anda punya, silakan pilih menu Upload gambar.
3. Terakhir, Anda dapat menggunggah gambar sesuai keinginan Anda dengan ketentuan yang sudah tertulis.
Untuk cara diatas saya anggap Anda sudah paham dan telah berhasil mengunggah gambar latar belakang.
Dalam beberapa kasus Blogger yang menggunakan gambar sebagai latar belakang mereka, ada beberapa masalah yang timbul, seperti gambar yang melebar, terlalu besar alias tidak responsive; gambar tidak diam saat layar digeser serta gambar berulang/jadi banyak saat digeser.
Masalah-masalah tersebut umumnya terjadi karena kode css bagian tag body belum di setting dengan benar, lantas bagaimana cara untuk memperbaikinnya? Berikut caranya:
Edit Template/Tema dengan menggunakan Edit HTML dan masukan kode css berikut dibagian seperti pada gambar berikut.
Salin kode css di atas dan tempelkan tepat diatas ]]></b:skin> dan jangan lupa untuk di simpan. Adapun fungsi dari kode css di atas adalah sebagai berikut:
Ada dua metode yang dapat kita gunakan untuk memasang latar belakang gambar di blog, pertama dengan memilih gambar yang sudah di sediakan pihak blogger atau menggunggah gambar yang sudah kita sediakan. Untuk mengganti latar belakang blog dengan gambar, caranya sangat mudah.
1. Pertama masuk ke halaman Dashboard Blogger, kemudian buka menu bagian Tema dan pilih tombol Sesuaikan.
 |
| Klik gambar untuk memperbesar |
2. Selanjutnya kita sudah masuk di halaman Desainer Tema, pilihlah tools Latar Belakang, klik menu Gambar Latar dan setelah itu akan muncul jendela pop up, disana terdapat banyak gambar dengan berbagai kategori yang Anda dapat pilih saebagai latar belakang blog Anda. Namun, jika ingin menggunakan gambar yang Anda punya, silakan pilih menu Upload gambar.
 |
| Klik gambar untuk memperbesar |
Anda dapat mengupload file JPG, GIF, atau PNG berukuran hingga 300k.
Untuk latar belakang penuh, gunakan gambar 1800x1600 atau lebih besar.
 |
| Klik gambar untuk memperbesar |
Untuk cara diatas saya anggap Anda sudah paham dan telah berhasil mengunggah gambar latar belakang.
Dalam beberapa kasus Blogger yang menggunakan gambar sebagai latar belakang mereka, ada beberapa masalah yang timbul, seperti gambar yang melebar, terlalu besar alias tidak responsive; gambar tidak diam saat layar digeser serta gambar berulang/jadi banyak saat digeser.
Masalah-masalah tersebut umumnya terjadi karena kode css bagian tag body belum di setting dengan benar, lantas bagaimana cara untuk memperbaikinnya? Berikut caranya:
Edit Template/Tema dengan menggunakan Edit HTML dan masukan kode css berikut dibagian seperti pada gambar berikut.
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Salin kode css di atas dan tempelkan tepat diatas ]]></b:skin> dan jangan lupa untuk di simpan. Adapun fungsi dari kode css di atas adalah sebagai berikut:
- background-repeat: no-repeat;, agar gambar tidak berulang
- background-attachment: fixed;, agar gambar tidak bergeser saat layar di geser
- background-size: cover;, agar gambar tidak melebar alias agar responsive
Dalam masalah ini, saya sebenarnya bukan ahlinya. Namun saya sedikit mencari penyelesaian akan masalah yang saya hadapi dan akhirnya mencoba untuk membagikan pengalaman ini kepada Sobat Blogger yang mungkin mempunyai masalah yang sama.
Untuk artikel kali ini saya cukupkan sampai disini, semoga dapat bermanfaat.
Terima kasih sudah membaca!
Posting Komentar untuk "Membuat background gambar Responsive dan Tidak bergeser di blogspot"