Cara Membuat Gambar Berderet Horizontal Di Postingan Blog Dengan HTML

komputerdia.com - How to create a horizontal row image on a blog? Terkadang sebagai seorang blogger kita harus bisa membuat sesuatu yang menurut pendapat orang lain itu mustahil, banyak sekali cara yang bisa kita lakukan untuk membuat blog kita menjadi menarik, entah itu dari segi tampilan ataupun dari segi penyuguhan konten.

Pengertian gambar adalah sebuah perpaduan antara titik, garis, bidang dan warna yang berguna untuk mencitrakan sesuatu. Di sekitar kita saat ini banyak terdapat gambar-gambar. Seperti pada komik, buku cerita, dan lain sebagainya. Gambar juga dapat diartikan sebagai sebuah tampilan suatu objek kedalam media gambar.

Perlu kalian ketahui, bahwa salah satu fungsi gambar adalah sebagai penyampaian sebuah ekspresi perasaan, sebagai media penyampaian informasi, sebagai karya seni, dan berbagai fungsi dari gambar lainnya. oleh karena hal tersebut, maka sebuah gambar memiliki berbagai macam fungsi tergantung dari pembuatnya.

Seperti hal membuat gambar berdert secara horizpntal pada postingan misalnya, didalam blogger sendiri fitur seperti ini memang belum bisa kita dapatkan secara default dari sistem blogger, namun hal ini bisa kita lakukan seperti contoh yang akan saya jelaskan pada artikel ini.

Cara membuat Gambar Berderet Horizontal (Menyamping)

1. Gambar Berderet Default Dengan Ukuran Asli

• Jika kalian menggunakan metode nomor pertama, pastikan semua ukuran gambar yang akan digunakan mempunyai ukuran yang sama baik tinggi maupun lebar gambarnya, karena pada metode pertama ini menggunakan ukuran default
• Silahkan kalian buat postingan baru pada akun blogger kalian
• Masuk ke mode Html
• Sisipkan kode berikut ini dihalaman tersebut

<center>
<table border="0">
<tbody>
<tr>
<td><img src="url gambar kalian" />
</td>
<td><img src="url gambar kalian" />
</td>
<td><img src="url gambar kalian" />
</td>
</tr>

<tr>
<td><img src="url gambar kalian" />
</td>
<td><img src="url gambar kalian" />
</td>
<td><img src="url gambar kalian" />
</td>
</tr>
</tbody></table>
</center>

• Kode yang saya berikan warna Merah, silahkan kalian ganti dengan alamat URL gambar yang akan kalian pasang .

2. Gambar Berderet Dengan Ukuran Responsive

• Buat postingan atau entri baru
• Masuk pada mode Html, dan copy kode dibawah ini pada halaman mode html tersebut

<div style="text-align: center;">
<img border="none" height="120" src="Url_gambar_yang_akan_dipasang.png" width="210"/>
<img border="none" height="120" src="Url_gambar_yang_akan_dipasang.png" width="210"/>
<img border="none" height="120" src="Url_gambar_yang_akan_dipasang.png" width="210"/>
<img border="none" height="120" src="Url_gambar_yang_akan_dipasang.png" width="210"/>
</div>

• Kode yang berwarna Merah, silahkan kalian ganti dengan ukuran gambar yang kalian inginkan
• Kode yang berwarna Biru, silahkan kalian ganti dengan alamat url gambar kalian

3. Gambar Berderet Menggunakan Link dan Ukuran

• Buat postingan atau entri baru
• Masuk ke mode html
• Copy dan pastekan kode berikut ini pada halaman mode html tersebut

<div style="text-align: center;">
<a href='URL_Tujuan'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
<a href='URL_Tujuan'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
<a href='URL_Tujuan'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
<a href='URL_Tujuan'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
</div>

• Kode yang berwarna Coklat, silahkan kalian ganti dengan alamat Link/URL Tujuan Kalian
• Kode yang berwarna Merah, silahkan kalian ganti dengan ukuran gambar kalian
• Kode yang berwarna Biru, silahkan kalian ganti dengan URL gambar kalian

4. Gambar Berderet Dengan Link New Tab & Ukuran

• Buat postingan atau entri baru
• Masuk ke mode html
• Copy dan pastekan kode berikut ini pada halaman mode html tersebut

<div style="text-align: center;">
<a href='URL_Tujuan' target='_blank'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
<a href='URL_Tujuan' target="_blank'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
<a href='URL_Tujuan' target='_blank'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
<a href='URL_Tujuan' target='_blank'><img border="none" height="210" src="Url_gambar_yang_akan_dipasang.png" width="250"></a>
</div>

• Kode yang berwarna Coklat, silahkan kalian ganti dengan alamat Link/URL Tujuan Kalian
• Kode yang berwarna Merah, silahkan kalian ganti dengan ukuran gambar kalian
• Kode yang berwarna Biru, silahkan kalian ganti dengan URL gambar kalian
• Kode yang berwarna Ungu, biarkan saja seperti itu. Kode ini berfungsi untuk memanggil perintah Open Link New Tab. Ketika gambar kalian klik maka kalian akan diarahkan pada jendela baru

5. Galeri Foto/Gambar di Postingan Blog Responsive

• Buat postingan atau entri baru
• Masuk ke mode html
• Copy dan pastekan kode berikut ini pada halaman mode html tersebut

<style type="text/css">
body{ width: 100%; } div.gallery { border: 1px solid #ffa800; } div.gallery:hover { border: 2px solid skyblue; } div.gallery img { width: 100%; height: 100px; } div.desc { padding: 15px; text-align: center; color:#fff; background:silver; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } .clearfix:after { content: ""; display: table; clear: both; }
</style>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

   <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

<div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

<div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

<div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>

<div class="responsive">
        <div class="gallery">
            <a target="_blank" href="URL Gambar kalian">
                <img src="URL Gambar kalian" width="600" height="400">
            </a>
        </div>
    </div>
    <div class="clearfix"></div>

• Kode yang berwarna merah , silahkan kalian ganti dengan alamat Link/URL gambar atau foto yang akan digunakan
• Selesai dan semoga bermanfaat untuk kalian semuanya

6. Gambar Berderet di Blog Dengan Kode Tabel

• Buat postingan atau entri baru
• Masuk ke mode html
• Copy dan pastekan kode berikut ini pada halaman mode html tersebut

<table>
<tr>
<td> <a href="Target Situs" target="_blank" rel="nofollow" width="200px" height="200px"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>

<td> <a href="Target Situs" target="_blank" rel="nofollow" width="200px" height="200px"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar></a> </td>

<td> <a href="Target Situs" target="_blank" rel="nofollow" width="200px" height="200px"><img src="Disini-Link-Gambar" alt="Deskripsi Gambar" title="Deskripsi Gambar"></a> </td>
</tr>
</table>

• Kode yang berwarna Coklat, silahkan kalian ganti dengan alamat Link/url situs tujuan kalian
• Kode yang berwarna merah, silahkan kalian ganti dengan alamat url/link gambar
• Kode berwarna biru, silahkan kalian ganti dengan deskripsi foto/gambar kalian
• Selesai dan semoga bermanfaat untuk kalian semuanya

Demikian artikel kali ini yang bisa saya sampaikan, jika ada pertanyaan dari kalian yang belum tejawab di postingan artikel ini, silahkan kalian tinggalkan komentar dikolom yang sudah saya sediakan.

Share this post