Posted by Aak
Aak-share.com Updated at: 8:29:00 PM

Cara Menyusun Banyak Gambar di Postingan Blog

8 comments:
Cara Menyusun Banyak Gambar di Postingan Blog - Apakah anda sering membuat Artikel dengan banyak gambar?
Pada kesempatan saya akan berbagi tips cara menyusun banyak gambar di postingan Blog, tujuannya agar gambar dapat terlihat lebih rapih dan sedap dipandang mata. untuk membuat gambar agar dapat tersusun rapi  menggunakan kode menggunakan kode CSS dan HTML. Sebagai contoh Anda bisa melihat Demo-nya atau screnshoot dibawah ini:


Naah, bagaimana sobat tertarik. Untuk membuatnya berikut ini langkah-langkahnya :

1. Login keakun Blogger
2. Pilih Template >> klik Edit HTML
3. Untuk memudahkan pencarian gunakan CTRL+F lalu cari kode ]]></b:skin>
4. Selanjutnya Anda copas kode dibawah ini dan letakkan diatasnya :

.boksgambar {
 width: 730px;
 height:auto;
 float: left;
 margin: 10px;
 padding: 10px 0px 0px 10px;
 border: 2px solid #000;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 background: #996600;background:
 -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#111111), to(#99CCFF));
 }
.boksgambar img {
 height: 100px;
 width: auto;
 margin: 0px 10px 10px 0px;
 float: left;
 }

Keterangan :
> width: 730px adalah pengaturan lebar colom
>  background: adalah pengaturan warna latar

5. Sanjutnya Simpan Template
6. Kemudian untuk menyusun gambar Anda kelaman baru, pilih mode HTML lalu masukkan kode dibawah ini

<div class="boksgambar">
<img src="URL Gambar" style="float: left; height: 100px; margin: 0px 10px 10px 0px; width: auto;" />
<img src="URL Gambar" style="float: left; height: 100px; margin: 0px 10px 10px 0px; width: auto;" />
<img src="URL Gambar" style="float: left; height: 100px; margin: 0px 10px 10px 0px; width: auto;" />
<img src="URL Gambar" style="float: left; height: 100px; margin: 0px 10px 10px 0px; width: auto;" />
<img src="URL Gambar" style="float: left; height: 100px; margin: 0px 10px 10px 0px; width: auto;" />
</div>

Keterangan :
> URL Gambar adalah kode untuk URL Gambar Anda
>  height: 100px adalah pengaturan ukuran gambar

7. Publikasikan

Cukup mudah bukan sobat, sekian dari saya Cara Menyusun Banyak Gambar di Postingan Blog. Kurang lebihnya saya mohon maaf, Selamat mencoba dan semoga bermanfaat!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

8 comments

Makasih sob tips n ane langsung coba dech ilmunya dan ditunggu kunjungan baliknya

Balas

Iya sama-sama sob ,
siap sob :-bd

Balas

terimakasih infonya gan

Balas

Ok...
Sama-sama gan.

Balas

Bisa gak sob iklan di susun seperti nyusun gambar di atas?

Balas

Bisa sob, kita tinggal atur aja ukuran gambarnya.
Bisa juga menggunakan cara ini sob

http://www.aak-share.com/2014/10/membuat-kotak-iklanbanner-125x125.html

Balas

pilih mode html gimana gan ?

Balas

Masuk kelaman baru atau membuat artikel baru, lalu pilih mode HTML jangan composer kemudian publikasikan.

Balas