Script Komponen AMP HTML untuk Blog Blogger

Standar AMP membatasi penggunakan HTML, CSS, dan JavaScript, dan mengelola pemuatan sumber daya eksternal, seperti gambar, video, dan iklan melalui runtimenya sendiri.

Ini berarti anda tidak dapat menggunakan JavaScript atau elemen sumber daya apa pun yang terkait dengan sumber daya pihak ketiga seperti gambar dan video dalam dokumen AMP Anda.

Untuk menjembatani kesenjangan antara kebutuhan pengguna dan praktik kinerja terbaik, AMP memiliki Komponen khusus yang dapat Anda gunakan menggantikan elemen yang dikecualikan ini.

Komponen AMP

Komponen AMP adalah tag HTML yang spesifik. Mereka berperilaku mirip dengan tag HTML biasa: mereka memiliki tag pembuka dan penutup, atribut, dan kebanyakan dapat ditata dengan CSS. Mereka dapat dengan mudah dikenali, karena mereka selalu memulai dengan awalan amp-.

Berikut ini adalah komponen yang diperlukan untuk blog berbasis AMP.

1. komponen yang digunakan untuk struktur template

amp-accordion
Sebuah akordian memberi jalan bagi pemirsa untuk melihat garis besar konten dan melompat ke bagian atau pilihan mereka sesuai keinginan mereka.

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

amp-ad
Cara menampilkan Iklan di file HTML AMP Anda.

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

amp-analytics
Elemen amp-analytics dapat digunakan untuk mengukur aktivitas pada dokumen AMP.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

amp-carousel
Komponen amp-korsel memungkinkan menampilkan beberapa potongan konten serupa sepanjang sumbu horizontal.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

amp-form
Ekstensi bentuk amp memungkinkan penggunaan kolom formulir dan masukan dalam dokumen AMP.

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

amp-iframe
Gunakan amp-iframe untuk menyematkan konten ke file AMP melalui iframe.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

amp-image-lightbox
Komponen lightbox amp-image memungkinkan pengguna untuk memperluas gambar untuk mengisi area pandang.

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

amp-install-serviceworker
Komponen amp-install-serviceworker memungkinkan instalasi pekerja layanan melalui asal yang sama atau melalui Google AMP Cache.

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>

amp-lightbox
Komponen amp-lightbox memungkinkan adanya "lightbox" atau pengalaman serupa - dimana pada interaksi pengguna, komponen mengembang untuk mengisi area pandang, sampai ditutup oleh pengguna.

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>

amp-list
Komponen amp-list mengambil konten dinamis dari titik akhir CORS JSON dan membuatnya menggunakan template yang disediakan.

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

amp-mustache
Template amp-mustache adalah sistem template sederhana yang terstruktur berdasarkan mustache..

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

amp-selector
Amp-selector memungkinkan pengguna memilih dari daftar pilihan.

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

amp-sidebar
Sidebar menyediakan cara untuk menampilkan konten meta yang ditujukan untuk akses sementara (tautan navigasi, tombol, menu, dll.).

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

amp-social-share
Ekstensi Social Share menyediakan antarmuka umum untuk tombol berbagi, ditata untuk saling melengkapi.

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

amp-sticky-ad
amp-sticky-ad menambahkan dukungan untuk unit iklan yang selalu mengambil tempat tetap di area pandang di file HTML AMP Anda.

<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

2. Komponen yang digunakan untuk Konten blog

amp-dailymotion
Embed dailymotion video ke file AMP HTML Anda.

<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>

amp-facebook
Komponen amp-facebook memungkinkan embedding posting maupun video ke file AMP.

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>

amp-fit-text
amp-fit-text memungkinkan Anda mengatur ukuran dan kecocokan teks dalam area tertentu.

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

amp-instagram
Tanamkan video dan foto instagram ke file HTML AMP Anda.

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

amp-jwplayer
Embed video jwplayer di file HTML AMP Anda.

<script async custom-element="amp-jwplayer" src="https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js"></script>

amp-pinterest
Komponen amp-pinterest memungkinkan embedding tombol Pin It atau widget pin.

<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>

amp-soundcloud
Putar trek soundcloud dari dalam file HTML AMP.

<script async custom-element="amp-soundcloud" src="https://cdn.ampproject.org/v0/amp-soundcloud-0.1.js"></script>

amp-twitter
Embed tweets ke file AMP HTML Anda.

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

amp-video
Menyematkan video ke file HTML AMP Anda.

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

amp-vimeo
Embed Vimeo video dalam file HTML AMP Anda.

<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>

amp-vine
Embed video Vine dalam file HTML AMP Anda.

<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>

amp-youtube
Menyematkan video YouTube ke file HTML AMP Anda.

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Petunjuk: Paste kode Script yang dibutuhkan tepat diatas </head>

Untuk setiap detil pada tiap komponen akan saya urai pada postingaan selanjutnya

Share this post