Selasa, 15 September 2020

CARA MEMBUAT BLOG AMP

cara mudah membuat 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/AVvXsEg98GTozvStAPX5TxHQxpnz1Bs-GMsYTjnzgXSz3Q9QTQ81WZdjA-wS6eKgqHmUm2sPy2bR0A1R3140vzZtADKu8pfTT5kPBkPSzIqyF1JBBSInqHxxsc5eHiiQ_SPCc_vEaZOiftJZIj4c/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/AVvXsEg98GTozvStAPX5TxHQxpnz1Bs-GMsYTjnzgXSz3Q9QTQ81WZdjA-wS6eKgqHmUm2sPy2bR0A1R3140vzZtADKu8pfTT5kPBkPSzIqyF1JBBSInqHxxsc5eHiiQ_SPCc_vEaZOiftJZIj4c/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'/>
  1. 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'/>
  1. 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.
  2. 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

cara menyematkan tweet pada 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
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'/>
  1. 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'/>
  1. 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'/>
  1. 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'/>
  1. 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)

membuat diikuti dengan email valid amp
Contoh Hasil Ikuti Dengan Email

Ikuti melalui Email atau ikuti lewat email adalah fitur artikel dari suatu blog. 

Setiap kali blog membuat update postingan, maka secara otomatis akan terkirim juga ke para pelanggan dari blog tersebut. 

Cara pembuatannya juga sangat mudah. 

Karena disini Anda akan menggunakan jasa FeedBurner, terlebih dahulu terlebih dahulu Anda harus mempunyai ID FeedBurner. 

Agar mempersingkat artikel ini, saya anggap Anda sudah memiliki ID FeedBurner ya ... 

Sekarang ikuti langakah-langkah pemasangan fitur Follow By Email di bawah postingan blog berikut ini:


  1. Pertama, silahkan Anda Salin dulu CSS di bawah ini, kemudian tempelkan di style amp-custom bagian postingan.

.follow-by-email {background: # 444; radius-perbatasan: 4px; margin: 6px 0 0; float: kiri; teks-align: pusat; padding: 12px 0; lebar: 100%}
.follow-by-email masukan {border: 0; background: # 303030; font-size: 13.5px; border: 0; margin: 0; padding: 6px 0; text-align: center; color: # 999; width: 88%}
.follow- melalui email a {background: # 303030; font-size: 13px; border-radius: 4px; display: inline-block; margin: 8px 0 0; width: 82px; height: 27px; line-height: 27px}
.follow -by-email h5 {font-size: 15px; color: #aaa; margin: 0 0 12px}
  1. Kedua, Salin kode berikut dan letakkan di bawah <data: post.body /> pada saat mengedit HTML Themplate Blog.Biasanya akan ada dua atau tiga <data: post.body /> , untuk sementara sobat pilih yang kedua, jika tidak ada yang diharapkan pilih yang ketiga.


<div class = & # 039; follow-by-email & # 039;>
<h5> Dapatkan pembaruan di Kotak Surat Anda </h5>
<input name = & # 039; email & # 039; placeholder = & # 039; Masukkan email Anda & # 039; ketik = & # 039; text & # 039; />
<a href = & # 039; https: //feedburner.google.com/fb/a/mailverify? uri = 
artasindo & amp; loc = en_US & # 039; target = & # 039; _blank & # 039;> Berlangganan </a>
</div>
Ganti ID FeedBurner saya yang berwarna merah tersebut dengan ID FeedBurner Anda.


11. CARA MEMBUAT ARTIKEL TERKAIT ATAU RELATED POSTS UNTUK BLOG AMP

membuat artikel terkait dengan blog amp

Related Post atau Artikel terkait merupakan daftar beberapa artikel berdasarkan label atau kategori artikel. 

Widget ini biasanya di letakkan di bawah postingan blog. 

Namun tak jarang berada dibagian tengah artikel. 

Selain memudahkan pengunjung untuk menjelajahi artikel dengan topik yang sama, postingan terkait atau artikel terkait untuk blog AMP ini juga bertujun untuk memenuhi satu kriteria artikel SEO Friendly, yakni link internal. 

Apabila Anda membuat Blog accelerated mobile page, dan ingin memperbarui widget artikel yang terkait dalam postingan blog AMP, maka ikuti tutorialnya berikut ini: 

1. Silahkan masuk ke akun blogger. 
2. Pilih Tema atau Themplate 
3. Klik Edit HTML
Kemudian letakkan CSS di bawah pada bagian Style Amp Costum .


.related-post {margin: 20px 20px 0; padding: 0}
.related-post h4 {background-color: # 394264; font-size: 20px; margin: 0 0 10px;}
.clear {clear: both;}
@ layar media dan (max-width: 414px) {
.related-post {margin-bottom: 0;}
}

4. Cari kode <data: post.body /> .jika kode tersebut lebih dari satu ( biasanya ada 2 atau 3), maka coba cari yang paling akhir.kemudian letakkan kode berikut di bawah <data: post.body />


<b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<div class = 'related-post'>
<h4> ARTIKEL TERKAIT: </h4>
<b: if cond = 'data: post .labels '>
& # 160;
<b: loop index = 'x' values ​​= 'data: post.labels' var = 'label'> & # 160; & # 160;
<b: if cond = 'data: x == 0'>
<amp-iframe expr: src = '& quot; https: //cdn.rawgit.com/KompiAjaib/kompi-html/master/relatedposts_light.html? url = www.artasindo.com & amp; label = & quot; + data: label.name 'frameborder =' 1 'height =' 300 'layout =' fixed-height 'sandbox =' allow-scripts allow-same-origin allow-modals allow-popups '>
</amp-iframe> & # 160; & # 160; </ b: if> &



pengaturan:
  1. ganti URL www.artasindo.com dengan URL blog Anda
  2. jika tidak berfungsi, coba ubah versi blog http ke versi https .


Perlu diingat bahwa ini hanya berfungsi untuk blog versi AMP / accelerated Mobile Page.tidak akan berfungsi jika digunakan pada blog non AMP. 

Widget ini adalah kreasi dari Sang Master Kang Ady Suryadi.untuk lebih jelasnya silahkan kunjungi blognya langsung di sini KompiAjaib.com. 

Blog Custom AMP nantinya pada hasil pencarian Google akan ditampilkan dengan Ikon Petir. 

Namun tidak semua browser mendukung fitur ini. 

beberapa browser yang terintegrasi seperti Chrome dan Browser bawaan Android atau gadget lain. 

Nah, itu dia cara mudah dan lengkap membuat blog Custom Amp , amp blog, atau Accelerated Mobile Pages Versi Saya.

Cukup mudah bukan cara membuat blog Amp ini? Asal mau belajar seperti saya, tentu tidak ada kata sulit.