Headlines News :
Home » , » memasang gambar pada posting

memasang gambar pada posting

Written By Ariez Marinecyber on Selasa, 13 September 2011 | 9/13/2011 09:39:00 AM


Tips BloggerPada 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!!!...




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 kodeborder: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...

sumber: 
tips-tutorial.blogspot.com
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

Pengikut

my Twitter

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. World zone - DUNIA XXX - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger