Bagaimana Cara Memposisikan Gambar di Blogger

Minggu, April 11, 2010

Bagaimana Cara Memposisikan Gambar di Blogger

Posted by Andre at Minggu, April 11, 2010

Labels: blog, blogger, blogspot, code, css, how to, html, style, tips, trick, tutorial

How to Position Emoticons or Images on Your Blogger Blogspot

Bagaimana cara kita untuk memposisikan smileys, emoticons atau foto di blog Blogger Blogspot memakai kode HTML atau CSS style? Please read on...

Gunakan kode HTML berikut untuk mengatur letak gambar atau ikon seperti di atas:

<IMG STYLE="position:absolute; TOP:60px; LEFT:160px; WIDTH:60px; HEIGHT:60px" SRC="url_file.gif">

Keterangan kode:

IMG berarti kita akan meletakkan gambar (image).

STYLE= menyatakan bahwa setelah ini adalah perintah style (style commands).

position:absolute; menyatakan bahwa gambar (image) akan diletakkan sesuai keinginan kita, walaupun sudah ada gambar atau teks lain di tempat itu. Kode ini bisa menempatkan image Anda di atas teks atau gambar lain. Tergantung dari cara kita memanipulasi letak gambar, perintah ini bisa memperindah blog Anda atau malah sebaliknya.

TOP:60px; LEFT:160px; ini adalah titik-titik dimana image akan ditempatkan: 60 pixels (titik) kebawah dari sisi atas and 160 pixels (titik) dari sisi kiri.

WIDTH:60px;HEIGHT:60px ini merupakan ukuran tinggi (height) dan lebar (width) dari image Anda. Nilai px (pixel) nya bisa diganti sesuai keinginan.

Titik koma (semicolon) menandai dan memisahkan bagian yang satu dari yang lain.

SRC="url_file.gif" adalah source atau URL image, misalnya: http://www.addemoticons.com/emoticon/animated/AddEmoticons04235.gif

Tetapi hasilnya terlihat berbeda di satu browser dengan di browser yang lain. Hasilnya juga terlihat berbeda walaupun di browser yang sama tetapi di komputer lain.

Di komputer tempat menulis posting ini, gambarnya tersusun sesuai keinginan saat dilihat di Mozilla Firefox, seperti terlihat berikut ini.

Tetapi di browser Mozilla Firefox di kompi lain, hasilnya tidaklah seperti yang saya inginkan.

Jika ingin mengetahui ukuran tinggi dan lebar gambar Anda, buka gambar itu di aplikasi seperti Adobe Photoshop atau GIMP dan klik pada Image Size.

Sedangkan peletakan emots di samping kanan ini menggunakan kode HTML seperti berikut:

<img src="URL_file.gif" style="float: right;" />

Keterangan kode:

img src="URL_file.gif" adalah sumber atau alamat file gambar.

style="float: right;" berarti gambar Anda akan diposisikan di sebelah kanan.

Beda kode ini dengan kode di atas adalah: gambar diletakkan di sisi kiri atau kanan teks, tetapi tidak menindis teks atau gambar lain dalam alur normal dokumen.

Kata right bisa diganti dengan left.

Jadi jika ada teks, maka gambar itu akan "floating" di sisi kiri atau kanan teks.

Anda bisa mengunjungi situs www.addemoticons.com untuk mendapatkan berbagai emotikon atau smileys yang cool seperti di halaman posting blog ini.

Have a nice day...

Source: bytes.com

ARTIKEL REKOMENDASI:

- Dasar-dasar Cara Menggunakan Twitter

- Amazon Associates: Affiliate Program di Blogger Blospot

- Bagaimana Cara Membuat Facebook & MySpace Kita Sendiri

- Bagaimana Cara Memunculkan Gadget Product Finder dari Amazon Associates di Blogger

- Respon Emoticons Berupa Glittery Teks di Plurk

- Bagaimana Cara Mengetahui IP Address Spammer: Gunakan StatCounter.Com

- Block Komen Spam Dengan Toolator.Com

- Bagaimana Cara Pake Emoticons Extra Set Tapi Karma Minim Saat Nge-Plurk

- Bagaimana Cara Make Emoticons Ngeplurk di HP: Daftar Smileys Plurk

- Kode Script HTML untuk Mengubah Memperbesar Memperkecil Ukuran Font Huruf Posting Blog

- Bagaimana Cara Mengetahui Orang Yang Tidak Mengikuti (Unfollowing) di Twitter

Klik di sini membawa Anda ke AndresTutorialBlog.blogspot.com

Klik di sini untuk ke DownloadMyFreeMP3.blogspot.com - download my own free mp3

---Bismillah Semoga Berkah---

Andre's Tutorial Blog (ATB)

Minggu, April 11, 2010