Selamat datang di GayaNgeblog

close

Cara menulis artikel di blog AMP
Membuat artikel di blog AMP mempunyai kesulitan tersendiri, apa lagi setiap post artikel terjadi error. Dan GayaNgeblog punya pengalaman kalau salah menulis artikel, iklan adsense tidak bisa muncul otomatis di artikel. Dari pengalaman tersebut GayaNgeblog mempunyai cara untuk membuat artikel di blog AMP.

Cara menulis artikel dari setiap paragrap harus ada tag div


    <div><p align="left">
Ini contoh untuk penulisan posisi text kiri
</div>

INI ADALAH CONTOH DARI PENGGUNAAN KODE DIV ALIGN LEFT, POSISI TEXT JADI SEBELAH KIRI, JIKA LEFT DIRUBAH CENTER MAKA POSISI TEXT AKAN DI TENGAH, JIKA POSISI LEFT DIRUBAH RIGHT, MAKA POSISI TEXT AKAN DI SEBELAH KANAN, JIKA LEFT DIRUBAH JUSTIFY MAKA POSISI TEXT AKAN RATA,


    <div><p align="center">
Ini contoh untuk penulisan posisi text tengah
</div>

INI ADALAH CONTOH DARI PENGGUNAAN KODE DIV ALIGN CENTER, POSISI TEXT JADI SEBELAH DI TENGAH, JIKA CENTER DIRUBAH LEFT MAKA POSISI TEXT AKAN DI KIRI, JIKA POSISI CENTER DIRUBAH RIGHT, MAKA POSISI TEXT AKAN DI SEBELAH KANAN, JIKA CENTER DIRUBAH JUSTIFY MAKA POSISI TEXT AKAN RATA,


    <div><p align="right">
Ini contoh untuk penulisan posisi text kanan
</div>

INI ADALAH CONTOH DARI PENGGUNAAN KODE DIV ALIGN RIGHT, POSISI TEXT JADI SEBELAH DI KANAN, JIKA RIGHT DIRUBAH LEFT MAKA POSISI TEXT AKAN DI KIRI, JIKA RIGHT DIRUBAH JUSTIFY MAKA POSISI TEXT AKAN RATA, JIKA RIGHT DIRUBAH LEFT MAKA POSISI TEXT AKAN RATA KIRI,


    <div><p align="justify">
Ini contoh untuk penulisan posisi text rata
</div>

INI ADALAH CONTOH DARI PENGGUNAAN KODE DIV ALIGN JUSTIFY, POSISI TEXT JADI SEBELAH RATA, JIKA JUSTIFY DIRUBAH LEFT MAKA POSISI TEXT AKAN DI KIRI, JIKA JUSTIFY DIRUBAH RIGHT MAKA POSISI TEXT AKAN RATA KANAN, JIKA JUSTIFY DIRUBAH CENTER MAKA POSISI TEXT AKAN RATA TENGAH


Sekarang cara menyimpan gambar untuk blog amp agar responsive, pertama siapkan dulu gambar yang ada di komputer anda, jika sudah diupload isi descripti gambar dan judul gambar, dan ukuran rubah ke original, seperti dibawah ini


Di atas adalah tahap awal untuk input gambar, selanjutnya atur posisi gambar agar responsive di tampilan mobile dan desktop
Saya ambil contoh url gambar https://4.bp.blogspot.com/-9WAqCwVJJSM/Www0D5xgvYI/AAAAAAAAAqk/FoC4gaFLK6wUctq8_NeX8toL8Ppev2EhACEwYBhgL/s320/contoh%2Bimage.jpg" title="contoh gambar" width="320"
atur gambar dengan format dibawah

  <div class="img-width-500 img-left">
<amp-img alt="Tulis keterangan gambar"
title="Tulis judul gambar"
height="Tinggi Gbr"
Width="Lebar Gbr"
layout="responsive"
src="Url Gbr"></amp-img>
</div>

Untuk img-width sesuaikan dengan img-width-300,.img-width-400, img-width-500, img-width-600,.img-width-700, img-width-800, img-width-900 bisa anda coba masing masing
Untuk img-left sesuaikan dengan posisi yang anda inginkanimg-center, img-rightbisa anda coba masing masing
Contoh posisi gambar di tengah dengan kode

  <div class="img-width-300 img-center">
<amp-img alt="contoh gambar"
title="Gambar AMP"
height="175"
Width="320"
layout="responsive"
src="https://4.bp.blogspot.com/-9WAqCwVJJSM/Www0D5xgvYI/AAAAAAAAAqk/FoC4gaFLK6wUctq8_NeX8toL8Ppev2EhACEwYBhgL/s320/contoh%2Bimage.jpg"></amp-img>
</div>

Maka hasilnya

Gambar di atas jika di simpan maka akan berupa file .jpg, coba anda klik kanan digambar dan save image as
Jika gambar diatas ingin di simpan dengan berupa file .webp maka ikuti format di bawah:


  <div class="img-width-500 img-left">
<amp-img alt="Tulis keterangan gambar"
title="Tulis judul gambar"
height="Tinggi Gbr"
Width="Lebar Gbr"
layout="responsive"
src="Url Gbr">
<amp-img
fallback
alt="Tulis keterangan gambar"
title="Tulis judul gambar"
height="Tinggi Gbr"
Width="Lebar Gbr"
layout="responsive"
src="Url Gbr">
</amp-img>
</amp-img>
</div>

Contoh di gambar

  <div class="img-width-300 img-center">
<amp-img alt="contoh gambar"
title="Gambar AMP"
height="175"
Width="320"
layout="responsive"
src="https://4.bp.blogspot.com/-9WAqCwVJJSM/Www0D5xgvYI/AAAAAAAAAqk/FoC4gaFLK6wUctq8_NeX8toL8Ppev2EhACEwYBhgL/s320-rw/contoh%2Bimage.jpg">
<amp-img
fallback alt="contoh gambar"
title="Gambar AMP"
height="175"
Width="320"
layout="responsive"
src="https://4.bp.blogspot.com/-9WAqCwVJJSM/Www0D5xgvYI/AAAAAAAAAqk/FoC4gaFLK6wUctq8_NeX8toL8Ppev2EhACEwYBhgL/s320/contoh%2Bimage.jpg">
</amp-img></amp-img>
</div>

Pada url gambar pertama s320 tambah dengan -rw jadi s320-rw
Pada url gambar yang ke dua s320 ditetapkan saja
Setelah amp img ke dua ditambah fallback Maka hasilnya seperti gambar ini, coba save as, bukan file .jpg lagi, tapi jadi file .webp

Selanjutnya untuk membuat text memakai bullet, maka formatnya seperti di bawah ini


    <div><p align="left">
<div>JUDUL</div>
<div>
<ul>
<li>bullet pertama</li>
<li>bullet ke dua</li>
<li>bullet ke tiga</li>
<li> dan seterusnya</li>
</ul>
</div>
</div>
maka hasilnya akan seperti di bawah ini

JUDUL
  • bullet pertama
  • bullet ke dua
  • bullet ke tiga
  • dan seterusnya
Reaksi:

You Might Also Like:

Komentar anda sangat beguna untuk blog ini, silahkan tinggalkan komentar anda yang sesuai dengan artikel ini, gunakanlah isi komentar dengan yang baik dan bermanfaat, semua komentar yang tercantum akan ditinjau kembali
BUKA KOLOM KOMENTAR TUTUP KOMENTAR

This website uses cookies to ensure you get the best experience on our website. More Info