Tutorial Memasang Gambar pada posting

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg85ME5Vo5GFobqdMiLqK3Huxcv30GWGwBzFRT2o8w42YvyDbAqQhEbu5YjYKzbLGksnrzMMPAsSmHbC0dIDkR7IR3y0YkAVtPJsWMm0UosDkz_a-Tep5jgVtoRVXoOfb3jak_kyoHLYA/s200/arie.jpg" border="0" />

Hasilnya :




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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg85ME5Vo5GFobqdMiLqK3Huxcv30GWGwBzFRT2o8w42YvyDbAqQhEbu5YjYKzbLGksnrzMMPAsSmHbC0dIDkR7IR3y0YkAVtPJsWMm0UosDkz_a-Tep5jgVtoRVXoOfb3jak_kyoHLYA/s200/arie.jpg" border="0" />

Hasilnya :




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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg85ME5Vo5GFobqdMiLqK3Huxcv30GWGwBzFRT2o8w42YvyDbAqQhEbu5YjYKzbLGksnrzMMPAsSmHbC0dIDkR7IR3y0YkAVtPJsWMm0UosDkz_a-Tep5jgVtoRVXoOfb3jak_kyoHLYA/s200/arie.jpg" border="0" />

Hasilnya :





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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg85ME5Vo5GFobqdMiLqK3Huxcv30GWGwBzFRT2o8w42YvyDbAqQhEbu5YjYKzbLGksnrzMMPAsSmHbC0dIDkR7IR3y0YkAVtPJsWMm0UosDkz_a-Tep5jgVtoRVXoOfb3jak_kyoHLYA/s200/arie.jpg" border="0" />

Hasilnya :





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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg85ME5Vo5GFobqdMiLqK3Huxcv30GWGwBzFRT2o8w42YvyDbAqQhEbu5YjYKzbLGksnrzMMPAsSmHbC0dIDkR7IR3y0YkAVtPJsWMm0UosDkz_a-Tep5jgVtoRVXoOfb3jak_kyoHLYA/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 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.

Read this | Baca yang ini

Widget by [ Tips Blogger-Tutorial Blogger Pemula ]