Cara Memasukkan Gambar Dan Video di Blog Valid AMP - Accelarated Mobile Pages merupakan sebuah projek Google yang sudah lama di buat pada pertengahan tahun 2015. Dengan kehadiran AMP ini, diharapkan para blogger bisa menerapkan template valid AMP pada blog mereka.
Hal ini untuk mempermudah para pengguna mobile ketika mengujungi halaman website anda dengan menggunakan ponsel. Mengingat pengguna mobile didunia saat ini juga sangat banyak, tidak menutup kemungkinan mereka lebih memilih browsing dengan menggunakan ponsel dari pada PC.
Dengan menggunakan template yang valid AMP pada blog kita, itu akan menjadi nilai plus tersendiri bagi Google. Karena template AMP merupakan sebuah terobosan terbaru yang memiliki keunggulan dimana meminimalisir penggunaan CSS, Javascript, dan HTML pada struktur web.
Dengan mengurangi elemen tersebut,tentunya ketika jika kita mengunjungi halaman tersebut akan terasa ringan dan memiliki kecepatan yang maksimal.Namun dibalik semua itu ada hal yang mungkin sedikit ribet jika kita menggunakan template AMP, dimana ada cara tersendiri ketika ingin masukkan gambar dan video pada postingan yang kita buat.
Berbeda dengan template yang tidak valid AMP, kita tinggal mengupload gambar dan video tersebut. Namun ini tidak berlaku pada template AMP, untuk memasukkan gambar maupun video ada beberapa kode yang tidak boleh ditempatkan. Sehingga agar tidak merusak kevalidan template AMP tersebut, kita harus merubahnya terlebih dahulu. Untuk lebih jelasnya silahkan simak ulasan dibawah ini.
Note :
"ID YOUTUBE" isi dengan id Youtube sobat atau id Youtube orang lain yang mengunggah video tersebut.
3. Dengan menempatkan kode tersebut, maka secara otomati video akan masuk. Namun tidak otomatis play, jika ingin otomatis play silahkan tambahkan kode autoplay> setelah id Youtube. Jadi akan seperti ini.
Hal ini untuk mempermudah para pengguna mobile ketika mengujungi halaman website anda dengan menggunakan ponsel. Mengingat pengguna mobile didunia saat ini juga sangat banyak, tidak menutup kemungkinan mereka lebih memilih browsing dengan menggunakan ponsel dari pada PC.
Dengan menggunakan template yang valid AMP pada blog kita, itu akan menjadi nilai plus tersendiri bagi Google. Karena template AMP merupakan sebuah terobosan terbaru yang memiliki keunggulan dimana meminimalisir penggunaan CSS, Javascript, dan HTML pada struktur web.
Dengan mengurangi elemen tersebut,tentunya ketika jika kita mengunjungi halaman tersebut akan terasa ringan dan memiliki kecepatan yang maksimal.Namun dibalik semua itu ada hal yang mungkin sedikit ribet jika kita menggunakan template AMP, dimana ada cara tersendiri ketika ingin masukkan gambar dan video pada postingan yang kita buat.
Berbeda dengan template yang tidak valid AMP, kita tinggal mengupload gambar dan video tersebut. Namun ini tidak berlaku pada template AMP, untuk memasukkan gambar maupun video ada beberapa kode yang tidak boleh ditempatkan. Sehingga agar tidak merusak kevalidan template AMP tersebut, kita harus merubahnya terlebih dahulu. Untuk lebih jelasnya silahkan simak ulasan dibawah ini.
Cara Memasukkan Gambar Dan Video di template valid AMP
" <div style="text-align:justufy;"> "
atau
" <div style="text-align:center;">
<img src="url gambar.png" alt="gambar"/>
</div> "
Coba anda lihat kode diatas! Itu merupakan kode untuk memasukkan gambar pada template yang tidak valid AMP.
Dalam template AMP kode tersebut tidak bisa digunakan alias dilarang agar template yang anda pakai tetap valid AMP. Maka dengan terpaksa kita harus merubah kode tersebut dengan kode yang valid AMP secara manual. Bagaimana caranya? ikuti cara dibawah ini :
Cara memasukkan gambar di template AMP
1. Setelah anda selesai mengupload gambar pada postingan, matikan link yang terdapat pada gambar tersebut. Ini bertujuan agar nanti kita bisa menambahkan kode tag <no script> dan </no script> pada akhir tag agar gambar yang di masukkan nantinya tidak doble.
2. Ubah dalam mode HTML, jangan pakai yang compose agar kita bisa mengedit html dalam postingan tersebut.
3. Cari kode <div class="separator" style="clear: both; text-align: center;"> kemudian ubah menjadi <no script> dan beri akhiran </no script>.
4. Save atau simpan.
Cara diatas bisa anda gunakan jika hanya satu gambar yang anda masukkan ke dalam postingan. Namun jika dalam satu postingan terdapat 2 gambar anda bisa mengikuti cara berikut ini :
1. Ubah kedalam mode html terlebih dahulu.
2. Kemudian silahkan masukkan kode dibawah ini tempat dimana anda ingin meletakkan gambar tersebut.
<amp-img src="URL GAMBAR"
width="500"
height="500"
layout="responsive"
alt="Deskripsi Gambar">
</amp-img>
Note :
"URL GAMBAR" silahkan isi dengan url gambar anda
"Width" untuk menentukan lebar gambar
"height" untuk menentukan tinggi gambar
"Deskripsi Gambar" untuk menentukan deskripsi gambar
silahkan anda susaikan dengan keinginan
3. Save atau simpan.
Cara memasukkan video di template AMP
1. Sebelum memasukkan video dalam postingan, silahkan edit template anda dengan memasukkan kode berikut di bawah kode <head>.
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
2. Untuk memasukkan videonya gunakan kode ini.
<amp-youtube width="480"
height="270"
layout=responsive data-videoid="ID YOUTUBE"
</amp-youtube>
"ID YOUTUBE" isi dengan id Youtube sobat atau id Youtube orang lain yang mengunggah video tersebut.
3. Dengan menempatkan kode tersebut, maka secara otomati video akan masuk. Namun tidak otomatis play, jika ingin otomatis play silahkan tambahkan kode autoplay> setelah id Youtube. Jadi akan seperti ini.
<amp-youtube width="480"
height="270"
layout=responsive data-videoid="ID YOUTUBE" autoplay>
</amp-youtube>
Baca juga :
Dalam sebuah template AMP untuk tag style tidak ijinkan, dan untuk mengatasinya sebagai contohnya syle dengan kode <div class="separator" style="clear: both; text-align: center;"> anda ubah menjadi <div>. Kode tersebut harus anda terapkan pada tag style berikutnya, agar template anda tetap valid AMP.
Ok sobat sekian dulu postingan pada kesempatan kali ini, jika ada yang ingin ditanyakan silahkan tinggalkan pada kolom komentar dibawah ini. Semoga bermanfaat.