Cara membuatnya tidak terlalu sulit, anda hanya memerlukan beberapa image/gambar yang ukurannya telah diatur dengan lebar 1704 pixel dan tingginya 886 pixel (bisa di resize dengan menggunakan Adobe Photoshop). Ukuran tersebut akan muncul penuh pada backgroud blog. Setelah memiliki beberapa gambar yang akan dijadikan background blog, berikutnya anda upload ambar-gambar tersebut pada hosting penyimpanan gambar seperti Photobucket, Imageshack atau lainnya.
Kode yang digunaan seperti dibawah ini :
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; color:yellow;">
<td onclick="bgChange('url(http://img84.imageshack.us/img84/2685/bg6d.jpg) repeat-x fixed top center')" bgcolor="#2E0000">1</td>
</tr>
</tbody></table>
Keterangan :
► style="text-align: center;font-weight:bold; color:yellow; merupakan kode untuk penampilan tulisan (dalam contoh berupa nomor urut). Pengaturan tersebut menunjukan bahwa hurufnya tebal, warna kuning dan terletak ditengah.
► http://img84.imageshack.us/img84/2685/bg6d.jpg merupakan alamat/url gambar yang akan tampil jika diklik, Dapat anda gati dengan alamat/url gambar milik anda.
► bgcolor="#2E0000 merupakan warna yang tampil pada tombol. Dapat anda ganti dengan kode warna pilihan anda.
► 1 merupakan tulisan yang tampil pada tombol warna
Kode diatas akan tampil seperti ini :
| 1 |
Jika anda ingin menampilkan background lebih dari satu tinggal menambahkan kode seperti dibawah ini :
<td onclick="bgChange('url(http://img36.imageshack.us/img36/9214/44128720.jpg) repeat-x fixed top center')" bgcolor="#6AA366">Image2</td>Kemudian gabungkan dengan kode diatas tadi, sehingga susunanya seperti ini :
<script type="text/javascript">Jadinya akan seperti ini :
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; ">
<td onclick="bgChange('url(http://img84.imageshack.us/img84/2685/bg6d.jpg) repeat-x fixed top center')" bgcolor="#2E0000">1</td>
<td onclick="bgChange('url(http://img36.imageshack.us/img36/9214/44128720.jpg) repeat-x fixed top center')" bgcolor="#6AA366">Image2</td>
</tr>
</tbody></table>
| 1 | 2 |
Silahkan anda tambah kode untuk menampilkan background sebanyak yang anda suka.
Atau jika masih belum paham dengan uraian diatas, coba anda copas kode dibawah ini (Kode yang digunakan seperti pada demo diatas.
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script><table width="100%" height="15px" border="1px">
<tbody><tr style="text-align: center;font-weight:bold; color:yellow;">
<td onclick="bgChange('url(http://img84.imageshack.us/img84/2685/bg6d.jpg) repeat-x fixed top center')" bgcolor="#2E0000">1</td>
<td onclick="bgChange('url(http://img26.imageshack.us/img26/8659/bg1sj.jpg) repeat-x fixed top center')" bgcolor="#570000"> 2</td>
<td onclick="bgChange('url(http://img51.imageshack.us/img51/3595/bg7qh.jpg) repeat-x fixed top center')" bgcolor="#141543">3</td>
<td onclick="bgChange('url(http://img23.imageshack.us/img23/5633/55364836.jpg) repeat-x fixed top center')" bgcolor="#434351">4</td>
<td onclick="bgChange('url(http://img3.imageshack.us/img3/6030/img36a.jpg) repeat-x fixed top center')" bgcolor="#154511">5</td>
<td onclick="bgChange('url(http://img36.imageshack.us/img36/9214/44128720.jpg) repeat-x fixed top center')" bgcolor="#6AA366">6</td>
<td onclick="bgChange('url(http://img251.imageshack.us/img251/7420/bg3ow.jpg) repeat-x fixed top center')" bgcolor="#423215">7</td>
<td onclick="bgChange('url(http://img268.imageshack.us/img268/6805/bodybgiq.jpg) repeat-x fixed top center')" bgcolor="#88672B">8</td>
</tr>
</tbody></table>
Ganti alamat/url gambar pada kode diatas dengan alamat/url milik anda
♂ Good Luck ♀
Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
