Cara Edit Templat Blogspot Agar Valid AMP

Edit templat blogspot ke amp memang membuat pening kepala. Apalagi bagi blogger pemula yang tidak paham dengan apa itu html css dan kode pemograman lainnya.

Pusing, pasti iya!

Nyerah? jangan dong, berikut ini adalah beberapa cara dalam mengedit templat blogspot sehingga valid amp.

Tips berikut ini berdasar dari apa yang telah saya lakukan untuk mengedit templat saya yang kacau balau.

<span style="font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif;"> ... </span>

dan

<div style="text-align: justify;"> ... </div>

Apa Anda kenal kode itu? bila Anda sering melakukan posting menggunakan mode visual kode tersebut jelas tidak akan pernah Anda kenali. Namun bila Anda sering melakukan posting dalam mode visual maupun text, sudah pasti Anda mengenali kode tersebut.

Dalam AMP mode, kode tersebut akan membuat blog Anda mengalami eror pada saat test amp. Jadi sebaiknya hapus kode tersebut. atau ganti dengan <div></div> atau <span></span>

 

Menghilangkan Kode Siluman authorization.css dan bundle.css

Berikutnya adalah kode siluman seperti yang dikatakan oleh kang Andy. Bagaimana tidak, bila kita melihat dengan page source, kode tersebut akan terlihat dengan jelas. Akan tetapi ketika Anda masuk pada menu edit html, kode tersebut akan hilang bagaikan ditelan hantu.

Ini dia kode siluman tersebut

<link type='text/css' rel='stylesheet' 
href='https://www.blogger.com/static/v1/widgets/4171472146-widget_css_bundle.css'/>
dan

<link type='text/css' rel='stylesheet' 
href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=3431015817693173044&zx=c418a2b8-ac3c-4cfa-8efe-d0f2cee4c0c9'/>

Kode tersebut menjadi salah satu biang kerok kegagalan Anda saat mencoba memvalidasi ke dalam html 5.

Nah, cara berikut ini pada dasarnya bukanlah menghapus, akan tetapi menyembunyikan kode tersebut.

berikut caranya

  • Cari kode <head> kemudian ganti dengan
    &lt;head&gt;
  • Selanjutnya ganti kode </head> dengan
    &lt;!--<head/>--&gt;
  • Kemudian klik save template

 

Menghapus kode ‘quickedit’

Templat blog amp berbeda dengan templat blog pada umumnya. Bila pada mode biasa, kita menambah widget dengan add widget mungkin tidak akan berpengaruh apa-apa. Namun berbeda dengant templat amp. Meskipun itu tidak mempengaruhi templat secara keseluruhan, akan tetapi ‘quickedit’ yang muncul ketika kita menambah widget baru pada sidebar itu akan membuat eror pada validasi amp.

Untuk mengatasi masalah ini sebenarnya cuku mudah. Cukup anda cari kode berikut

 

<b:include name='quickedit'/>

 

Bila ketemu hapus kode tersebut.

Perlu diingat, bahwa kode tersebut sudah ada penutupnya, jadi bila bawahnya ada kode </b:include>, jangan kode hapus kode tersebut, karena akan muncul pesan eror ketika anda klik save.

 

Memunculkan Gambar pada Halaman Valid AMP

Bagi sebagian orang postingan tanpa gambar serasa sayur tanpa garam. Udah pake micin tapi garam kurang, ya tetep gak enak hehe

Khusus untuk menampilkan gambar pada halaman valid amp yaitu menggunakan kode berikut ini

<div class="thumb-post">
<noscript><img src="hxxp" width="650" height="350" alt="XXXXX"/>
</noscript></div>

itu adalah kode untuk menampilkan gampar thumbnail di halaman homepage. Ingat halaman homepage, jadi gambar tidak akan muncul ketika kita mengklik link tersebut.

Sedangkan untuk menampilkan gambar lain pada halaman tersebut, gunakan kode berikut ini

<amp-img src="url-image-disini"
 width="1080"
 height="610"
 layout="responsive"
 alt="AMP HTML"></amp-img>

Silahkan Anda sesuaikan sendiri ukurannya dengan layout blog Anda.

 

Cara membuat tampilan gambar responsive pada AMP blog

Seringkali kita bermasalah dengan gambar yang pusing menentukan berapa ukuran panjang dan lebar.

Agar tampilan gambar yang kita posting sesuai dengan ukuran device, berikut ini adalah kode yang disediakan oleh pengembang yang dapat Anda gunakan

<div class="resp-img">
  <amp-img alt="Deskripsi image"
    src="Link Image"
    layout="responsive"
    width="640"
    height="427"></amp-img>
</div>

Kode tersebut ditempatkan pada post editor bukan edit templat. Ganti html untuk gambar pada blog Anda dan gunakan kode di atas. Jangan lupa menaruh CSS kode berikut ini pada editor templat

.resp-img { 
max-width: 700px; }

Letakkan kode di atas di bawah kode

<style amp-custom>

 

Add a Comment

Your email address will not be published. Required fields are marked *