Cara Mempercantik Blog Dengan Warna Background Otomatis

10 Oktober

Banyak Cara mempercantik blog kita agar terlihat lebih indah dan interaktif dengan pengunjung. Salah satunya adalah memberikan pilihan kepada pengunjung untuk merubah warna background blog menjadi otomatis. Tutorial ini akan memandu kita bagaimana membuat tombol pilihan untuk merubah warna background di widget blog.

Sebelum kita melanjutkan pada sesi tutorial, ada baiknya kita mengetahui mengapa kita perlu mempelajari cara mempercantik blog. Tujuannya tidak lain adalah bagaimana blog kita memiliki karakter dan tampilan yang sesuai dengan keinginginan kita juga selaras dengan keinginan pengunjung blog. Namun yang perlu diperhatikan ketika kita mencoba berbagai teknik dan trik untuk mempercantik blog. Kita harus tetap memperhatikan sisi optimasi blog baik dari segi kecepatan loading, hingga tata letak yang optimal.

Baiklah kita mulai tutorial cara mempercantik blog dengan membuat tombol pilihan warna background di widget

1. Login ke dasboard blog anda

2. Tambahkan Gadget HTML/Javascript

3. Tambahkan script dibawah ini pada halaman di kotak gadget

Script Tombol pilih warna background

<div class="widget-content">  
 <center><b>Pilih Warna Kesukaan Anda</b></center>  
 <br/>  
 <script type="text/javascript">  
 function bgChange(bg)  
 {  
 document.body.style.background=bg;  
 }  
 </script>  
 <table border="1" width="100%" height="20">  
 <tbody><tr>  
 <td onclick="bgChange('#8B008B')" bgcolor="#8B008B">  
 </td>  
 <td onclick="bgChange('#9400D3')" bgcolor="#9400D3">  
 </td>  
 <td onclick="bgChange('#008080')" bgcolor="#008080">  
 </td>  
 <td onclick="bgChange('#808080')" bgcolor="#808080">  
 </td>  
 <td onclick="bgChange('#CD853F')" bgcolor="#CD853F">  
 </td>  
 <td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">  
 </td>  
 <td onclick="bgChange('#DC143C')" bgcolor="#DC143C">  
 </td>  
 <td onclick="bgChange('#4B0082')" bgcolor="#4B0082">  
 </td>  
 <td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">  
 </td>  
 </tr></tbody></table>  
 </div>  

 4. Simpan hasil pekerjaan anda kemudian buka blog anda untuk melihat perubahan adanya penambahan tombol perubah warna pada gadget anda.

Untuk kode warna diatas dapat anda ganti sesuka hati sesuai keinginan anda. Sehingga warna background yang akan tampil mengikuti warna yang anda tetapkan pada kode diatas. Kode warna bisa anda dapatkan melalui sofware seperti photoshop pada semua versi.

Demikianlah tutorial cara mempercantik blog dengan menambahkan tombol pilihan warna background pada blog kita.