CARA MUDAH BUAT BLOG AMP

                           CARA MUDAH BUAT BLOG AMP

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

                                                                                                           

                                    

1. UNTUK MEMBUAT BLOG AMP GUNAKAN TEMPLATE YANG VALID AMP HTML

Blog Custom AMP kian banyak peminatnya, tak terkecuali saya pribadi. 

cara pembuatanya pun sama seperti biasanya. 

Hanya saja, untuk penggunaan kode penyusun template blog berbeda. 

Kalau pada blog Non-Amp Anda bisa saja menggunakan template bawaan blogger. 

Penyebabnya kode mark Up yang di pakai masih dalam bentuk biasa, sedangkan untuk Amp Blog harus berupa AMP HTML. 

Tapi jangan kuatir! blogger Indonesia memang luar biasa, 

selain mahir mengotak-atik kode-kode HTML untuk membuat template, mereka juga dengan ikhlas berbagi template hasil kreasi mereka dengan percuma alias GRATIS. 

Meski ada versi berbayarnya, 

Namun dengan menggunakan template yang versi gratisan saja kita sudah bisa memaksimalkan kegiatan blogging.

Template yang di bagikan juga termasuk template yang AMP valid. 

Jadi Anda tidak perlu lagi repot-repot membuat sendiri. 

Karena untuk membuat desain template blog itu sendiri bukan pekerjaan yang remeh temeh. 

Anda harus tahu, prosesnya Tidak cukup 1 atau 2 jam saja. 

Bahkan, menurut beberapa desainer, template bisa memperkirakan waktu. 

Tahu ini, Anda masih eman mengelurkan ketidakseimbangan untuk layanan Mereka? Kebangetan ...! 

Kecuali jika Anda sudah faham betul tentang Kode HTML atau Amp HTML, template mendesign sendiri tentu akan menjadi sebuah kepuasan yang sudah pasti. 

Namun bagi Anda yang masih pemula pemula, Seperti Saya ini.

Anda hanya perlu mencarinya di internet kemudian di download untuk di gunakan di dalam blog Anda.

2. MEMBUAT POSTINGAN BLOG VALID AMP

Untuk membuat postingan blog yang Valid AMP, tentu tidak sama seperti pada blog Non-AMP. 

Anda harus mengubah dan mengubah beberapa kode HTML menjadi HTML AMP. 

Biasanya secara otomatis akan muncul kode Seperti ini; 
<div style = "text-align: justify;"> </div> pada setiap kolom editor postingan blog.agar bisa valid AMP HTML, hapus saja kode tersebut. 
( beberapa saat lalu kode perataan ini sudah lolos validator amp ) 

Selain kode di atas, sesuai pengalaman saya, ada beberapa kode lain yang tidak sesuai dengan AMP HTML. 

di antaranya Kode Variasi ukuran dan warna huruf yang langsung di letakkan pada postingan.seperti (<font color>, <font size>, <style color>), Border untuk tabel atau gambar, misal <

Untuk memasukkan gambar ada dua jenis gambar yang akan tampil pada setiap postingan blog pada versi Amp ini. 

Pertama , Thumbnail gambar yang akan tampil sebagai gambar utama di atas artikel. 

Cara peletakanya sama seperti biasanya, hanya saja kode gambar harus di apit kode <noscript> dan </noscript> . 

Kode yang harus digunakan seperti ini:

<noscript> <img src = 'URL GAMBAR' alt = 'Nama Gambar Alternatif' /> </noscript>

Contoh:

<noscript> <img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_7XE4rWcvai0nMi0aJknwPPiM2dkXQHiskemqkm8ejIZGiPry_8mWcvmMZHVW58qe93BMhVFBVA1hqoRl4yA8qRIxrDMU2fj3s_JB4eKTaWzs3Uo5AQTCvORnpbsHOo3REn4Dt4UOQqT/s640/%255BUNSET '/ caraDnos" alt>

Kedua , gambar pelengkap yang biasanya akan pasang di tengah atau bawah artikel amp blog. 

Cara pemasanganya, ganti kode img menjadi amp-img . 

Gunakan kode di bawah ini, untuk pemasanganya.

<amp-img alt = 'Nama Alternatif gambar' src = 'URL Gambar' tabindex = '0' layout = 'responsive'> </amp-img>

Contoh:

<amp-img alt = 'nama alternatif gambar' src = 'https: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_7XE4rWcvai0nMi0aJknwPPiM2dkXQHiskemqkm8ejIZGiPry_8mWcvmMZHVW58qe93BMhVFBVA1hqoRl4yA8qRIxrDMU2fj3s_JB4eKTaWzs3Uo5AQTCvORnpbsHOo3REn4Dt4UOQqT/s640/ET%255B' responsif > <amp-img>

3. MEMASANG SCRIPT GOOGLE ANALYTICS VALID AMP HTML

Kode Google Analytics diperlukan untuk meningkatkan jumlah pengunjung blog, jumlah kata kunci perujuk, rasio pentalan ( Rasio Pentalan ), dan lain-lain. 

Cara memasanganya, pada kartun ada dua macam. 

Namun khusus untuk blog custom AMP gunakan cara manual dengan menggunakan analitik skrip di dalam themplate blog. 

Caranya:

1.        Cari kode </head> , Kemudian letakkan script berikut di atas kode </head>tersebut.

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

2.        langkah berikutnya cari kode <body> atau <body itemscope = 'itemscope' itemtype = 'http: //schema.org/WebPage'> pada edit HTML template.dan letakkan script analytics berikut ini tepat di bawah kode tersebut.

<amp-analytics id = 'analytics1' type = 'googleanalytics'>
<script type = 'application / json'> {& quot; vars & quot ;: {& quot; account & quot ;: & quot; UA-82888704-1 & quot; }, & quot; pemicu & quot ;: {& quot; trackPageview & quot ;: {& quot; pada & quot ;: & quot; terlihat & quot ;, & quot; permintaan & quot ;: & quot; tampilan halaman & quot; }}} </script>
</amp-analytics>

Ganti kode analytics yang berwarna merah di atas dengan kode analytics blog Anda.

Kalau mengalami masalah validaitas, silahkan baca solusinya disini

4. MENYEMATKAN ATAU MEMASANG VIDEO YOUTUBE PADA BLOG AMP

Video youtube juga sering digunakan oleh blogger sebagai pelengkap artikel. 

Seperti video tersebut termasuk tutorial, berita, dan lain-lain. 

Terserah Anda meletakkan Video untuk apa? Itu urusan Anda, Bukan urusan Saya. 

Penyematan atau pemasangan video youtube pada blog Biasanya berbeda AMP dengan cara. 

Anda tidak bisa begitu saja kode embed youtube di dalam postingan. 

Meski masih bisa tampil dalam postingan blog Accelerated Mobile Pages, namun pemasangannya akan menjadi penyebab terjadinya error. 

Maka, kita harus menggunakan AMP Youtube, menggunakan sebagai berikut:

1.        Cari kode </head> pada template blog sobat.kemudian pastekan script di bawah ini tepat di atas kode </head> tersebut.

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

2.        Selanjutnya pilih Video youtube yang ingin sobat letakkan pada postingan blog.lihat dan salin URL video youtube tersebut.

Contoh Url Youtube: https://youtu.be/ Sl-_NuDxiFQ

Lihat ID youtube pada URL yang berwarna merah, ID tersebut yang akan kita pakai.

3.        kemudian, gunakan kode seperti di bawah ini:

<amp-youtube width = "480" height = "270" layout = "responsive" data-videoid = " Sl-_NuDxiFQ " autoplay> </amp-youtube>

Ganti ID youtube yang berwarna merah dengan ID youtube yang sobat inginkan.

5. MENYEMATKAN ATAU MENEMPELKAN TWEET PADA POSTINGAN BLOG AMP

Contoh Hasil Embed Tweet

Menyematkan, melekatkan atau melekatkan tweet tertentu pada postingan blog AMP memang sedikit agak rumit. 

Ingat, cuma sedikit.Asal Anda mau belajar, pasti gampang.

BACA JUGA

·         Cara Mengubah Background Blog Accelerated Mobile Pages

·         Cara Membuat Chat Whatsapp Otomatis

·         Cara Mudah Menyimpan Video di Postingan Blog

Prosesnya sedikit rumit Jika di banding dengan blog Non-AMP yang tinggal Copy kode embed dari twitter dan paste di posting blog. 

Namun pada blog Custom AMP, kode embed dari twitter harus sedikit di modifikasi agar valid AMP HTML. 

Caranya ikuti langkah-langkahnya di bawah ini.

1.        Pada saat mengedit templat HTML, cari kode </head> , dan letakkan skrip di bawah ini tepat di atas.

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

2.        kemudian untuk penyematan atau peletakkan Tweet pada posting blog amp, gunakan kode ini:

<amp-twitter width = 486 height = 657 layout = "responsive" data-tweetid = " Letakkan ID TWEET disini " data-cards = "hidden">
</amp-twitter>

Amati contoh URL tweet di bawah ini

<blockquote placeholder class = "twitter-tweet" data-lang = "en">
<p lang = "en" dir = "ltr">
Kami dapat mengonfirmasi bahwa klub telah menyetujui kontrak baru dengan Ars & egrave; ne Wenger <a href = "https://t.co/YZcmNufFrS">https://t.co/YZcmNufFrS </a> </p>
& mdash; Arsenal FC (@Arsenal) <a href =" https://twitter.com / Arsenal / status / 869894000542707712 "> 31 Mei 2017 </a> </blockquote>

Angka yang berwarna merah adalah ID Tweet, angka-angka itu yang nanti kita gunakan, kode lain abaikan saja.

Hasilnya akan terlihat seperti contoh kode di bawah ini:

<amp-twitter width = 486 height = 657 layout = "responsive" data-tweetid = " 869894000542707712 " data-cards = "hidden">
</amp-twitter>

6. MENEMPELKAN STATUS FACEBOOK PADA AMP BLOG

Seperti halnya Menyematkan atau Menempelkan Tweet Pada artikel , postingan Status Facebook juga sering di sematkan atau di lekatkan pada postingan blog. 

Berikut ini caranya:

1.        Cari kode </head> pada edit Template HTML, dan letakkan script berikut di atasnya.

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

2.        selanjutnya gunakan kode di bawah ini untuk pelekatan status facebook pada postingan blog.

<amp-facebook width = "552" height = "303" layout = "responsive" data-href = " LETAKKAN URL STATUS FACEBOOK DI SINI "> </amp-facebook>

Contohnya seperti ini:

<amp-facebook width = "552" height = "303" layout = "responsive" data-href = "https://www.facebook.com/kopralkoclok/posts/10102593740125791"> </amp-facebook>

7. FANSPAGE FACEBOOK MEMASANG WIDGET

Memasang fanspage facebook di dalam blog memang kadang-kadang dibutuhkan juga. 

Tujuanya tentu untuk menarik kunjungan dari facebook.sekaligus mendapat pengunjung setia pada blog Anda. 

Bisa jadi seperti symbiosis Mutualisme.Sama-sama diuntungkan. 

Karena baik Fanspage maupun Blog sama-sama di untungkan. 

Fanspage akan mendapatkan Like dari pengunjung blog, 

Sementara blog akan mendapat kunjungan dari followers fanspage. 

Namun, jika di rasa keberadaan Fanspage yang memperberat pemuatan blog, menjaga Anda mempertimbangkan lagi untuk memasangnya. 

Caranya copy dan paste kode di bawah ini di dalam blog AMP Anda. 

Bisa Anda letakkan di bagian foooter, sidebar, di bawah postingan blog dan lain-lain.

Letakkan widget ini di tempat yang menurut Anda paling tepat.

<amp-iframe width = "300"
height = "214"
sandbox = "allow-scripts allow-same-origin allow-popups"
frameborder = "0"
scrolling = "no"
src = "https: //cdn.rawgit. com / KompiAjaib / kompi-html / master / like-boxfb.html? page = ISI ID FANSPAGE DISINI ">
</amp-iframe>

Penting:

·              Setiap kali menambahkan Gadget, secara otomatis akan muncul ikon obeng untuk mengedit gadget tersebut.

Pada blog Custom Amp, hal ini akan menyebabkan error.

Oleh sebab itu, hapus ikon obengnya.

Caranya, pada edit HTML Themplate cari dan hapus kode ini
<b: include name = 'quickedit' />

Kode di atas adalah hasil kreasi master Saya, Mas Ady Suryadi.untuk lebih lengkapnya silahkan kunjungi situsnya kompiajaib.com

8. MEMASANG IKLAN ADSENSE PADA AMP BLOG

Salah satu tahap tahap bagi blogger adalah dari pemasangan iklan. 

dan yang menjadi primadona adalah iklan dari google adsense. 

Untuk cara pemasanganya pada blog Custom AMP, ikuti langkahnya berikut ini:

1.        Cari kode </head> dan letakkan script berikut di atas kode </head>

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

2.        kemudian setiap kali menginstal kode adsense, gunakan kode seperti di bawah ini.

<amp-ad layout = "fixed-height" height = "250" type = "adsense" data-ad-client = "ca-pub-1111222233334444" data-ad-slot = "369369" >
</amp-ad>

Warna merah adalah ID Adsense dan slot data iklanya.silahkan sesuaikan dengan milik Anda.

9. MEMBUAT SITEMAP UNTUK BLOG AMP

Apa sih sitemap itu? 

Dan apa pula Manfaatnya bagi Situs web atau blog? 

Sepengetahuan saya, Sitemap adalah peta atau daftar isi situs yang menyajikan seluruh isi konten di dalam web atau blog, tanpa terkecuali. 

Mulai dari konten yang paling lama hingga yang terbaru akan ditampilkan dalam peta situs ini. 

Manfaat membuat peta situs dalam blog adalah memudahkan pengunjung untuk " mengobrak-abrik " seluruh isi atau konten blog. 

Selain itu, dengan adanya peta situs tentu juga memudahkan robot mesin pencarian seperti Google, Yahoo, Bing, Baidu dan Yandex untuk merayapi blog Anda, untuk ditampilkan pada hasil pencarian. 

Sehingga memberi peluang lebih besar untuk mendatangkan pengunjung.

Itu artinya, peta situs sangat berpengaruh bagi blog SEO itu sendiri. 

Setidaknya itu sedikit saya tahu.Anda boleh beda pendapat. 

Lalu bagaimana cara membuat sitemap ( untuk Amp Blog )? 

Membuat sitemap pada blog AMP Kustom kita harus menggunakan amp-iframe . 

Memang agak rumit dan butuh ketelatenan. 

Untuk menjalankan Anda harus meng-hosting kode situs terlebih dahulu terlebih dahulu dengan URL hosting dan memakai protokol HTTPS seperti Github dan cdn.ragwit. 

Mengapa harus Protokol HTTPS? 

Karena ada beberapa komponen dari AMP HTML yang hanya bisa berjalan melalui protokol HTTPS. 

Salah satu contoh adalah amp-iframe . 

amp-iframeinilah yang digunakan kita pakai untuk membuat sitemap pada Blog AMP. 

Namun jangan kuatir, Anda tak perlu bersusah payah untuk membuatnya sendiri. 

Karena sudah banyak blogger yang bersedia mengambil peran sebagai tukang coding. 

dan yang lebih membahagiakan lagi, Mereka dengan membagikan kode sitemap hasil karyanya untuk digunakan oleh Blogger lain. 

Anda hanya perlu melakukan sedikit pengubahan kode sebelum memakai di blog AMP. 

Caranya sebagai berikut:

1.        Pada edit HTML Template, cari kode </head> dan letakkan script di bawah ini tepat di atasnya.

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

2.        Langkah berikutnya buatlah halaman baru dengan nama sitemap atau peta situs.

Gunakan mode HTML dan pastekan kode di bawah ini di dalamnya.

<amp-iframe allowfullscreen = "" frameborder = "0" height = "600" layout = "responsive" sandbox = "allow-scripts allow-same-origin allow-popups" src = "https://cdn.rawgit.com /w4hyou/host/f475d7e9/5itemap.html?url=// www.artasindo.com "width =" 500 ">
<amp-img layout =" fill "placeholder =" "src =" https: //1.bp .blogspot.com / -fPlS3N0B2LM / WPhouSSCtGI / AAAAAAAAMeM / lNXFHM_SHXw6iA26u2XBm80CqcE-pfyHACLcB / s1600 / sitemap.jpg "> </amp-img>
</amp-iframe>

Ganti URL yang berwarna merah ( www.artasindo.com ) dengan URL blog Anda, kemudian klik Publikasikan

10. IKUTI MEMBUAT OLEH EMAIL VALID AMP (Subcribe Via Email)

GY GUNAWAN

 
BELAJAR DASAR PEMOGRAMAB WEB

·     ▼  2020 (1)

o  ▼  September (1)

§ CARA MUDAH BUAT BLOG AMP