Kali ini saya akan berbagi tutorial cara membuat background blog bisa berubah secara otomatis. Untuk membuatnya tidak terlalu sulit, sobat hanya menambahkan script atau kode di template blogger. Namun, script atau kode ini dapat memperlambat kecepatan loading blog.
Cara kerja script atau kode ini adalah merubah gambar background halaman blog setiap kali halaman blog di refresh. Sehingga blog sobat memiliki tampilan yang dinamis karena background nya dapat berubah-ubah dengan sendirinya saat pengunjung membuka halaman baru atau merefresh halaman.
Yosh, jika sobat penasaran dan ingin mencobanya, silahkan ikuti langkah-langkah berikut ini.
Cara Memasang Random Background di Blogger
Pertama, buka Blogger, selanjutnya buka menu Tema lalu klik Edit HTML. Silahkan sobat letakkan kode dibawah ini sebelum kode </body>
<script type='text/javascript'>
//<![CDATA[
var Background=new Array;
Background[0]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[1]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[2]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[3]="#f5f5f5 url('ImageURL') no-repeat top center fixed",
Background[4]="#f5f5f5 url('ImageURL') no-repeat top center fixed";
var random=Math.floor(5*Math.random());
document.write("<style>"),
document.write("body {"),
document.write("background: "+Background[random]+";"),
document.write("background-size:100%;"),document.write(" }"),
document.write("</style>");
//]]>
</script>
Silahkan sobat ganti kode ImageURL dengan url gambar yang telah sobat siapkan, pastikan gambar kualitas Hd agar tidak blur atau paecah-pecah saat dipasang.
Jika sobat ingin yang lebih praktis dan tidak mau ribet harus memasang gambar atau sobat tidak memiliki gambar Hd yang cocok, silahkan gunakan kode di bawah ini.
<script type='text/javascript'>
//<![CDATA[
var Background=new Array;
Background[0]="#f5f5f5 url('https://2.bp.blogspot.com/-pgCR_lX3GZM/W6jcyUstOeI/AAAAAAAAAn8/eVimAZl-UlwTP0WtBhhK0yecFUUEuaAuwCLcBGAs/s1600/garrett-parker-247225-unsplash.jpg') no-repeat top center fixed",
Background[1]="#f5f5f5 url('https://1.bp.blogspot.com/-fCdjRqP6NTs/W6jbnO_KAuI/AAAAAAAAAns/ICnlDOmXcH4OBX-HCQ5xIkbONcWjElklACLcBGAs/s1600/brandon-lam-29892-unsplash.jpg') no-repeat top center fixed",
Background[2]="#f5f5f5 url('https://2.bp.blogspot.com/-OymSzNTbCqA/W6jc2fEDWsI/AAAAAAAAAoE/lA1YcOmRFf4VXPbRnfwfW-UrK7gi4nmcwCLcBGAs/s1600/john-towner-154060-unsplash.jpg') no-repeat top center fixed",
Background[3]="#f5f5f5 url('https://3.bp.blogspot.com/-diwm9CQ6B28/W6jcx6bnrnI/AAAAAAAAAn4/4kFyJzmhhpkI3oT53eIw80pZZw1cd-FvACLcBGAs/s1600/kalen-emsley-98264-unsplash.jpg') no-repeat top center fixed",
Background[4]="#f5f5f5 url('https://4.bp.blogspot.com/-erAEgmCybgY/W6jc1JZmQeI/AAAAAAAAAoA/0dfNJIZ37twWRDBHCFr-bjt6Fl9oCxcmgCLcBGAs/s1600/samsommer-76472-unsplash.jpg') no-repeat top center fixed";
var random=Math.floor(5*Math.random());
document.write("<style>"),
document.write("body {"),
document.write("background: "+Background[random]+";"),
document.write("background-size:100%;"),document.write(" }"),
document.write("</style>");
//]]>
</script>
Jika sudah si lahkan klik Simpan Tema dan lihat hasilnya.
Sekian Cara Memasang Random Background di Blogger, semoga dapat bermanfaat dan terima kasih telah berkunjung.