Cara Mengganti Background Blog dengan Warna Agar Fast Loading

Santos el Salam

16 November 2019

Banyak saya jumpai blogger yang menggunakan gambar sebagai latar background untuk blognya. Saya sendiri sebelumnya penganut paham ini. Background blog yang menarik memang menjadikan mata sedap kala memandangnya. Blog ini juga pernah lama menggunakan gambar pemandangan indah sebagai backgroundnya. Bagi pengguna template blogspot standar, untuk mengatur background kita bisa menggunakan fasilitas yang tersedia pada menu blogspot. Caranya yaitu dengan pilih menu tema ➡ Customize (Sesuaikan) ➡ background (latar belakang). Di sana tersedia banyak gambar yang bisa kita gunakan untuk latar blog kita. Atau bisa juga menggunakan gambar sendiri dengan mengupload gambar pada menu upload image atau dengan menerapkannya pada menu edit html. 

Ganti background dengan gambar

Bagi blogger yang menampilkan fitur-fitur sederhana di blognya mungkin hal itu sah-sah saja. Namun jika blog anda menampilkan banyak fitur atau tampilan widget yang cukup ramai, maka sebaiknya anda pertimbangkan kembali background yang anda gunakan di blog anda. Hal ini perlu diperhatikan untuk menjaga agar loading blog anda tidak semakin berat karena gambar yang diloading dari background tersebut. Terlebih jika blog kemudian juga dimonetisasi dengan adanya iklan, maka dipastikan loading blog akan menjadi semakin berat dan itu sangat berpengaruh bagi kenyamanan pengunjung dan tentunya reputasi blog di mata google. 

Karena pertimbangan-pertimbangan inilah sebaiknya background diganti dengan warna yang pas agar loading menjadi lebih ringan. Pertimbangan ini juga yang kemudian membuat saya mengganti background blog ini dengan warna yang lebih baik untuk menjaga kecepatan loading blog ini. Biasanya warna yang disarankan adalah warna putih, atau bisa juga warna yang disesuaikan dengan tampilan fitur di blog anda. Cara menggantinya anda bisa mengaturnya kembali pada menu tema ➡ Customize (Sesuaikan) dan hapus image bacgkround, kemudian terapkan. Dengan begitu maka background akan berubah menjadi warna default yang ada. 

Hapus background ubah dengan warna

Atau jika menu pada customize tidak muncul atau anda ingin merubah background dengan jenis warna tertentu, seperti misalnya pada contoh di atas ternyata warna defaultnya biru gelap dan anda ingin merubahnya menjadi putih polos, maka anda bisa menerapkannya lewat menu edit html. Caranya yaitu pilih menu tema ➡ klik edit html dan cari kode berikut ini

body {background:#kode warna;}

Keterangan: Ganti kode warna (yang berwarna merah) dengan kode warna yang anda inginkan

Atau bisa juga kodenya seperti ini

body {

  font: $(body.font);

  color: $(body.text.color);

  background: $(body.background);

}

Maka anda bisa ganti sehingga menjadi seperti ini

body {

  font: $(body.font);

  color: $(body.text.color);

  background: #kode warna;

}

Keterangan: Ganti kode warna (yang berwarna merah) dengan kode warna anda inginkan. Jika ingin putih polos maka ganti dengan kode #ffffff dan kemudian simpan kembali template anda. 

Jika anda ingin background berwarna putih tapi seperti bisa bergerak sehingga terlihat unik dan hidup, mungkin anda bisa mencoba kode warna gradasi atau gradien yang saya dapat dari blog CB di bawah ini. Warna ini juga cukup ringan sehingga bisa anda terapkan di blog anda. Jika anda berminat memakainya, anda bisa ganti kode warna di atas dengan kode berikut ini. 

rgba(226,226,226,1);

    background: -moz-linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 17%, rgba(254,254,254,1) 53%, rgba(209,209,209,1) 100%);

    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(226,226,226,1)), color-stop(17%, rgba(219,219,219,1)), color-stop(53%, rgba(254,254,254,1)), color-stop(100%, rgba(209,209,209,1)));

    background: -webkit-linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 17%, rgba(254,254,254,1) 53%, rgba(209,209,209,1) 100%);

    background: -o-linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 17%, rgba(254,254,254,1) 53%, rgba(209,209,209,1) 100%);

    background: -ms-linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 17%, rgba(254,254,254,1) 53%, rgba(209,209,209,1) 100%);

    background: linear-gradient(45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 17%, rgba(254,254,254,1) 53%, rgba(209,209,209,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1', GradientType=1 );

Perlu diingat pula bahwa warna background ini biasanya bisa terlihat dengan jelas pada tampilan web, sedangkan pada tampilan mobile, biasanya hanya muncul di sisi luar (pinggiran) blog atau di sela-sela tampilan menu blog anda. Demikian. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Mengganti Background Blog dengan Warna Agar Fast Loading. Please share...!

Facebook

Twitter