Rekomendasi template berbasis AMP HTML terbaru

Vifablog. Template Amp HTML Gratis , Kali ini saya akan berbagi dan membahas mengenai AMP HTML sebelum kalian harus tau apa itu AMP HTML dan pengertian AMP , dan di kesempatan kali ini saya akan berbagi informasi mengenai Tamplate yang sudah mendukung AMP , dan perlu kalian ketahui jika menggunakan Tamplate AMP diwajibkan menggunakan kolom Komentar Disqus ,karena belum mendukung komentar Blogger .

Dan ini adalah beberapa template berbasis AMP  :

• Template AMP Project Versi Kang Ismet

sumber:blog.kangismet.net

Yang pertama adalah template karya kang ismet , di tamplate ini mempunyai tampilan yang minimalis dan hanya menggunakan 1 kolom dihalaman page dan statis , Template ini Free  dari kang ismet ,jadi anda bisa mencobanya ,dan Fitur AMP HTML Blogger Template kang ismet meliputi :

1. AMP Ready
2. 2 Columns on Homepage
3. 1 Column on Page and Static Page
4. Customize AMP Sidebar
5. Share Button
6. etc

Demo     Download     Cara Kostum

• Template AMP Versi 1.0 Kompi Design FREE 

sumber : kompiajaib.com (kompidesign)

Yang Kedua template milik Kompi Design ,ya di template ini di sajikan dengan tampilan 2 Column dan banyak sekali Thumbnail , untuk tamplate ini di berikan secara cuma-cuma Alias Gratis namun untuk Versi updatean dari tamplate ini akan di kenakan biaya , Dan ini Fitur AMP Tamplate V2 kompi design meliputi :

1. AMP Ready
2. 2 Coloums On Hompage , Page , and Static Page
3. Slot Ads
4. etc

                            Demo     Download     Cara Kostum

• Template AMP Versi 2.0 Kompi Design 9$

sumber : kompiajaib.com 

Yang ketiga ini sama seperti sebelumnya milik dari mas Adhy Suryadi Kompi Design , di tampilan yang versi 2.0 lebih bagus dan tidak perlu kostum sendiri ,karena ini premium alias berbayar jadi lebih di mudahkan dan lebih bagus tampilanya dari pada yang 1.0 dan di tamplate yang terupdate V2 ini kalian yang ingin menggunakanya membelinya harganya hanya 9$ cukup murah untuk Template Premium yang sudah berbasis AMP, dan ini Fitur AMP Template V2 Kompi Design meliputi :

1. AMP Ready all pages
2. Latest post on top on homepage
3. 2 Columns on Homepage with custom post (grid and list)
4. 2 Column on Page and 1 column on Static Page
5. Customize AMP Share button (fixed show hide)
6. Custom background for post's title
7. Slot ads ready
8. Customized widget sidebar
9. etc.

                                    Demo    BUY 9$

Itu saja Rekomendasi Template berbasis AMP dari saya ,dan saya ingatkan kembali bagi teman-teman saya tidak menjual Template ,apalagi Plagiat template , karena Link BUY saya arahkan langsung ke website Kompiajaib, terima kasih atas kunjunganya di tunggu komentarnya .

pengertian accelerated mobile pages atau AMP HTML

Vifablog. Penjelasan mengenai AMP, kita akan membahas mengenai pengertian dari  Accelerated Mobile Pages / AMP HTML , 2 tahun lalu pihak Google meliris projek baru yaitu  Accelerated Mobile Pages atau biasa di sebut AMP HTML , AMP HTML sendiri adalah struktur web yang meminimalisir penggunaan JavaScript, CSS dan HTML. AMP HTML mempunyai tujuan agar tampilan halaman website kalian menjadi cepat , tanpa banyak pengaruh JS atau lainnya , anda juga dapat mengetahui kecepatan website anda

AMP HTML sendiri lebih terfokus kepada pengguna Web Mobile dari pada Dekstop , Accelerated Mobile Pages sama seperti laman HTML lainnya, tetapi dengan fungsi yang terbatas yang ditetapkan dan diatur oleh source AMP spec . Sama seperti semua laman web, Accelerated Mobile Pages akan akan dimuat di browser modern maupun aplikasi browsing lainya .

Untuk CSS mungkin scriptnya masih sama , namun yang sedikit berbeda terdapat pada script HTML tersebut semisal tag img ,menjadi amp-img

Untuk render cepat, kita harus menggunakan AMP Javascript Library yang akan merender halaman dan menampilkan video, gambar, iframe dan lainnya dengan asynchronous. Hal yang wajib adanya dalam AMP HTML adalah :

Dimulai dengan <!doctype html>
Menyertakan <html ⚡> atau <html amp>.
Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML.
Menyertakan <meta charset="utf-8">.
Menyertakan <meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head.
Menyertakan AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> pada tag head.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async costom-element="amp-img" ----------------------------
<amp-img
      alt="Curabitur placerat est sem"
      height="350"
      layout="responsive"
      on="tap:lightbox1"
      role="button"
      src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzo84WFkeqC9Bqg6CYJeOe8UJtiHfT3ffk544NCTTfZTltwycznyhE_CAqkHwWEcPuiOEqB68o-hUltrSoh3Uyk_cpG6slxzEpR2CX-1YoeGT7t8sF66fV9vcybkIVHYEapi93HHbLkrL/s1600/Logo-Terbaru-Premier-League-Musim-2016-2017.jpg"
      tabindex="0"
      width="650"></amp-img>
atau yang paling sederhana seperti ini : 

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Beberapa hal yang harus diperhatikan

Dalam membuat web atau blog berbasis AMP HTML , ada beberapa aturan yang perlu di perhatikan semisal :

• Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, dan itu juga tidak boleh lebih dari satu.
• Tidak boleh membuat inline CSS seperti sejenis sidebar , padding , etc .
• Script harus external dan menggunakan script asinkron (asyn)
• Script tidak diperbolehkan menggunakan attribute type='text/javascript'
• etc

Masih banyak aturan-aturanya , dan AMP HTML ini sulit diterapkan pada Template Blogspot , meskipun bisa itu cukup sulit bagi kita yang belum mahir dengan AMP ,karena AMP dikenalkan belum sampai 2 tahun , butuh proses untuk mempelajarinya lebih dalam .

Untuk teman-teman yang ingin lebih tau mengenai AMP HTML kalian bisa kunjungi Official Site nya di www.ampproject.org .

Thanks to Ampproject.org , Google 

NOTE : STOP PEMABAJAKAN , SERTAKAN SUMBER SEBELUM COPAS , TERIMA KASIH ATAS KUNJUNGANYA , SEMOGA DAPAT MENAMBAH WAWASAN KITA :)