Cara Membuat Gambar Berderet Horizontal Di Postingan Blog

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.

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.

Baca Juga :

Cara Membuat Gambar Berderet Horizontal Di Postingan Blog

Cara membuat Gambar Berderet Horizontal (Menyamping)


A. Gambar Berderet Default Dengan Ukuran Asli

  • Silahkan kalian buat postingan baru pada akun blogger kalian
  • Masuk ke mode Html
  • Sisipkan kode berikut ini dihalaman tersebut
<div style="text-align: center;">
<img border="none" src="Url_gambar_kalian_yang_akan_dipasang.png" />
<img border="none" src="Url_gambar_kalian_yang_akan_dipasang.png" />
<img border="none" src="Url_gambar_kalian_yang_akan_dipasang.png" />
<img border="none" src="Url_gambar_kalian_yang_akan_dipasang.png" />
</div>
  • Kode yang saya berikan warna Merah, silahkan kalian ganti dengan alamat URL gambar yang akan kalian pasang .

B. Gambar Berderet Dengan Menggunakan Ukuran

  • 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

C. Gambar Berderet Dengan Menggunakan Link dan Ukuran Mode Satu Halaman

  • 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

D. Gambar Berderet Dengan Menggunakan Link, Ukuran, dan Terbuka dijendela Baru (Open New Tab)

  • 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

.
.

Berlangganan Artikel terbaru (free):

Post a Comment