Cara Menulis Artikel di Template Blog AMP
Template blog AMP atau Accelerated Mobile Pages ialah template blogger yang populer mempunyai kecepatan Loading Blog diatas rata-rata.
Menurut Google, AMP ialah laman web yang sengaja dirancang menurut 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 perihal 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 alasannya ialah template AMP dirancang menurut spesifikasi sumber terbuka. Contoh saja, untuk menyisipkan gambar saja, tidak asal begitu saja, harus ada isyarat pengantar biar gambar sanggup dianggap valid oleh AMP template.
Pada postingan kali ini, aku ingin mengulas perihal bagaimana cara memakai template AMP menyerupai memasang cara menciptakan 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 dihentikan hilang. Ada tuh, media penyimpanan online yang memang bersifat penyimpanan Online, tapi dikemudian hari akan dihapus oleh pihak mereka karena FREE alias Gratis.
Baca Juga: Cara Lain Posting Gambar dan Video di Artikel AMP Template.
Ingat! Height itu ialah Tinggi Gambar, sedangkan Width ialah Lebar Gambar. Silahkan diadaptasi ya, Bro!
#1. Cara Pasang Gambar di Posting - AMP Template Blogger
1. Upload gambar ke Picasa Google
2. Siapkan atau tulis dulu semua artikel sampai selesai
3. Masuk ke mode HTML
4. Gunakan isyarat dibawah ini:
URL Gambar yang kita dapatkan tadi berasal dari Picasa Google, daerah dimana kita menyimpan gambar tersebut semenjak awal tadi.
Sebenarnya, tidak memakai 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 isyarat dibawah ini:
Caranya hampir sama dengan No. 1 diatas. Silahkan sesuaikan tinggi dan lebar gambar, serta daerah penyimpanan Online-nya.
Nah, apabila ingin pasang gambar di tengah-tengah posting / artikel, gunakan isyarat 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 isyarat dibawah ini, letakkan dibawah isyarat <head> dan simpan perubahan template.
Gunakan isyarat dibawah ini untuk pemasangan video YouTube nantinya:
Note: Pada "data-videoid" silahkan masukkan URL video YouTube yang bab terakhirnya. Contohnya:
Maka URL yang perlu kita ambil saja ialah yang aku warna-merahkan diatas. Cukup itu saja yang perlu di Copas ke isyarat 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 isyarat 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 isyarat asinkron ini di dalam template:
Gunakan isyarat 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 isyarat Asinkron ini di dalam template:
Kode yang dipakai 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 isyarat yang ditampilkan diatasnya, paste isyarat tersebut sempurna pada src="URL-Lokasi-Disini" sesuai petunjuk isyarat diatas.
#6. Cara Menyisipkan Tweet dari Twitter di Posting Template Blog AMP
Masukkan isyarat Asinkron ini dulu ke dalam template:
Jangan lupa, save template!
1. Login Twitter > pilih salah satu Tweet
2. Pada Tweet tersebut, pilih sajian "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 isyarat pengantara Tweet nantinya. Contohnya ini:
Angka 874397391104860160 tersebut ialah ID dari Tweet. Itu yang sangat diperlukan.
Gunakan isyarat 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 populer mempunyai kecepatan Loading Blog diatas rata-rata.
Menurut Google, AMP ialah laman web yang sengaja dirancang menurut 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 perihal 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 alasannya ialah template AMP dirancang menurut spesifikasi sumber terbuka. Contoh saja, untuk menyisipkan gambar saja, tidak asal begitu saja, harus ada isyarat pengantar biar gambar sanggup dianggap valid oleh AMP template.
Pada postingan kali ini, aku ingin mengulas perihal bagaimana cara memakai template AMP menyerupai memasang cara menciptakan 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 dihentikan hilang. Ada tuh, media penyimpanan online yang memang bersifat penyimpanan Online, tapi dikemudian hari akan dihapus oleh pihak mereka karena 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 sampai selesai
3. Masuk ke mode HTML
4. Gunakan isyarat dibawah ini:
<amp-img src="URL-Gambar" alt="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" height="300" width="250"></amp-img>
URL Gambar yang kita dapatkan tadi berasal dari Picasa Google, daerah dimana kita menyimpan gambar tersebut semenjak awal tadi.
Sebenarnya, tidak memakai 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 isyarat 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 daerah penyimpanan Online-nya.
Nah, apabila ingin pasang gambar di tengah-tengah posting / artikel, gunakan isyarat dibawah ini:
<div class="img-width-300 img-center">
<div class="post-thumbnail">
<amp-img alt="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" title="Cara Menulis Artikel di Template Blog AMP"color: red;">Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img>
</div></div>
<div class="post-thumbnail">
<amp-img alt="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" title="Cara Menulis Artikel di Template Blog AMP"color: red;">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="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" title="Cara Menulis Artikel di Template Blog AMP"color: red;">Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img>
</div></div>
<div class="post-thumbnail">
<amp-img alt="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" title="Cara Menulis Artikel di Template Blog AMP"color: red;">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="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" title="Cara Menulis Artikel di Template Blog AMP"color: red;">Judul-Gambar" height="440" layout="responsive" src="URL-Gambar" width="490"> </amp-img>
</div></div>
<div class="post-thumbnail">
<amp-img alt="Cara Menulis Artikel di Template Blog AMP Cara Menulis Artikel di Template Blog AMP"color: red;">Nama-Gambar" title="Cara Menulis Artikel di Template Blog AMP"color: red;">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 isyarat dibawah ini, letakkan dibawah isyarat <head> dan simpan perubahan template.
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
Gunakan isyarat 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 bab terakhirnya. Contohnya:
https://www.youtube.com/watch?v=3Eu7NzzHC84
Maka URL yang perlu kita ambil saja ialah yang aku warna-merahkan diatas. Cukup itu saja yang perlu di Copas ke isyarat 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 isyarat 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 isyarat asinkron ini di dalam template:
<script async='async' custom-element='amp-instagram' src='https://cdn.ampproject.org/v0/amp-instagram-0.1.js'/>
Gunakan isyarat 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 isyarat 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 dipakai 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 isyarat yang ditampilkan diatasnya, paste isyarat tersebut sempurna pada src="URL-Lokasi-Disini" sesuai petunjuk isyarat diatas.
#6. Cara Menyisipkan Tweet dari Twitter di Posting Template Blog AMP
Masukkan isyarat 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 sajian "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 isyarat pengantara Tweet nantinya. Contohnya ini:
<blockquote class="twitter-tweet" data-lang="en"><p lang="in" dir="ltr">tweet pertama aku :)</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 ialah ID dari Tweet. Itu yang sangat diperlukan.
Gunakan isyarat 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...*
0 Response to "Cara Menulis Artikel Di Template Blog Amp"