Hallo sahabat webmuna dimanapun anda berada, pada kesempatan kali ini saya akan membahas sebuah tutorial tentang bagaimana cara membuat gambar foto gallery dalam postingan blog seperti pada contoh gambar di atas.
Jika blog sobat banyak menggunakan gambar atau foto akan lebih menarik jika sobat menggunakan cara ini.
CARA MEMBUAT FOTO GALLERY DALAM POSTINGAN BLOG
1. Untuk langkah pertama login dulu kedalam blogger.
2. Selanjutnya klik Tema/Template kemudian pilih Edit HTML
3. Kemudian cari kode ]]></b:skin> tekan CTRL + F untuk memudah pencarian.
4. Selanjutnya copy kode dibawah ini kemudian letakkan di atas kode ]]></b:skin>
| KODE CSS |
|---|
| .gallery-item {float: left;width: 32.19%;min-height: 184px;height: 250px;border: 1px solid #ccc;margin: 0 3px 10px 3px;} .gallery-item img{width: 100%;height: 250px;padding: 0;object-fit: cover;} |
5. Jika sudah selesai selanjutnya beralih ke menu postingan. Untuk membuat postingan baru atau anda bisa edit postingan untuk menambah foto gallery pada postingan yang sudah anda buat sebelumnya.
6. Pada kolom menu entri postingan klik menu HTML kemudian copy kode dibawah ini dan letakkan kedalam menu HTLM.
| KODE HTML |
|---|
| <div class="gallery snap_nopreview"> <dl class="gallery-item"> <dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnmjHvkduq_MFzaEBu1aLa2oudOK86ESkmkY5nF0M8Q4me1QjqR2SnME293gPu8gA1vPD1dcM6ks3O_z9FNlLC-GqibHi6U-r9M95rVk_9cIdPNqBBvpzteGCHWMe_OmAnlCm1OheRYE/s1600/16-dekorasi-ulang-tahun.jpg" target="_blank"> <img alt="dekorasi-ulang-tahun" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnmjHvkduq_MFzaEBu1aLa2oudOK86ESkmkY5nF0M8Q4me1QjqR2SnME293gPu8gA1vPD1dcM6ks3O_z9FNlLC-GqibHi6U-r9M95rVk_9cIdPNqBBvpzteGCHWMe_OmAnlCm1OheRYE/s1600/16-dekorasi-ulang-tahun.jpg" title="dekorasi-ulang-tahun" width="250" /></a> </dt> </dl> <dl class="gallery-item"> <dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFr4vQIxkN0NMaazU40_yIGvba-wJyytI8wyE8CxbpoRIGU11j2wLqoYyOkzOAZAC6QlTPnav89K-gSnen1HEwQYVIIOlXQjWylOFCcTZVCjAicf1jBc_u7Ch5P5-GxAHKO0YpUqXw3M/s1600/15-dekorasi-ulang-tahun.jpg" target="_blank"> <img alt="dekorasi-ulang-tahun" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixFr4vQIxkN0NMaazU40_yIGvba-wJyytI8wyE8CxbpoRIGU11j2wLqoYyOkzOAZAC6QlTPnav89K-gSnen1HEwQYVIIOlXQjWylOFCcTZVCjAicf1jBc_u7Ch5P5-GxAHKO0YpUqXw3M/s1600/15-dekorasi-ulang-tahun.jpg" title="dekorasi-ulang-tahun" width="250" /></a> </dt> </dl> <dl class="gallery-item"> <dt class="gallery-icon"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUHymoq1wquILQ3tyb-EU9Oa-DAdjLYEd6_i2SvyPrsO3OBKdj8rUjq_63KmZqYwFb84oxvVXSxAKR6G2Ui2ccwwJtuhsyDPP1eVkuE5PR_gf6i7aIPMHPoqtEV98yA9ZWmZe_lO2A40/s1600/14-dekorasi-ulang-tahun.jpg" target="_blank"> <img alt="dekorasi-ulang-tahun" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUHymoq1wquILQ3tyb-EU9Oa-DAdjLYEd6_i2SvyPrsO3OBKdj8rUjq_63KmZqYwFb84oxvVXSxAKR6G2Ui2ccwwJtuhsyDPP1eVkuE5PR_gf6i7aIPMHPoqtEV98yA9ZWmZe_lO2A40/s1600/14-dekorasi-ulang-tahun.jpg" title="dekorasi-ulang-tahun" width="250" /></a> </dt> </dl> </div> |
7. Selanjutnya ganti URL IMAGE dengan gambar yang sudah sobat upload sebelumnya.
Jika hasil gambarnya buram/blur pada postingan post ganti kode /s320/ menjadi /s1600/ pada kode gambarnya.
Untuk lebih jelasnya klik Di Sini untuk melihat cara menghilangkan gambar buram pada postingan blog.
Keterangan:
Setelah sobat menggunakan cara di atas namun hasilnya tidak sesuai dengan tema blog sobat maka rubah ukuran width dan hight sesuai dengan ukuran template sobat.
Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat gallery foto dalam postingan post blog.
Semoga arikel ini bermanfaat dan dapat membantu sedikit pengalaman dalam mengedit template blog.
Selamat Mencoba...
Tidak ada komentar