Setting Template dan Cara Membuat Posting Valid AMP HTML

Termasuk juga cara menampilkan gambar pertama postingan dan juga gambar pendukung artikel yang tidak bisa menggunakan tag img melainkan menggunakan tag amp-img yang harus dilakukan secara manual di edit HTML ketika membuat posting.

Pada laman ini akan saya dokumentasikan beberapa konfigurasi khusus yang harus dilakukan ketika menggunakan template DroidBuzz AMP HTML Blogger Template. Karena kita sendiri tau, jika ingin tetap valid AMP HTML harus mengikuti beberapa peraturan AMP itu sendiri.
Update, untuk yang memakai template ini dan terganggu oleh iklan adsense milik saya, kamu bisa mendownload ulang templatenya diSINI.

DAFTAR ISI

1. Pengaturan Pada Template DroidBuzz
2. Cara Mematikan Tampilan Mobile
Jangan pernah menghapus credit link untuk menghargai sipembuat template ini.
Pada halaman ini akan saya bahas satu persatu, agar memudahkan kamu dalam menyesuikan template ini pada blog kamu. Semoga Bermanfaat.

1. Pengaturan Pada Template

Untuk template ini hanya memerlukan beberapa konfigurasi agar sesuai penggunaannya, mulai dari navigasi hingga ke moderasi facebook comments.

Pengaturan Navigasi Desktop
<li><a class='menu-color' href='/'>Home</a>
</li>
<li><a href='http://www.droidbuzz.net/search/label/Aplikasi?&amp;amp;max-results=8'>Aplikasi</a>
</li>
<li><a href='http://www.droidbuzz.net/search/label/Berita?&amp;amp;max-results=8'>Berita</a>
</li>
<li><a href='http://www.droidbuzz.net/search/label/Games?&amp;amp;max-results=8'>Games</a>
</li>
<li class='last'><a href='https://www.android.com/versions/nougat-7-0/'>Nougat</a>
</li>
Silahkan kamu sesuaikan url dari kode tersebut dan sesuaikan juga nama-namanya yang kamu inginkan.

Pengaturan Navigasi Sidebar Tampilan Mobile
Untuk tampilan pada Sidbar mobile kamu hanya perlu mengatur pada tanda <amp-sidebar id='sidebar' layout='nodisplay' side='left'> hingga tanda pembatas </amp-sidebar> Sesuaikan profile kamu disana dan navigasi nya juga.
Menyesuaikan Author Post Dan Sosial Media
Template ini saya sudah tambahkan author box dan lengkap oleh tombol sosial media. Untuk menampilkannya kamu harus mengaturnya di template tepatnya kamu cari kode ini <section class='about-author'> hingga kode penutup ini </section>. Setelah itu kamu masuk mode tata letak seperti gambar berikut :
Untuk menampilkan author box yang tadi kamu sudah setting, kamu hanya perlu mengatur pada bagian berikut :
Sampai disini seharusnya author boxnya sudah bisa tampil pada blog AMP kamu.

Mengganti Id Disqus Comments
Seperti yang kita tahu blogger comment form belum support dengan arsitektur AMP HTML, ntah kenapa blogger sangat lambat untuk membuat support AMP HTML ini, kita tunggu saja kabar selanjutnya.

Untuk itu kita harus menggunakan Disqus Comments yang tentunya sudah support dengan arsitektur AMP HTML. Untuk itu saya rasa kamu seharusnya sudah memiliki id Disqusnya untuk mengganti id disqus milik saya. Perhatikan kode berikut :
      <b:includable id='disqus-comments' var='post'>
<div class='disqus-comments' id='disqus_comments'>
    <amp-accordion>
        <section>
            <h4>
                <span class='show-more'>Tambahkan Komentar</span>
                <span class='show-less'>Sembunyikan</span>
            </h4>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/Iwan27/DroidBuzz/master/amp_disqus_buzz.html?shortname=droidbuzz-1&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=e8554e&amp;canonicalurl=&quot; + data:blog.canonicalUrl + &quot;&amp;url=&quot; + data:blog.url + &quot;&amp;homepageurl=&quot; + data:blog.homepageUrl + &quot;&amp;canonicalhomepageurl=&quot; + data:blog.canonicalHomepageUrl' frameborder='0' height='333' layout='responsive' resizable='resizable' sandbox='allow-forms allow-scripts allow-same-origin allow-modals allow-popups' width='556'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'/>
</amp-iframe>
        </section>
    </amp-accordion>
</div>
</b:includable>
Pada kode tersebut kamu hanya perlu mengganti id disqus droidbuzz-1 tersebut dengan id milik kamu sendiri.

Memasang Google Analytics
Untuk Google Analytics sudah ada pada template ini juga, namun agar terintegrasi dengan yang kamu miliki harus mengganti kode unik dari kode berikut :
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-58221769-3&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>
</amp-analytics>
Perhatikan kode unik UA-58221769-3 tersebut yang harus kamu ganti dengan kode unik milik kamu sendiri.

Memasang Related Post AMP HTML
Untuk related post AMP HTML ini harus di iframe, sesuai yang diterangkan oleh Kang Ismet pada blognya yang memposting random post untuk blog AMP HTML namun disana menggunakan random post dengan style yang kurang cocok pada template ini.

Saya akhirnya mempeljarinya dari related post yang ada pada template AMP milik Kang Ismet, dan akhirnya bisa juga menyesuaikannya untuk template DroidBuzz ini.
<amp-iframe frameborder='0' height='310' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' src='https://cdn.rawgit.com/Iwan27/DroidBuzz/master/related-droidbuzz.net.html?url=https://www.droidbuzz.net' width='556'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
</amp-iframe>
Silahkan kamu ganti https://www.droidbuzz.net dengan URL blog kamu sendiri, baru nanti related post akan terlihat. Dengan syarat juga kamu harus menggunakan pengalihan HTTPS Blogger.
Untuk kamu yang menggunakan custom domain harus menggunakan SSL (HTTPS) Sertifikat, karena blogger tidak bisa menggunakan SSL maka kamu bisa mengakalinya dengan mengunakan jasa Cloudflare yang sudah saya posting DISINI.

2. Mematikan Tampilan Mobile

Karena template ini memang didesign responsive, dan ada tampilan navigasi yang berbeda pada saat diakses dari perangkat mobile maka kamu harus mematikan tampilan mobilenya. Masuk ke dashboard blogger kamu dan masuk pada menu "Template" dan perhatikan gambar berikut :
Selanjutnya pilih "Tidak. Tampilkan template selular pada perangkat seluler".
Terus klik "Simpan Template".

3. Ketika Membuat Posting

Seperti yang sudah saya singgung tadi, untuk penulisannya berbeda dengan template blogger biasanya jadi dengan dokumentasi ini kamu akan lebih mudah tinggal copy paste aja dan selesai. Ketika kamu posting dan ingin memasang gambar ataupun vidio youtube dibawah ini, kamu harus masuk ke mode HTML bukan mode Compose.
Memasang Gambar Pertama Postingan
Normalnya gambar pertama pada potingan ini akan berfungsi juga untuk thumbnail pada halaman homepage, jadi gambar ini akan mewakili isi artikel kamu. Dan gambar ini bersifat muncul diawal artikel kamu, sebagai contoh kamu bisa lihat pada artikel di blog ini.
<noscript><img src="url-gambar-kamu" width="556" height="333" alt="gambar"/></noscript>
Pada kode tersebut sudah saya atur tinggi dan lebarnya, jadi kamu hanya perlu mencari gambar dengan resolusi yang sesuai. Jadi tugas kamu hanya perlu mengganti url-gambar yang kamu upload dengan gambar kamu sendiri, dan mengganti tag alt nya dengan yang kamu inginkan.

Memasang Gambar Pendukung Lainnya
Selain gambar diatas artikel kamu juga perlu menyesuaikan gambar-gambar yang menjadi pendukung pada artikel kamu, karena jika menggunakan style gambar yang kamu upload akan membuat error validasi AMP HTML itu sendiri.

Jadi dalam hal ini kita harus membuat tag style sendiri, alhamdullilah ketika saya mencoba memaksimalkan ini kang Adhy sudah share caranya di KompiAjaib, dan saya sesuaikan sedikit agar lebih menyatu dengan template DroidBuzz ini.

Penulisan kode untuk lebar full seperti berikut :
<div class="img-center">
<amp-img alt="contoh-gambar"
   height="333" 
   layout="responsive" 
   src="https://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png" 
   tabindex="0" 
   width="556"></amp-img>
</div>
Ganti url-gambar dengan gambar yang kamu upload dan pastikan gambar yang kamu upload mempunyai lebar yang baik, nanti kamu akan mengerti sendiri jika sudah mencobanya, seterusnya kamu hanya perlu menyesuikan tingginya (height) dengan tinggi gambar tersebut. Contoh gambar sebagai berikut :
Penulisan gambar dengan resolusi lebih kecil dan lebih rapi:
<div class="img-center img-width-300">
<amp-img alt="contoh-gambar"
   height="150" 
   layout="responsive" 
   src="https://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png" 
   tabindex="0" 
   width="300"></amp-img>
</div>
Biasanya kode gambar jenis ini yang harus kamu sesuaikan dengan gambar yang ingin kamu gunakan, termasuk juga tinggi dan lebar gambar tersebut, sangat mudah dan kamu harus mengerti dalam menggunakan setiap classnya. Contoh penggunaan pada gambar dari kode tersebut adalah sebagai berikut :
Pada contoh tersebut, saya posisikan gambar ditengah jadi jika kamu ingin menggantinya diposisikan di sebelah kiri kamu harus mengganti classnya. Misalnya img-center Menjadi img-right dan untuk ukuran gambar kamu gunakan img-width-300 menjadi img-width-400 dan seterusnya.

Untuk lebih jelas, Selanjutnya kamu bisa kreasikan sendiri dengan menyesuaikan classnya sebagai berikut :
.img-center{text-align:center;padding-top:15px;padding-bottom:15px;margin:0 auto}
.img-left{clear:left;float:left;margin-bottom:1em;margin-right:1em;text-align:center;}
.img-right{clear:right;float:right;margin-bottom:1em;margin-left:1em;text-align:center;}
.img-width-300,.img-width-400,.img-width-500,.img-width-600{width:100%;text-align:center;clear:both}
.img-width-300{max-width:300px;}
.img-width-400{max-width:400px;}
.img-width-500{max-width:500px;}
.img-width-600{max-width:600px;}
@media screen and (max-width:640px){
.img-width-500.img-left,.img-width-500.img-right,.img-width-600.img-left,.img-width-600.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
@media screen and (max-width:414px){
.img-width-300.img-left,.img-width-300.img-right,.img-width-400.img-left,.img-width-400.img-right{clear:both;float:none;margin:1em auto;text-align:center;}
}
Menambahkan Vidio Youtube Responsive
Untuk pemanggilan id vidio youtube kamu hanya perlu mengambil kode unik vidio youtube yang kamu inginkan, untuk contoh kali ini saya akan memanggil vidio dari Google Allo, yang kalau kita tonton akan memiliki kode url sebagai berikut :
https://www.youtube.com/watch?v=VXEkoXgb4bI
Perhatikan kode unik VXEkoXgb4bI tersebut lah yang akan kita gunakan untuk memanggil vidio youtube AMP HTML, kodenya sebagai berikut :
<div class="img-center">
<amp-youtube data-videoid="VXEkoXgb4bI" height="333" layout="responsive" width="556">
  </amp-youtube>
</div>
Dari kode tersebut akan menampilkan vidio youtube sebagai berikut:
Jika kamu ingin membuatnya dengan tampilan yang lebih kecil, kamu hanya perlu mengganti class <div class="img-center"> seperti pada saat menampilkan gambar tadi.
Menggunakan Kotak Note Buzz
Untuk kamu yang ingin menggunakan Kotak Catatan ini sudah saya contohkan pada awal artikel ini pada form daftar isi yah. Untuk yang mau menggunakannya bisa menggunakan dengan tag berikut :
<div class="note-buzz"> Tulisan Kamu Disini </div>
Untuk css yang mengatur tampilannya kamu bisa sesuaikan yang sudah ada di template yah, lebih tepatnya css tersebut seperti ini :
.note-buzz {
    margin: 16px;
    padding: 8px 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: rgb(0, 108, 172);
    color: #eee
}

4. Pengaturan Tanggal Agar Valid Structured Data

Salah satu syarat agar valid AMP adalah tetap valid structured data template, maka dari itu template ini sudah saya validasi structured data. Namun untuk blog baru kamu harus melakukan konfigurasi sedikit agar tampilan tanggal ketika posting di publish sama seperti pada blog droidbuzz.net.
  1. Masuk menu setelan pada dashbor blogger kamu.
  2. Bahasa dan Pemformatan.
  3. Setting Seperti pada gambar.
Setelah itu klim Simpan Setelan, untuk mengetestnya kamu bisa mencobanya pada structured-data dan masukkan URL kamu atau bisa mencoba juga menggunakan URL droidbuzz.net untuk lebih mudahnya klik disini.

5. Cara Menampilkan Iklan Adsense

Saya hampir lupa menuliskan tentang ini, padahal pengguna template ini pasti nantinya akan menggunakan untuk menampilkan iklan adsense pada blognya yang sudah menggunakan template AMP DroidBuzz ini maupun template AMP yang lainnya.

Untuk script adsense yang biasanya kita tulis seperti berikut ini pada template harus ditinggalkan :
<script async='async' src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>
Karena script tersebut sudah saya ganti dengan script khusus AMP HTML dan nanti kita hanya perlu memanggil iklan adsensenya saja, scriptnya sebagai berikut :
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
Jadi didalam template ini juga sudah saya siapkan iklan adsense yang hanya akan tampil pada tampilan mobile homepage template. Untuk contohnya kamu bisa melihat homepage blog berikut :
https://www.droidbuzz.net/?m=1
Atau nanti kamu bisa lihat screenshotnya dipembahasan bagian Adsense ini.

Adsense Pada Tampilan Desktop dan mobile
Untuk iklan adsense pada tampilan desktop kamu bisa memanggilnya menggunakan widget yang ada pada sidebar maupun yang ada di header dan dibawah header blog. Dan juga kamu bisa menampilkannyanya disamping artikel pada paragraf awal Artikel.

Pada contoh kali ini saya akan memunculkan iklan adsense pada awal postingan blog tampilan desktop, karena saya yakin kamu akan mudah untuk memasang yang menggunakan widget HTML/Javascript Blogger.
        <!-- iklan di bawah judul taruh di sini -->
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
    <div class='buzzads'>
        <amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='300'/>
    </div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
    <amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='300'/>
</b:if>
Perhatikan kode ca-pub-6235611333449307 itu adalah kode unik iklan Adsense milik saya, kamu bisa mendapatkannya dari kode iklan Adsense kamu sendiri. Kamu hanya perlu mengganti kode iklan tersebut Jika kamu masih bingung tentang hal ini kita bahas dikomentar saja yah.

Pada kode tersebut, untuk yang kode adsense pertama hanya akan muncul pada tampilan desktop, dan yang kedua akan muncul pada tampilan mobile saja. Untuk iklan adsense dibawah artikel kamu bisa mencari kode berikut :
        <!-- iklan di bawah postingan taruh di sini -->
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
    <div class='buzz-ad'>
        <amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='556'/>
    </div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
    <div class='buzz-ad'>
        <amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='300'/>
    </div>
</b:if>
Dan sama seperti tadi, kamu hanya perlu mengganti kode unik iklan adsensenya. Secara garis besar, jika kamu hanya ingin persis posisi unit iklannya seperti DroidBuzz blog ini, maka kamu hanya perlu mengganti kode unik iklan adsensenya aja, semuanya.

Adsense Pada Tampilan mobile Homepage
Pada tampilan mobile kamu bisa menampilkan iklan adsense diantara postingan, dan ini sangat bisa menambah penghasilan kamu, menurut saya sih seperti itu. Jika kamu punya pendapat yang lain, mari kita bahas dikomentar yah.

Kodenya sebagai berikut pada template :
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<b:if cond='data:x==0'>
    <div class='post'>
        <span class='title-ads'>Advertisement</span>
        <amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='300'/>
    </div>
</b:if>
<b:if cond='data:x==3'>
    <div class='post'>
        <span class='title-ads'>Advertisement</span>
        <amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='300'/>
    </div>
</b:if>
</b:if>
Seperti halnya yang dilakukan tadi, kamu hanya perlu mengganti kode unik adsense milik saya dengan milik kamu sendiri. Jika kamu tertarik menampilkannya pada tampilan desktop kodenya tinggal kamu aktifkan saja. Karena sudah saya pasang tepat diatas kode tampilan mobile tersebut.

Tambahkan Komentar Sembunyikan