HTML Blogger Posting Valid AMP

Amp Html- Mengunakan AMP HTML Untuk Template Blog Harus menahan hati karena keribetanya.Bagaimana tidak,menulis,menyisipkan gambar dan menambahkan caption pada gambarnya tidak semudah seperti template blog yang bukan AMP pada umumnya.Beberapa yang menyibukkan diantaranya adalah

Amp Html Template Saat Membuat Postingan Baru

Mengunakan Template AMP,Membuat postingan harus pada mood HTML,Bukan compose.Hal ini sudah cukup ribet karena menulis di mood HTML Mengunakan kode macem-macem.Contohnya membuat hurup tebal,Miring dan sebagainya..

Amp HTML Template Ketika Menyisipkan Gambar Pertama

Kodenya adalah seperti di bawah ini

<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjma06sn6kBJcgHc0VxBhQWnd8pyIotQ_NVLCZCuA5mgatqm38i1gVyAHAPuicOvd8Aji2c5ojvUmJL5IPMRb7j8BxFYeywP9KCM0uzXYyXnu3SVuT8fS_nxTct3-oTR5Il3fqM21oszko/s1600/AMP+HTML+.png" width="556" height="333" alt="AMP HTML Blogger Template"/></noscript>

Gambar pertaman maksudnya gambar yang paling atas atau nomer saru dari atas.Di blog otomologi ini sudah di modifikasi.Jadi penampakanya demonya kira-kira seperti gambar yang berada di atas judul post pada postingan ini.

Amp Blogger Template Menyisipkan Gambar Selain Gambar Pertama

Jika postingan perlu mengunakan beberapa gambar maka kode gambar selepas gambar pertama dan gambar-gambar seterusnya adalah seperti berikut:

<amp-img alt="AMP HTML Tablate View"
   height="333"
   layout="responsive"
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjma06sn6kBJcgHc0VxBhQWnd8pyIotQ_NVLCZCuA5mgatqm38i1gVyAHAPuicOvd8Aji2c5ojvUmJL5IPMRb7j8BxFYeywP9KCM0uzXYyXnu3SVuT8fS_nxTct3-oTR5Il3fqM21oszko/s1600/AMP+HTML+.png"
   tabindex="0"
   width="556">
</amp-img>

Maka Hasilnya akan tampak Seperti di bawah ini

AMP Template Destop View [img:Otomologi]]

kode tersebut sememangnya di gunakan hampir pada semua template AMP.Di blog otomologi yang mengadopsi template droidbuzz terdapat Tambahan code CSS dan HTML yang berfungsi untuk merapikan gambar.Kalau Kamu tertarik ingin memakai template blog Otomologi terus download saja templatenya di Disini ,kemudian pelajari sendiri struktur kodenya.

Contoh Kode di otomologi untuk merapikan gambar dan tambahan image caption Valid Amp.Caption adalah keterangan gambarnya

<div class="img-center">
<figure>
<amp-img alt="AMP HTML Tablate View"
   height="333"
   layout="responsive"
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMiu0bMOsZZRqpVbyy5gzw0pPlTc5hpiPpZ4aZ-42haYPJW0f546q5ZRRKQ-Chcry2nWGzw3ZZm-OwV9b8qcWgkTr_dBGgTOCTXPyDa3SpiLNo1G7TsgC195HErz3XyFKcCG1C_LOn_U/s1600/Amp+Blogger+Template+Amp+Html+Mobile+Template.png"
   tabindex="0"
   width="556">
</amp-img>
  <figcaption>Otomologi AMP HTML Mobile & Tablate View[Img:Otomologi] </figcaption>
<figure>
</div>

Penampakan Gambarnya Dan Captionnya Seperti Di Bawah Ini

AMP Template Mobile View [img:Otomologi]]

Yang di mark dengan warna kuning adalah URL gambar saya.Silakan ganti dengan gambar kepunyaan kamu sendiri.

AMP Blogger Template Ketika Menyisipkan Video dari Youtube:

Kalau di dalam postingan terpaksa mengunakan video,maka kodenya seperti di bawah ini

<div class="img-center">
<amp-youtube data-videoid="bJagj_eYHAQ" height="333" layout="responsive" width="556">
  </amp-youtube>
</div>

Yang di tanda dengan mark kuning adalah ID video dari Youtube. Setiap Video di youtube mempunyai ID yang berbeda.Silakan ganti ID nya dengan ID video sendiri.

Maka Hasilnya Seperti di bawah ini

SHARE

Related Posts