Memasang Image disudut Browser

Tutorial kali ini tentang cara memasang Image disudut kiri bawah atau kanan, atau bahkan disudut atas dari jendela browser. Perhatikan! kita akan meletakkan image tersebut bukan di halaman web atau halaman blog, tapi di Sudut Jendela Browser.

Bagi pemula blog tidak salahnya mencoba script berikut ini, tidak sulit koq.
Baiklah, Mari kita mulai!  

A. Dapatkan image terlebih dahulu. Sumber image dapat anda upload sendiri di blogmu, bisa juga mengambil image dari sebuah LINK/Url website lain yang tidak melanggar Hak Cipta. Untuk mengupload image di blogmu, caranya: klik tombol [New Post] setelah login di blogger.com. Kemudian klik menu image dan upload image yang anda inginkan. Setelah berhasil lalu, klik kanan pada gambar/image tersebut dan pilih [copy image location],


 



kemudian simpanlah dalam notepad terlebih dahulu. Sekarang, anda bisa menghapus gambar tadi.

B. Kemudian masuk ke [Edit HTML] dan ketikkan script seperti dibawah ini (nantinya, anda dapat mengeditnya sendiri) diatas tag tutup CSS blogmu.

.................. #imageku disini ....................
</style>

Kita akan meletakkan image di sudut kanan bawah jendela browser:
Sekarang kita atur posisi image seperti dibawah ini:

#imageku img{
top: auto;
left: auto;
right: 0px;
bottom: 0px;
position: fixed;
}

dan, simpanlah.

Penjelasan I:
Maksud dari script tersebut adalah sebagai berikut:
top = Posisi atas gambar auto.
left = Posisi kiri gambar auto.
right = Posisi kanan gambar adalah 0px atau 0 pixel. Itu artinya, "Nempel" di kanan jendela browser.
bottom = Posisi bawah gambar adalah 0px. Artinya: "Nempel" dibawah kanan jendela browser.
Position = Position mengatur sifat gambar tersebut.

• Pilih fixed jika ingin gambarnya tetap disitu walaupun halaman anda scroll hingga kebawah bagian halaman blog terakhir.
• Pilih absolute, jika ingin gambarnya berada disudut kanan bawah jendela browser, tapi ketika user men-scroll halaman, maka image akan ikut kebawah mengikuti scrolling.

C. Terakhir, masuklah ke Layout, kemudian tambah widget baru atau [add widget] dan pilihlah HTML/Javascript. Lalu, masukkan script dibawah ini.

Tapi sebelumnya siapkan URL image yang anda simpan didalam notepad tadi dan letakkan setelah tanda kutip dua setelah kode [src], contoh sbb:

<div id="imageku">
<img src="http://b.blogspot.com/ienyi4n3ni34k34jm3lkj3/gambarku.jpg" alt="" width="150" height="40"/>
</div>

Kemudian, simpanlah.
Selesai!

Penjelasan II:
Element ID ( <div id="......"> ) bernilai "imageku" diatas itu artinya bahwa aturan pemasangan gambar itu diatur di element ID berupa imageku, yaitu terdiri atas top, left, right, bottom dan position. Sedangkan atribut "width" dan "height" dimaksudkan untuk mengatur Lebar dan Tinggi gambar. Nilai 150 untuk lebar dan nilai 40 untuk tinggi.

Note: Anda dapat melakukannya dengan paragraph atau prase atau kata-kata, jadi tidak selalu harus image. Yah semuannya anda tentukan sendiri.

Bagaimana bila misalnya sebuah kata mutiara yang ditaruh disudut kanan bawah jendela browser?
Yang paling pokok adalah menentukan: Dimana kata mutiara itu akan diletakkan.
Apakah akan diletakkan dalam sebuah paragraph?

Bila setelah element ID imageku berupa img, maka disini kita ganti dengan [p] yang artinya: paragraph. sehingga menjadi:

#imageku p{
top: auto;
left: auto;
right: 0px;
bottom: 0px;
position: fixed;
}

Pada widget html/javascript, gantilah [div] dengan [p], sehingga menjadi:

<p id="imageku">
<img src="http://b.blogspot.com/ienyi4n3ni34k34jm3lkj3/gambarku.jpg" alt="" width="150" height="40"/>
</p>

Nah, gimana? sudah paham? terbaik! :D
Selamat Mencoba.