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
Tips Blogger
- Scroll Tampil Dipostingan Jika Diperlukan
- Membuat background Pada Judul Sidebar
- Menambahkan Twitter Button di Blog
- Membuat Saving Energy Dengan Gambar Sendiri
- Fixed Guestbook Slide Effect With jQuery
- Naruto Emot Untuk Komentar
- Efek Animasi Dasar Pada Blog
- Cara Mudah Membuat Tool Tip Dengan CSS
- Cara Mudah Membuat Textarea
- Membuat Menu Iklan (jQuery Ads Popout)
- Cara Membuat Slideshow Gambar (with jQuery)
- Membuat Simple Menu
- Efek-efek Tulisan Menggunakan CSS3
- Membuat Menu Daftar Isi Jtoctree
- Image Zoom Effect With Jquery
- Shoutbox Light Effect
- Membuat Hover Image CSS3 Pada Blog (Seperti Blog ini )
- Bertabur Cinta
- Light Hover Horizontal Menu With CSS For Blogger
- Cara Memindah-Mindahkankan Gambar Dengan jQuery
- Cara mudah memasukkan banyak Tab Widget pada sidebar
- Cara Pasang Efek Kupu - Kupu Berterbangan
- Merobah Domain Menjadi CO.TV
- Cara Memasang Efek Bintang Berjatuhan di Blog
- Make Border-Radius