Cari Artikel Blog Ini

Total Tayangan Laman

MEMBUAT TOMBOL PENGGANTI BACKROUND IMAGE

Tutorial ini sekedar untuk variasi dari background blog. Kode yang digunakan merupakan modifikasi dari tutorial sebelumnya yaitu PASANG TOMBOL PENGGANTI BACKGROUND BLOG
Hanya bedanya tips ini backgroundnya berupa image.

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


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 :
  1. 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.
  2. 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.
  3. bgcolor="#2E0000 merupakan warna yang tampil pada tombol. Dapat anda ganti dengan kode warna pilihan anda.
  4. 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">
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 seperti ini :
12


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

Selamat mencoba, semoga bermanfaat...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
11 Comments

11 komentar :

www.menjelma.com mengatakan...

waduh,,lumayan ribet juga neh tutorialnya,,tpai ,,boleh lah dicoba dulu,,great tuutorial bro,,ditunggu balasan komentarnya

ABANG YULI mengatakan...

pak....saya..mau tanya cara masukin file swf di blogger gimana ya...pak caranya...mintak tolong buatin artikelnya ya...trims bangt

Ades mengatakan...

@ABANG YULI : Cara pasang flash/swf silakan anda kunjungi CARA PASANG FLASH/SWF DI BLOG

ABANG YULI mengatakan...

@ Kok masih nggak bisa ya pak.... flashnya nggak keluar coba kalau nggak percaya scriptnya di coba pak.... aku mintak tolong banget kasih scrip file swf yang terbaru ya... pak sebelumnya terimakasih banget

Ades mengatakan...

@ABANG YULI : Ternyata ada kode yang kurang...tapi sekarang dah ok
Coba lagi ya....

Jaringan Komputer mengatakan...

nice gan
tapi apa itu tidak memperlambat loading blog
jawab di blog saya gan,,,

Ades mengatakan...

@Jaringan Komputer: loading awal tidak memberatkan blog. kecuali waktu tombol pergantian image diklik, biasanya agak lambat.

Lora Malunk Blog mengatakan...

Thank's sobat info menariknya.....ane coba dulu ye tip nya

Anonim mengatakan...

terima kasih gan atas info nya..
sangat membantu. salam kenal dan sukses..

BROTHER RICKY XP mengatakan...
Komentar ini telah dihapus oleh pengarang.
BROTHER RICKY XP mengatakan...

malam gan... maap mau tanya jika saya menggunakan gambar image yang diberikan di tutorial ini.. gambar di blogs saya full lebar dan tingginya.. tetapi ketika saya memasang gambar pilihan saya , gambarnya tidak full lebar sama tingginya padahal ukuran gambar sudah saya rubah lebar 1704 tinggi 886 , kesalahannya dimana ya gan , mohon pencerahannya gan.. soalnya sudah berminat banget nih sama tutorial yang gan share.. tolong di cek ya gan http://brotherrickyxp.blogspot.com/ terimakasih...

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!