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- Pengaturan Navigasi Tampilan Desktop
- Pengaturan Sidebar Pada Tampilan Mobile
- Mengaktifkan Author & Sosial Media
- Mengganti ID DIsqus Comments
- Memasang Google Analytics
- Mengaktifkan Related Post
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.<li><a class='menu-color' href='/'>Home</a>
</li>
<li><a href='http://www.droidbuzz.net/search/label/Aplikasi?&amp;max-results=8'>Aplikasi</a>
</li>
<li><a href='http://www.droidbuzz.net/search/label/Berita?&amp;max-results=8'>Berita</a>
</li>
<li><a href='http://www.droidbuzz.net/search/label/Games?&amp;max-results=8'>Games</a>
</li>
<li class='last'><a href='https://www.android.com/versions/nougat-7-0/'>Nougat</a>
</li>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.
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 :
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='"https://cdn.rawgit.com/Iwan27/DroidBuzz/master/amp_disqus_buzz.html?shortname=droidbuzz-1&fontBodyFamily=sans-serif&fontLinkColor=e8554e&canonicalurl=" + data:blog.canonicalUrl + "&url=" + data:blog.url + "&homepageurl=" + data:blog.homepageUrl + "&canonicalhomepageurl=" + 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>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'>
{
"vars": {
"account": "UA-58221769-3"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>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>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 :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.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>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>height) dengan tinggi gambar tersebut. Contoh gambar sebagai berikut :
<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>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;}
}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=VXEkoXgb4bIVXEkoXgb4bI 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>
<div class="img-center"> seperti pada saat menampilkan gambar tadi.
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>.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.- Masuk menu setelan pada dashbor blogger kamu.
- Bahasa dan Pemformatan.
- Setting Seperti pada gambar.
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'/><script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>https://www.droidbuzz.net/?m=1Atau 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 == "item" and data:blog.isMobileRequest == "false"'>
<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 == "item" and data:blog.isMobileRequest == "true"'>
<amp-ad data-ad-client='ca-pub-6235611333449307' data-ad-slot='1767119270' height='250' layout='responsive' type='adsense' width='300'/>
</b:if>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 == "item" and data:blog.isMobileRequest == "false"'>
<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 == "item" and data:blog.isMobileRequest == "true"'>
<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>Adsense Pada Tampilan mobile Homepage
Kodenya sebagai berikut pada template :
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item" and data:blog.isMobileRequest == "true"'>
<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>
Tambahkan Komentar Sembunyikan