Tutorial Posting Gambar Di Blogspot Valid AMP

CARA AMP -Bagi anda yang baru mencoba menggunakan template blogspot AMP tentunya sangat kewalahan bahkan karena tidak terbiasa untuk mengedit kode html. Banyak para penulis blog yang jengkel dan berpindah ke template biasa hanya karena upload foto dan memasangnya di suatu artikel yang membingungkan.

Jika Anda menggunakan template blogger biasa, anda hanya mengupload foto dan mengatur ukuran yang sesuai dengan keinginan, kemudian lanjut ke beberapa setingan artikel, label, permalink, & deskripsi artikel kemudian publiskan. Tapi jika anda menggunakan template blogspot AMP maka ada tambahan kerja untuk Anda yaitu mengedit html script gambar AMP Blogspot.

Panduan mengatur pada template AMP blogspot - Bagi Anda yang menggunakan template AMP pada blogspot pasti pernah mengalami kesalahan dalam mengupload foto. Ketika foto di upload lalu anda melakukan pertinjauan artikel di sudut kanan atas muncul notif error berwarna merah plugin AMP pada browser. Hal ini sering terjadi bagi publisher yang menggunakan template Accelerated Mobile Pages ( AMP).

Bagi anda yang baru mencoba menggunakan template blogspot AMP tentunya sangat kewalahan bahkan karena tidak terbiasa untuk mengedit kode html. Banyak para penulis blog yang jengkel dan berpindah ke template biasa hanya karena upload foto dan memasangnya di suatu artikel yang membingungkan.

HyperText Markup Language (HTML) adalah bahasa inti dari hampir semua konten Web. Nah pada postingan gambar untuk template Non-amp biasanya menggunakan struktur html seperti dibawah ini

<img src="url foto" alt="caraa.id" style="width:304px;height:228px;">

Apa bedanya dengan HTML AMP ?

cuman sedikit sih.. hanya tagnya saja. untuk awalan tag html biasa seperti <img> bla bla bla</img> kalau html AMP <amp-img>bla bla bla </amp-img> tjadi cukup memberi variasi sedikit saja. Namun tag "style" tidak berfungsi untuk html amp jadi jangan di gunakan pada saat menerapkan gambar dipostingan.

Berikut cara memasang foto pada template AMP blogspot :

1. Setelah mengupload gambar, kemudian copy url gambar yang telah anda upload tadi. atau url nya bisa di temukan pada postingan dengan metode HTML yang berada tepat pada sudut kiri atas. bisa juga dengan klik kanan dan pilih open image in new tab maka akan terbuka image di tab baru dan anda bisa mengcopy urlnya.

Baca Juga : Cara Membuat Menu Navigasi Scroll Ke Samping Valid AMP

2. Setelah mendapatkan url gambar, kemudian kopi code dibwah ini dan terapkan pada postingan artikel dengan metode HTML (berada tepat pada sudut kiri atas / sebelah compose) sesuaikan posisi dimana akan anda terapkan gambar tersebut.

<amp-img src="Url gambar" alt="Nama gambar" height="400" width="800"></amp-img>

• Ubah url gambar dengan url gambar yang anda inginkan
• Ubah nama gambar sesuai keinginan anda
• hight = tinggi gambar
• widht = lebar gambar

 3. Selain kode di atas ada juga kode yang bisa anda terapkan untuk mengatur posisi seperti :

Untuk posisi gambar AMP di bawah judul
<noscript><img width="640" height="610" alt='nama gambar' src='url gambaranda'/></noscript>

Untuk gambar AMP rata tengah
<div class="img-width-300 img-center">
<div class="post-thumbnail">
<amp-img
alt="nama gambar"
title="judul gambar"
height="490"
layout="responsive"
src="url gambar"
width="640">
</amp-img>
</div></div>

Untuk gambar AMP rata kiri
<div class="img-width-300 img-left">
<div class="post-thumbnail">
<amp-img
alt="nama gambar"
title="judul gambar"
height="490"
layout="responsive"
src="url gambar"
width="640">
</amp-img>
</div></div>

Untuk gambar rata kanan
<div class="img-width-300 img-right">
<div class="post-thumbnail">
<amp-img
alt="nama gambar"
title="judul gambar"
height="490"
layout="responsive"
src="url gambar"
width="640">
</amp-img>
</div></div>


Itulah tadi cara memasang foto pada template AMP blogspot. Silakan dicoba tips ini untuk para penulis blog yang menggunakan template AMP. jika tutorial ini tidak berjalan dengan baik silakan tinggalkan komentar agar masalahnya terselesaikan dan jangan lupa jika artikel ini bermanfaat berkontribusi lah dengan like fanspage kami dan share ke teman-teman tentang artikel ini. terimakasi telah berkunjung. Salam blogger Subang.