Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah

Tutorial: Tips & Trik Cara Membuat dan Menulis Artikel di Template Blogger AMP dengan 11 Langkah Mudah

AMP Blogger Theme adalah sebuah tema blogger yang dibuat, dibangun, dirancang, dan dikembangkan berdasarkan spesifikasi sumber terbuka - Google.

Karena spesifikasinya yang bersifat sumber terbuka; membuat hasil validasi dalam Cache AMP Google (atau: tayangan) pun terasa lebih cepat terbuka, termuat, atau ditampilkan apabila dibandingkan dengan template blogger biasa.

Pic: Mongools

Sayangnya, ada sedikit kebingungan apabila ingin menulis artikel di template blogger.

Tema Blogger yang di bangun dari bahan dasar default (bawaan) tema dari Blogger, sangat berbeda dengan template blogger yang di bangun dari elemen-elemen yang berasal dari AMP Blogger Templates.

Semisal ketika ingin memasang gambar, video pribadi, video dari YouTube; hingga cuitan (status) dari Twitter, Instagram, dan Facebook.

Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah

Setidaknya ada 11 langkah yang bisa kamu terapkan apabila ingin membuat dan/atau menulis postingan blog di AMP Blogger Templates.

Ketika artikel ini dipublikasikan oleh kami, template blogger Accelerated Mobile Pages (AMP) masih dalam kondisi BETA. Dalam artian, masih dalam percobaan yang dilakukan oleh Google. Kami tidak tahu apakah tutorial ini masih berfungsi atau tidak.

1. Cara Memasang Gambar di Postingan Blog Template Blogger AMP

Jika ingin menambahkan gambar di postingan pada template blog AMP, maka kode yang dibutuhkan adalah kode ini:

<amp-img src="URL-Gambar" alt="Nama-Gambar" height="300" width="250"></amp-img>

Apabila gambar tersebut akan disisipkan (ditambahkan) tepat di bagian bawah judul artikel dari blog kamu, maka kode yang dibutuhkan:

<noscript><img width="250" height="300" alt='Nama-Gambar' src='URL-Gambar'/></noscript>

Selanjutnya apabila ingin menampilkan dan/atau memasang gambar di tengah-tengah artikel blog, gunakan kode di bawah ini:

<div class="img-width-300 img-center">
<div class="post-thumbnail">
<amp-img alt="Nama-Gambar" title="Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img>
</div></div>

Kalau ingin menambahkan gambar TEPAT di sebelah rata kiri pada template blogger AMP, kode yang digunakan:

<div class="img-width-300 img-left">
<div class="post-thumbnail">
<amp-img alt="Nama-Gambar" title="Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img>
</div></div>

...sedangkan untuk rata kanan, kodenya ini:

<div class="img-width-300 img-right">
<div class="post-thumbnail">
<amp-img alt="Nama-Gambar" title="Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img>
</div></div>

Pertanyaannya yakni dari mana URL Gambar tersebut bisa didapatkan? Kamu bisa mengandalkan Picasa Google, ImageBam, Google Drive, atau tempat penyedia penyimpanan media (foto/video) gratis secara Online lainnya.

2. Cara Menambahkan (Embed) Video YouTube di Artikel AMP Blogger Theme

Jika di atas tentang bagaimana cara memasang gambar, selanjutnya bagaimana cara menambahkan video YouTube di artikel blog pada template blog AMP Google?

Sangat mudah; kamu hanya perlu menyimpan kode JavaScript (Js) khusus YouTube di bawah ini, TEPAT di atas kode </head> atau </body>

<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>

Kode yang diperlukan nantinya, untuk ditambahkan di mode HTML pada bagian artikel, dan agar video dari YouTube bisa ditampilkan di artikel blog kamu:

<amp-youtube width="460"
height="250"
layout="responsive"
data-videoid="Nzz3Eu7HC84">
</amp-youtube>

Ubah kode Nzz3Eu7HC84 dengan tautan (URL) dari video YouTube yang akan di embed ke postingan blog nantinya.

3. Cara Memasang (Embed) Video Facebook di Artikel AMP Blogger Theme

Jika di atas merupakan tutorial untuk video YouTube, lalu bagaimana dengan cara menambahkan video Facebook di postingan blog AMP Blogger Theme?

Salin atau Copy kode JavaScript (Js) di bawah ini:

<script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>

...di atas kode </head> atau </body>

Sedangkan kode HTML pada artikel blog yang dibutuhkan adalah kode di bawah ini:

<amp-facebook data-embed-as="video" data-href="URL-Video-Facebook" height="316" layout="responsive" width="476"></amp-facebook>

Kemudian ketuk tombol Publikasikan (Publish) pada artikel yang sudah siap untuk dibagikan ke pembaca.

4. Cara Memasang Gambar/Video Instagram di Postingan Blog AMP Blogger Theme

Pertama, tambahkan dulu kode JavaScript (Js) asinkron di bawah ini di dalam template blogger:

<script async='async' custom-element='amp-instagram' src='https://cdn.ampproject.org/v0/amp-instagram-0.1.js'/>

Untuk kode HTML yang diperlukan adalah kode ini:

<amp-instagram
data-shortcode="URL-Link-Foto-atau-Video"
data-captioned
width="400"
height="400"
layout="responsive">
</amp-instagram>

Perhatikan lagi kode ini: data-shortcode="URL-Link-Foto-atau-Video" ubah tulisan kode URL-Link-Foto-atau-Video dengan tautan URL dari foto atau video yang akan disematkan (ket: embed).

5. Cara Embed Lokasi di Postingan Blog pada AMP Blogger Theme

Seperti sebelum-sebelumnya, tambahkan JavaScript (Js) asinkron di bawah ini terlebih dahulu:

<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>

Untuk kode HTML pada artikelnya sendiri:

<amp-iframe
width="200"
height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
src="URL-Lokasi-Disini">

</amp-iframe>

Saran terbaik dari kami, gunakan Google Maps saja. Caranya yaitu tentukan lokasi dulu, lalu ketuk tombol Bagikan, dan ketuk lagi Sematkan Peta.

Akhiri sesi ini dengan mengganti (mengubah) tulisan URL-Lokasi-Disini dengan URL dari lokasi/peta posisi yang sudah ditentukan sebelumnya.

6. Cara Menyisipkan Status Twitter ke Postingan Blog

Tambahkan kode Asyncron di bawah ini:

<script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>

Selanjutnya biar tidak bingung, langkah-langkah awalnya seperti ini:

• Masuk ke Twitter, pilih salah satu cuitan (status) dari Twitter
• Ketuk pada cuitan Twitter tersebut, pilih menu Selengkapnya atau tulisan More
• Ketuk menu Lekatkan Tweet atau Embed Tweet
• Akan muncul Script, dan simpan Script di Notepad atau dimana saja

Contoh Script yang akan didapatkan nantinya seperti ini:

<blockquote class="twitter-tweet" data-lang="en"><p lang="in" dir="ltr">tweet pertama saya :)</p>&mdash; ariefghozaly (@ariefghozaly) <a href="https://twitter.com/ariefghozaly/status/874397391104860160?ref_src=twsrc%5Etfw">June 12, 2017</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Kode yang perlu ditambahkan di dalam artikel blog yang menggunakan AMP Blogger Theme, adalah kode ini:

<amp-twitter data-cards="hidden"
data-tweetid="Nomor-ID-dari-Tweet"
height="330"
layout="responsive"
width="390">
</amp-twitter>

Ubah tulisan Nomor-ID-dari-Tweet dengan 874397391104860160 sebagaimana contoh Script yang kamu dapatkan tadi.

Itulah panduan tips dan trik tentang langkah-langkah bagaimana cara membuat dan/atau menulis artikel (postingan) di blog yang menggunakan AMP Blogger Theme.

Jika kamu mengalami masalah terhadap beberapa kode (atribut) seperti HTML dan JavaScript (Js) di atas, segera laporkan kepada kami.

Source: https://tipsseokiller.blogspot.com/2018/01/cara-menulis-artikel-amp-template.html

Labels: Tutorial Blogger

Thanks for reading Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah. Please share this article.

Share this post