Cara Menulis Artikel di Template Blog AMP
Template blog AMP atau Accelerated Mobile Pages ialah template blogger yang terkenal memiliki kecepatan Loading Blog diatas rata-rata.
Menurut Google, AMP ialah laman web yang sengaja dirancang berdasarkan spesifikasi sumber terbuka.
Laman AMP pun merupakan hasil validasi dalam Cache AMP Google sehingga tayangan yang dihasilkan nantinya akan sangat lebih cepat dari pada template blog Non-AMP yang sering kita temukan.
Buat teman2 yang masih belum paham tentang AMP, silahkan simak disini - Laman Resmi AMP Blogger Template.
Baca Juga: Pengalaman dalam Menggunakan Template Blog AMP
Seperti yang kita tahu, template AMP berbeda dengan template biasanya karena template AMP dirancang berdasarkan spesifikasi sumber terbuka. Contoh saja, untuk menyisipkan gambar saja, tidak asal begitu saja, harus ada kode pengantar agar gambar bisa dianggap valid oleh AMP template.
Pada postingan kali ini, saya ingin mengulas tentang bagaimana cara menggunakan template AMP seperti memasang cara membuat artikel, memasang gambar, pasang video (YouTube dan Facebook), cara menyisipkan foto Instagarm di dalam artikel AMP template, cara memasukkan gambar di AMP template dan masih banyak lagi.
Note:
Sebelum mau memasukkannya ke dalam artikel, pastikan gambar yang akan disisipkan di dalam artikel template AMP harus di upload dulu ke media penyimpanan Online.
Bisa saja itu Picasa web Google, Google Drive, ImageBam atau lainnya. Terserah.
Yang pasti, gambar tersebut tidak boleh hilang. Ada tuh, media penyimpanan online yang memang bersifat penyimpanan Online, tapi dikemudian hari akan dihapus oleh pihak mereka lantaran FREE alias Gratis.
Baca Juga: Cara Lain Posting Gambar dan Video di Artikel AMP Template.
Ingat! Height itu adalah Tinggi Gambar, sedangkan Width ialah Lebar Gambar. Silahkan disesuaikan ya, Bro!
#1. Cara Pasang Gambar di Posting - AMP Template Blogger
1. Upload gambar ke Picasa Google
2. Siapkan atau tulis dulu semua artikel hingga selesai
3. Masuk ke mode HTML
4. Gunakan kode dibawah ini:
URL Gambar yang kita dapatkan tadi berasal dari Picasa Google, tempat dimana kita menyimpan gambar tersebut sejak awal tadi.
Sebenarnya, tidak menggunakan Picasa Google juga nggak apa-apa kok. Masih ada ImageBam, Google Drive, atau media penyimpanan gambar online lainnya.
Apabila ingin menyisipkan gambar dibawah judul artikel blog template AMP, gunakan kode dibawah ini:
Caranya hampir sama dengan No. 1 diatas. Silahkan sesuaikan tinggi dan lebar gambar, serta tempat penyimpanan Online-nya.
Nah, apabila ingin pasang gambar di tengah-tengah posting / artikel, gunakan kode dibawah ini:
Ingat... selalu dalam mode HTML dan jangan lupa tandai lokasi dibagian tengah mana yang Anda maksud untuk pemasangan gambar.
Kode untuk pemasangan gambar di template AMP rata kiri:
Untuk rata kanan, kodenya ini:
#2. Cara Pasang Video YouTube di Artikel - Template Blogger AMP
Copy kode dibawah ini, letakkan dibawah kode <head> dan simpan perubahan template.
Gunakan kode dibawah ini untuk pemasangan video YouTube nantinya:
Note: Pada "data-videoid" silahkan masukkan URL video YouTube yang bagian terakhirnya. Contohnya:
Maka URL yang perlu kita ambil saja ialah yang saya warna-merahkan diatas. Cukup itu saja yang perlu di Copas ke kode tadi, tidak perlu semuanya.
#3. Cara Pasang Video Facebook di Artikel - Template Blog AMP
Silahkan pasang JavaScript ini terlebih dahulu di dalam template blog AMP Anda. Kalau tidak, tentunya nggak akan berhasil.
Cari atau buka video yang Anda temukan di Facebook. Pada video, klik kanan dan SALIN URL dari video tersebut. Gunakan kode dibawah ini:
Setelah selesai, silahkan simpan perubahan postingan. Cek kembali apakah berhasil atau tidak.
#4. Cara Pasang Foto atau Video Instagram di Artikel - Template Blog AMP
Pasang dulu kode asinkron ini di dalam template:
Gunakan kode dibawah ini pada artikel (HTML, bukan Compose):
Yang perlu di ingat ialah URL terakhir saja yang perlu di Copas, yang lainnya tidak perlu. Contohnya:
Nah... link yang berada di "URL-Link-Foto-atau-Video" tersebut yang perlu di Copas, "https://instagram.com/p/"-nya tidak perlu.
#5. Cara Menyisipkan Lokasi (Peta) di Artikel - Template Blog AMP
Pasang kode Asinkron ini di dalam template:
Kode yang digunakan di dalam posting ialah:
Buka Google Maps (via Komputer atau Laptop), tentukan Lokasinya, "Bagikan" dan pilih "Sematkan Peta".
Disini silahkan sesuaikan ukuran yang Anda inginkan, kemudian Copy kode yang ditampilkan diatasnya, paste kode tersebut tepat pada src="URL-Lokasi-Disini" sesuai petunjuk kode diatas.
#6. Cara Menyisipkan Tweet dari Twitter di Posting Template Blog AMP
Masukkan kode Asinkron ini dulu ke dalam template:
Jangan lupa, save template!
1. Login Twitter > pilih salah satu Tweet
2. Pada Tweet tersebut, pilih menu "Selengkapnya" atau "More"
3. Tap "Lekatkan Tweet" atau "Embed Tweet"
4. Simpan dulu ke Notepad
Kenapa ke Notepad? Karena ada ID yang harus kita turut pasang juga pada kode pengantara Tweet nantinya. Contohnya ini:
Angka 874397391104860160 tersebut adalah ID dari Tweet. Itu yang sangat diperlukan.
Gunakan kode dibawah ini:
Sampai disini sudah beres. KELAR.
Baca Juga: Pengertian Apa itu Google AMP Blogger Template.
Itulah panduan bagaimana cara memposting artikel di template blogger AMP. Agak ribet ya. Silahkan Bookmark artikel ini apabila Anda membutuhkannya di masa depan nanti. Syukron...*
Template blog AMP atau Accelerated Mobile Pages ialah template blogger yang terkenal memiliki kecepatan Loading Blog diatas rata-rata.
Menurut Google, AMP ialah laman web yang sengaja dirancang berdasarkan spesifikasi sumber terbuka.
Laman AMP pun merupakan hasil validasi dalam Cache AMP Google sehingga tayangan yang dihasilkan nantinya akan sangat lebih cepat dari pada template blog Non-AMP yang sering kita temukan.
Buat teman2 yang masih belum paham tentang AMP, silahkan simak disini - Laman Resmi AMP Blogger Template.
Baca Juga: Pengalaman dalam Menggunakan Template Blog AMP
Seperti yang kita tahu, template AMP berbeda dengan template biasanya karena template AMP dirancang berdasarkan spesifikasi sumber terbuka. Contoh saja, untuk menyisipkan gambar saja, tidak asal begitu saja, harus ada kode pengantar agar gambar bisa dianggap valid oleh AMP template.
Pada postingan kali ini, saya ingin mengulas tentang bagaimana cara menggunakan template AMP seperti memasang cara membuat artikel, memasang gambar, pasang video (YouTube dan Facebook), cara menyisipkan foto Instagarm di dalam artikel AMP template, cara memasukkan gambar di AMP template dan masih banyak lagi.
Cara Menulis Artikel di Template Blog AMP
Note:
Sebelum mau memasukkannya ke dalam artikel, pastikan gambar yang akan disisipkan di dalam artikel template AMP harus di upload dulu ke media penyimpanan Online.
Bisa saja itu Picasa web Google, Google Drive, ImageBam atau lainnya. Terserah.
Yang pasti, gambar tersebut tidak boleh hilang. Ada tuh, media penyimpanan online yang memang bersifat penyimpanan Online, tapi dikemudian hari akan dihapus oleh pihak mereka lantaran FREE alias Gratis.
Baca Juga: Cara Lain Posting Gambar dan Video di Artikel AMP Template.
#1. Cara Pasang Gambar di Posting - AMP Template Blogger
1. Upload gambar ke Picasa Google
2. Siapkan atau tulis dulu semua artikel hingga selesai
3. Masuk ke mode HTML
4. Gunakan kode dibawah ini:
<amp-img src="URL-Gambar" alt="Nama-Gambar" height="300" width="250"></amp-img>
URL Gambar yang kita dapatkan tadi berasal dari Picasa Google, tempat dimana kita menyimpan gambar tersebut sejak awal tadi.
Sebenarnya, tidak menggunakan Picasa Google juga nggak apa-apa kok. Masih ada ImageBam, Google Drive, atau media penyimpanan gambar online lainnya.
Apabila ingin menyisipkan gambar dibawah judul artikel blog template AMP, gunakan kode dibawah ini:
<noscript><img width="250" height="300" alt='Nama-Gambar' src='URL-Gambar'/></noscript>
Caranya hampir sama dengan No. 1 diatas. Silahkan sesuaikan tinggi dan lebar gambar, serta tempat penyimpanan Online-nya.
Nah, apabila ingin pasang gambar di tengah-tengah posting / artikel, gunakan kode dibawah 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>
<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>
Ingat... selalu dalam mode HTML dan jangan lupa tandai lokasi dibagian tengah mana yang Anda maksud untuk pemasangan gambar.
Kode untuk pemasangan gambar di template AMP rata kiri:
<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>
<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>
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>
<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>
#2. Cara Pasang Video YouTube di Artikel - Template Blogger AMP
Copy kode dibawah ini, letakkan dibawah kode <head> dan simpan perubahan template.
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
Gunakan kode dibawah ini untuk pemasangan video YouTube nantinya:
<amp-youtube width="460"
height="250"
layout="responsive"
data-videoid="3Eu7NzzHC84">
</amp-youtube>
height="250"
layout="responsive"
data-videoid="3Eu7NzzHC84">
</amp-youtube>
Note: Pada "data-videoid" silahkan masukkan URL video YouTube yang bagian terakhirnya. Contohnya:
https://www.youtube.com/watch?v=3Eu7NzzHC84
Maka URL yang perlu kita ambil saja ialah yang saya warna-merahkan diatas. Cukup itu saja yang perlu di Copas ke kode tadi, tidak perlu semuanya.
#3. Cara Pasang Video Facebook di Artikel - Template Blog AMP
Silahkan pasang JavaScript ini terlebih dahulu di dalam template blog AMP Anda. Kalau tidak, tentunya nggak akan berhasil.
<script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>
Cari atau buka video yang Anda temukan di Facebook. Pada video, klik kanan dan SALIN URL dari video tersebut. Gunakan kode dibawah ini:
<amp-facebook data-embed-as="video" data-href="URL-Video-Facebook" height="316" layout="responsive" width="476"></amp-facebook>
Setelah selesai, silahkan simpan perubahan postingan. Cek kembali apakah berhasil atau tidak.
#4. Cara Pasang Foto atau Video Instagram di Artikel - Template Blog AMP
Pasang dulu kode asinkron ini di dalam template:
<script async='async' custom-element='amp-instagram' src='https://cdn.ampproject.org/v0/amp-instagram-0.1.js'/>
Gunakan kode dibawah ini pada artikel (HTML, bukan Compose):
<amp-instagram
data-shortcode="URL-Link-Foto-atau-Video"
data-captioned
width="400"
height="400"
layout="responsive">
</amp-instagram>
data-shortcode="URL-Link-Foto-atau-Video"
data-captioned
width="400"
height="400"
layout="responsive">
</amp-instagram>
Yang perlu di ingat ialah URL terakhir saja yang perlu di Copas, yang lainnya tidak perlu. Contohnya:
https://instagram.com/p/URL-Link-Foto-atau-Video/
Nah... link yang berada di "URL-Link-Foto-atau-Video" tersebut yang perlu di Copas, "https://instagram.com/p/"-nya tidak perlu.
#5. Cara Menyisipkan Lokasi (Peta) di Artikel - Template Blog AMP
Pasang kode Asinkron ini di dalam template:
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Kode yang digunakan di dalam posting ialah:
<amp-iframe
width="200"
height="100"
width="200"
height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
src="URL-Lokasi-Disini"> </amp-iframe>
layout="responsive"
src="URL-Lokasi-Disini"> </amp-iframe>
Buka Google Maps (via Komputer atau Laptop), tentukan Lokasinya, "Bagikan" dan pilih "Sematkan Peta".
Disini silahkan sesuaikan ukuran yang Anda inginkan, kemudian Copy kode yang ditampilkan diatasnya, paste kode tersebut tepat pada src="URL-Lokasi-Disini" sesuai petunjuk kode diatas.
#6. Cara Menyisipkan Tweet dari Twitter di Posting Template Blog AMP
Masukkan kode Asinkron ini dulu ke dalam template:
<script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>
Jangan lupa, save template!
1. Login Twitter > pilih salah satu Tweet
2. Pada Tweet tersebut, pilih menu "Selengkapnya" atau "More"
3. Tap "Lekatkan Tweet" atau "Embed Tweet"
4. Simpan dulu ke Notepad
Kenapa ke Notepad? Karena ada ID yang harus kita turut pasang juga pada kode pengantara Tweet nantinya. Contohnya ini:
<blockquote class="twitter-tweet" data-lang="en"><p lang="in" dir="ltr">tweet pertama saya :)</p>— 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>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Angka 874397391104860160 tersebut adalah ID dari Tweet. Itu yang sangat diperlukan.
Gunakan kode dibawah ini:
<amp-twitter data-cards="hidden"
data-tweetid="Nomor-ID-dari-Tweet-tersebut"
height="330"
layout="responsive"
width="390">
</amp-twitter>
data-tweetid="Nomor-ID-dari-Tweet-tersebut"
height="330"
layout="responsive"
width="390">
</amp-twitter>
Sampai disini sudah beres. KELAR.
Baca Juga: Pengertian Apa itu Google AMP Blogger Template.
Itulah panduan bagaimana cara memposting artikel di template blogger AMP. Agak ribet ya. Silahkan Bookmark artikel ini apabila Anda membutuhkannya di masa depan nanti. Syukron...*
Post A Comment:
4 comments so far,add yours
wahhh... cukup komplit nih pembahasan artikelnya, saya bookmark nih biar gak perlu cari kesana kesini lagi untuk urusan AMP...
Jika ada kode yang error mohon diberitahukan gan, kadang ada pembaharuan AMP Google yang gak cocok lagi dengan kode-kode di atas.
Pak bos untuk setting yg responsive itu apa nanti gambar jadi gepeng ga kalau untuk mobile? thanks
Kalo gambarnya kecil-menipis, ukurannya bisa di ubah, tepat pada kode height dan width
Posting Komentar