iklan banner

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 yaitu sebuah tema blogger yang dibuat, dibangun, dirancang, dan dikembangkan menurut spesifikasi sumber terbuka - Google.

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

 Trik Cara Membuat dan Menulis Artikel di Template Blogger AMP dengan  Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah
Pic: Mongools

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

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

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

Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah


Setidaknya ada 11 langkah yang sanggup kau terapkan apabila ingin menciptakan 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 arahan yang dibutuhkan yaitu arahan ini:

<amp-img src="URL-Gambar" alt=" Trik Cara Membuat dan Menulis Artikel di Template Blogger AMP dengan Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: white;">" height="300" width="250"></amp-img>

Apabila gambar tersebut akan disisipkan (ditambahkan) sempurna di bab bawah judul artikel dari blog kamu, maka arahan 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 arahan di bawah ini:

<div class="img-width-300 img-center"> <div class="post-thumbnail"> <amp-img alt=" Trik Cara Membuat dan Menulis Artikel di Template Blogger AMP dengan  Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: red;">Nama-Gambar" title="Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: red;">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, arahan yang digunakan:

<div class="img-width-300 img-left"> <div class="post-thumbnail"> <amp-img alt=" Trik Cara Membuat dan Menulis Artikel di Template Blogger AMP dengan  Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: red;">Nama-Gambar" title="Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: red;">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=" Trik Cara Membuat dan Menulis Artikel di Template Blogger AMP dengan  Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: red;">Nama-Gambar" title="Cara Menulis Artikel di AMP Theme dengan 11 Langkah Mudah"color: red;">Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img> </div></div>

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

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


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

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

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

Kode yang diharapkan nantinya, untuk ditambahkan di mode HTML pada bab artikel, dan supaya video dari YouTube sanggup ditampilkan di artikel blog kamu:

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

Ubah arahan 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, kemudian bagaimana dengan cara menambahkan video Facebook di postingan blog AMP Blogger Theme?

Salin atau Copy arahan 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 arahan </head> atau </body>

Sedangkan arahan HTML pada artikel blog yang dibutuhkan yaitu arahan 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 arahan 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 arahan HTML yang diharapkan yaitu arahan ini:

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

Perhatikan lagi arahan ini: data-shortcode="URL-Link-Foto-atau-Video" ubah goresan pena arahan 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 arahan 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, kemudian ketuk tombol Bagikan, dan ketuk lagi Sematkan Peta.

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

6. Cara Menyisipkan Status Twitter ke Postingan Blog


Tambahkan arahan 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 menyerupai ini:

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

Contoh Script yang akan didapatkan nantinya menyerupai 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 memakai AMP Blogger Theme, yaitu arahan ini:

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

Ubah goresan pena Nomor-ID-dari-Tweet dengan 874397391104860160 sebagaimana teladan Script yang kau dapatkan tadi.

Itulah panduan tips dan trik perihal langkah-langkah bagaimana cara menciptakan dan/atau menulis artikel (postingan) di blog yang memakai AMP Blogger Theme.

Jika kau mengalami duduk masalah terhadap beberapa arahan (atribut) menyerupai HTML dan JavaScript (Js) di atas, segera laporkan kepada kami.

Source: candysweet-aina.blogspot.com/search?q=cara-menulis-artikel-amp-template
Sumber http://addbloggerthemes.blogspot.com

0 Response to "Cara Menulis Artikel Di Amp Theme Dengan 11 Langkah Mudah"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel