Mengubah Background Halaman Blogger

Berbagi-Kreativitas.blogspot.com - بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِي Salam Blogger! Pembelajaran basic kembali akan Saya paparkan kali ini tentang cara Mengubah Background Halaman Blogger statis atau dinamis random background berupa gambar, warna, atau sejenis lainnya sesuai kebutuhan. Salah satu kegiatan pada blogger mania tidak akan pernah lepas terkait desain, selain mencari dan merubah atau backup/ restore template blogger yang SEO Friendly penambahan desain didalamnya pasti dilakukan guna mendapatkan rancangan sesuai selera.

Mengubah Background Halaman Blogger

Template blog jika digunakan dari pilihan blogger sendiri Saya pikir kurang Stylish, dilihat dari tekstur peletakkan halaman ataupun backgrund dari masing-masing fungsi halaman terkait banyaknya tidak sesuai kebutuhan blogger jaman sekarang. Oleh karena itu disini Saya akan melengkapi juga artikel terkait basic untuk Sahabat blogger yang baru dan belum tahu ingin belajar bersama Saya, berikut adalah cara untuk mengubah background halaman blogger

Mengubah Warna Background Blogger

Cara ini cukup mudah dan memiliki dua opsi, yang pertama bersifat statis dan kedua dinamis, atau sering disebut dengan random background warna. Fungsi random pernah juga Saya pasang pada tema template terdahulu dan lupa untuk dishare untuk kelengkapan artikel tips desain inipun Saya posting kali ini. Disini Anda dapat memilih jenis warna html yang akan dipasang untuk memudahkan kemudian dilanjutkan mencari kode sesuai fungsi.

Pilihan Pertama. Tekan Ctrl+F cari body dari namanya jelas kita akan merubah warna latar belakang pada halaman/ body blog. Kode body lihat lengkapnya dibawah.

body{background:#fff;width:980px;color:#333;font-size:15px;font-family:Packard Antique;margin:0 auto;padding:0}

Untuk background statis (tidak berubah-ubah) Anda tinggal merubah kode warna yang bergaris bawah diatas dengan kode warna html yang menjadi pilihan. Perubahan ini sifatnya statis ingin jelas pratinjau terlebih dahulu sebelum simpan, jika ingin dinamis lihat opsi kedua berikut.

Pilihan Kedua. Fitur ini berfungsi ketika Anda sorot dan klik, maka background blog akan berubah sesuai warna yang Anda klik. Tambah kode berikut pada fitur blogger tambah gadget JavaSrcript/ HTML, lalu simpan.

<script type="text/javascript">function bgChange(bg){document.body.style.background=bg;}</script><br />
<table width="100%"><tr> <td onclick="bgChange('black')" bgcolor="black"> </td>  <td onclick="bgChange('#6633FF')" bgcolor="#6633FF"> </td>  <td onclick="bgChange('#FF3366')" bgcolor="#FF3366"> </td>  <td onclick="bgChange('#CAFF7A')" bgcolor="#CAFF7A"> </td>  <td onclick="bgChange('#fff')" bgcolor="#fff"> </td>  <td onclick="bgChange('#0f0')" bgcolor="#0f0"> </td>  <td onclick="bgChange('#003333')" bgcolor="#003333"> </td>  <td onclick="bgChange('#515151')" bgcolor="#515151"> </td>  <td onclick="bgChange('#331A00')" bgcolor="#331A00"> </td>  </tr>
</table>

Mengubah Background Blogger Dengan Gambar
Untuk fungsi ini sama memiliki dua opsi. Pilih salah satu Saja sesuai pilihan atau bahkan gunakan kedua-duanya fungsi statis untuk bentuk defult latar belakang dan dinamis untuk gaya acak agar blog terlihat berbeda atau unik.

Pilihan Pertama. Tekan Ctrl+F untuk mencari kode body{ lalu ubah kode warna menjadi link gambar lihat kode berikut

body{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjja6Gvudgq9-thL3Gi1HuYLy1ZOKLU0SwSYbWxK4SemX3XMNjdS5UrFKjKLJxhoePGEoBnkaDaVVNg-gtXj1bqssc0TXF9vDmYLpSTIupZeZlgNVoDwVU_rwbf2owuyxXnF7eNwet6QqY/s74/BGN.png)repeat;color:$textcolor;font:x-small Arial;font-size:small;text-align:center;margin:0}

Ubah link gambar yang bercetak tebal diatas sesuai gambar yang Anda inginkan, usahakan gambar di rezise terlebih dahulu menjadi lebih kecil ukurannya.

Pilihan Kedua. Tambahkan gadget JavaSript/ HTML kemudian simpan kode berikut. Tips ini akan berfungsi ketika Anda tekan F5 (Refresh)

<script type="text/javascript">
var background= new Array()
background[0]="URL gambar 1 backgraund anda"
background[1]="URL gambar 2 backgraund anda"
background[2]="URL gambar 3 backgraund anda"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + background[random] + '") repeat top center;');
document.write(" }");
document.write("</style>");
</script>

Ganti teks cetak tebal dengan link gambar Anda, jika ingin menambahkan gambar tinggal update background[3]"Url gambar 4" dan (3*Math.random()) dan seterusnya sesuai jumlah maksimal gambar yang tersimpan.


Referensi kode:
www.uc1n.com/
farixsantips.blogspot.com/