Membuat Tombol Pengganti Backround Image

PASANG TOMBOL PENGGANTI BACKGROUND BLOG
Hanya bedanya tips ini backgroundnya berupa image.

Demo : Coba anda klik salah satu warna untuk mengganti background image. Jika akhirnya belum tampil, ada kemungkinan komeksi internetnya kurang baik atau ada gangguan loading dari stus kawasan menyimpan gambar> Coba anda tunggu beberapa dikala untuk melihat hasilnya.

1

2

3

4

5

6

7

8

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 memakai Adobe Photoshop). Ukuran tersebut akan muncul penuh pada backgroud blog. Setelah mempunyai beberapa gambar yang akan dijadikan background blog, berikutnya anda upload ambar-gambar tersebut pada hosting penyimpanan gambar menyerupai Photobucket, Imageshack atau lainnya.

Kode yang digunaan menyerupai 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 :

1. style="text-align: center;font-weight:bold; color:yellow; merupakan aba-aba untuk penampilan goresan pena (dalam teladan berupa nomor urut). Pengaturan tersebut membuktikan bahwa hurufnya tebal, warna kuning dan terletak ditengah.
2. http://img84.imageshack.us/img84/2685/bg6d.jpg merupakan alamat/url gambar yang akan tampil jikalau diklik, Dapat anda gati dengan alamat/url gambar milik anda.
3. bgcolor="#2E0000 merupakan warna yang tampil pada tombol. Dapat anda ganti dengan aba-aba warna pilihan anda.
4. 1 merupakan goresan pena yang tampil pada tombol warna

Kode diatas akan tampil menyerupai ini :

1

Jika anda ingin menampilkan background lebih dari satu tinggal menambahkan aba-aba menyerupai 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 aba-aba diatas tadi, sehingga susunanya menyerupai 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; ">
<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>

Jadinya akan menyerupai ini :

1

2

Silahkan anda tambah aba-aba untuk menampilkan background sebanyak yang anda suka.
Atau jikalau masih belum paham dengan uraian diatas, coba anda copas aba-aba dibawah ini (Kode yang dipakai menyerupai 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 aba-aba diatas dengan alamat/url milik anda

Selamat mencoba, biar bermanfaat...!!!

Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini