Cara Memasang Random Background di Blogger - Deny Listianto

September 24, 2018

Cara Memasang Random Background di Blogger

Cara Memasang Random Background di Blogger

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.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo