Minggu, 12 Juli 2009

Tutorial Memasang Gambar pada posting

Tips Blogger Pada kesempatan ini tips blogger akan menjelaskan tentang bagaimana Tutorial Memasang Gambar pada posting. Memasang gambar pada posting ada beberapa macam, gambar sebagai background tulisan, gambar dengan bingkai, gambar serata dengan tulisan dan lainnya. Sara rasa teman-teman tips blogger yang baru dalam dunia blogger sangat membutuhkan tips yang satu ini. Bagaimana tipsnya?, yuk langsung baca aja.



Memasang gambar pada tulisan

1. Perataan gambar.

Untuk perataan gambar cukup sisipkan kode

float=left; (gambar selalu berada di kiri).
float=right; (gambar selalu berada di kanan).

Contohnya :

<img id="BLOGGER_PHOTO_ID_5258085425546336610" style="margin: 0pt 10px 10px 0pt; float: right; cursor: pointer; width: 60px; height: 40px; margin-left=10px; margin-right=1-px;" alt="Tips Blogger" src="http://2.bp.blogspot.com/_0e6iU7iTNxI/SPh41gRZGWI/AAAAAAAAAWE/0QOwgj4L99w/s200/arie.jpg" border="0" />

Hasilnya : Tips Blogger




2. Memasang gambar sebagai background pada posting.

Sebenarnya saya sudah pernah memberikan tips memasang gambar sebagai background posting, tapi akan saya bahas kembali.

Contohnya adalah :

Pelajari bagaimana seorang blogger bisa ratusan bahkan ribuan Dollar perbulannya hanya melalui Blog di internet.

Tentu kamu ingin Mencobanya?, jika kamu tertarik silahkan baca Program penghasil Dollar di internet Gratis!!!...

Baca Selangkapnya >>>


Cara membuatnya seperti ini :

<div style="background: transparent url(Alamat gambar atau image location disini) no-repeat scroll 95% 30%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">Tulisan yang kamu miliki disini</div>

3. Menambah atau menghilangkan border gambar.

a. Menambar border gambar cukup dengan mennyisipkan kode border:solid 1px #e6e6e6;. Contoh pemasangannya sebagai berikut.

<img id="BLOGGER_PHOTO_ID_5258085425546336610" style="border:solid 1px #e6e6e6; margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 60px; height: 40px;" alt="Tips Blogger" src="http://2.bp.blogspot.com/_0e6iU7iTNxI/SPh41gRZGWI/AAAAAAAAAWE/0QOwgj4L99w/s200/arie.jpg" border="0" />

Hasilnya :

Tips Blogger


Penjelasan :

-solid adalah tampilan border, kamu bisa menggantinya dengan dotted dan double.
-1px adalah besar dari border tersebut.
-#e6e6e6 adalah warna dari border tersebut.

Nah kamu penasaran dengan penjelasan diatas. Baik saya akan mencontohkannya. Lihat kode di bawah ini.

<img id="BLOGGER_PHOTO_ID_5258085425546336610" style="border:dotted 4px #cc0000; margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 60px; height: 40px;" alt="Tips Blogger" src="http://2.bp.blogspot.com/_0e6iU7iTNxI/SPh41gRZGWI/AAAAAAAAAWE/0QOwgj4L99w/s200/arie.jpg" border="0" />

Hasilnya :

Tips Blogger



Kode...

<img id="BLOGGER_PHOTO_ID_5258085425546336610" style="border:double 2px #000000; margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 60px; height: 40px;" alt="Tips Blogger" src="http://2.bp.blogspot.com/_0e6iU7iTNxI/SPh41gRZGWI/AAAAAAAAAWE/0QOwgj4L99w/s200/arie.jpg" border="0" />

Hasilnya :

Tips Blogger



b. untuk menghilangkan border pada gambar kamu cukup menghilangkan kode border:solid 1px #e6e6e6;.

4. Memasang gambar dengan bingkai

Lihat kode di bawah ini.

<table border="10" style="width: 150px; height: 40px;" cellpadding="2">
<tbody><tr>
<td>Kode gambar kamu disini</td>
</tr>
</tbody></table>


5. Gambar setara dengan tulisan.

Cara membuatnya adalah kamu cukup menyisipkan kode float:left; margin-left:10px margin-right:10px pada kode gambar yang kamu miliki.

Contohnya :

<a href="http://tips-tutorial.blogspot.com/" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img id="BLOGGER_PHOTO_ID_5258085425546336610" style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 60px; height: 40px;" alt="Tips Blogger" src="http://2.bp.blogspot.com/_0e6iU7iTNxI/SPh41gRZGWI/AAAAAAAAAWE/0QOwgj4L99w/s200/arie.jpg" border="0" /></a> Tips blogger adalah tempat kamu untuk belajar tentang tips dan tutorial blog. Jangan sungkan untuk selalu mengunjungi tips blogger.

Hasilnya adalah...

Tips Blogger Tips blogger adalah tempat kamu untuk belajar tentang tips dan tutorial blog. Jangan sungkan untuk selalu mengunjungi tips blogger.

Saya harap tips sederhana di atas cukup membantu. Salam tips blogger.




Ingin mendapat artikel seperti artikel di atas langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.

Ayo gabung dengan internet marketer atau blogger lainnya di facebook dan twitter. Silahkan klik link di bawah ini...

[Facebook] - [Twitter]

Read this | Baca yang ini



Widget by [ Tips Blogger-Tutorial Blogger Pemula ]

4 comments:

Anonim mengatakan...

susah amat caranya ga kaya mas herman di www.hermanblogtpis.blogspot.com disana klo ngebahas sesuatu diuraikan serinci mungkin agar tdk rumit...

Bang arie mengatakan...

Terima kasih atas masukkanya...kalau saya boleh tahu susahnya yang mana ya?

Paksya mengatakan...

kurasa ga susah.... gampang sj.. kupraktekkan lngsng ok.. jd ya mkc ats ilmux

Faizna Atika mengatakan...

susah

Posting Komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Untuk menggunakan emotion copy paste kodenya saja, budayakan berkomentar setelah membaca ya .

Note : Harap gunakan nama anda dan jangan menggunakan keyword-keyword tertentu atau komentar anda tidak akan dipublish...