Cara Menyusun Banyak Gambar di Postingan Blog - Apakah anda sering menciptakan Artikel dengan banyak gambar?
Pada kesempatan saya akan membuatkan tips cara menyusun banyak gambar di postingan Blog, tujuannya supaya gambar sanggup terlihat lebih rapih dan sedap dipandang mata. untuk menciptakan gambar supaya sanggup tersusun rapi menggunakan isyarat memakai isyarat CSS dan HTML. Sebagai pola Anda sanggup melihat screnshoot dibawah ini:
Naah, bagaimana teman tertarik. Untuk membuatnya berikut ini langkah-langkahnya :
1. Login keakun Blogger
2. Pilih Template >> klik Edit HTML
3. Untuk memudahkan pencarian gunakan CTRL+F kemudian cari kode ]]></b:skin>
4. Selanjutnya Anda copas isyarat dibawah ini dan letakkan diatasnya :
Keterangan :
> width: 730px ialah pengaturan lebar colom
> background: ialah pengaturan warna latar
5. Sanjutnya Simpan Template
6. Kemudian untuk menyusun gambar Anda kelaman baru, pilih mode HTML kemudian masukkan isyarat dibawah ini
Keterangan :
> URL Gambar ialah isyarat untuk URL Gambar Anda
> height: 100px ialah pengaturan ukuran gambar
7. Publikasikan
Cukup gampang bukan sobat, sekian dari saya Cara Menyusun Banyak Gambar di Postingan Blog. Kurang lebihnya saya mohon maaf, Selamat mencoba dan semoga bermanfaat! Sumber http://www.websiteedukasi.com/
Pada kesempatan saya akan membuatkan tips cara menyusun banyak gambar di postingan Blog, tujuannya supaya gambar sanggup terlihat lebih rapih dan sedap dipandang mata. untuk menciptakan gambar supaya sanggup tersusun rapi menggunakan isyarat memakai isyarat CSS dan HTML. Sebagai pola Anda sanggup melihat screnshoot dibawah ini:
Naah, bagaimana teman tertarik. Untuk membuatnya berikut ini langkah-langkahnya :
1. Login keakun Blogger
2. Pilih Template >> klik Edit HTML
3. Untuk memudahkan pencarian gunakan CTRL+F kemudian cari kode ]]></b:skin>
4. Selanjutnya Anda copas isyarat 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;
}
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 ialah pengaturan lebar colom
> background: ialah pengaturan warna latar
5. Sanjutnya Simpan Template
6. Kemudian untuk menyusun gambar Anda kelaman baru, pilih mode HTML kemudian masukkan isyarat 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>
<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 ialah isyarat untuk URL Gambar Anda
> height: 100px ialah pengaturan ukuran gambar
7. Publikasikan
Cukup gampang bukan sobat, sekian dari saya Cara Menyusun Banyak Gambar di Postingan Blog. Kurang lebihnya saya mohon maaf, Selamat mencoba dan semoga bermanfaat! Sumber http://www.websiteedukasi.com/