Droidbuzz Free Responsive Amp Html Blogger Template

Sebagai salah satu percobaan aku yang terbilang sangat berhasil dan aku sangat puas dengan hasilnya, dan juga untuk menyambut tahun gres dan menyambut blog gres aku yang sedang kau baca ini, aku akan membagikan template yang sudah aku modifikasi ini.

Dari sisi design tidak banyak perubahan hanya beberapa bab saja yang aku ubah biar menjadi lebih fresh dari seblumnya, dan perubahan dasar warna pada template ini yang menjadi lebih elegan sih berdasarkan pandangan aku 😏. Untuk setting template ini sudah aku sertakan pada filenya yah.

Blogger Template Style

Name : DroidBuzz Responsive AMP HTML Blogger Template
Version : 1.0
Publish Date : Tidak ada
Intructions : Cara Memasang Template Blogger
Konfigurasi : Baca Disini Bro
Designer : Iwan Efendi
URL : http://iwanberbagi.com
Published : http://situstemplate.com

Fitur Template

- Responsive
- Valid Structured Data
- Navigation Mobile by Kang Ismet
- Popular Post Thumbnail Code by Simini v1 bungfrangky
- Adsense Ready
- HIGH CTR
- Fast Loading
- Valid AMP HTML
- Related Post
- Search Box disamping Header
- Slot Iklan Diantara Posting Tampilan Mobile
- Sosial AMP Button Custom
- Disqus Comments
- Subscribe Box Di Footer
- Dan Lain-lain

Template ini sudah aku sesuaikan dengan impian aku pribadi, jikalau ada yang kurang mohon dimaklumi, kedepannya akan aku perbaharui juga jikalau aku sudah mendapat feel yang terbaik. Dan template ini juga aku minimalisir dari hosting file biar tidak terjadi error dikemudian hari.

Namun, untuk hosting file Disqus yang tidak dapat dihindarkan alasannya memang harus dihosting biar dapat dipakai dengan baik. Saran terbaik dari aku kau harus menghosting sendiri filenya yang kini aku hosting sebagai berikut :

<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>

File hostingnya sudah aku miror di firebase dan dapat diakses disini. Untuk menggantikan file hosting dari github berikut yang isyarat lengkapnya dapat kau lihat :

<div id="comments"></div> <script>   window.addEventListener('message', receiveMessage, false);    function receiveMessage(event) {     if (event.data) {       var msg;       try {         msg = JSON.parse(event.data);       } catch (err) {}       if (!msg)         return false;       if (msg.name === 'resize') {         window.parent.postMessage({           sentinel: 'amp',           type: 'embed-size',           height: msg.data.height         }, '*');       }     }   }    function getQueryVariable(variable) {     var query = window.location.search.substring(1);     var vars = query.split('&');     for (var i = 0; i < vars.length; i++) {       var pair = vars[i].split('=');       if (pair[0] == variable) {         return pair[1];       }     }     return (false);   }      var css = '#disqus_thread {font-family:' + getQueryVariable('fontBodyFamily') + '} a {color:#' + getQueryVariable('fontLinkColor') + '}',     head = document.head || document.getElementsByTagName('head')[0],     style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet){   style.styleSheet.cssText = css; } else {   style.appendChild(document.createTextNode(css)); } head.appendChild(style);                  var disqus_shortname = getQueryVariable('shortname');                 var disqus_blogger_current_url = getQueryVariable('canonicalurl');                  if (!disqus_blogger_current_url.length) {                     disqus_blogger_current_url = getQueryVariable('url');                 }                  var disqus_blogger_homepage_url = getQueryVariable('homepageurl');                 var disqus_blogger_canonical_homepage_url = getQueryVariable('canonicalhomepageurl');                      (function() {                         var bloggerjs = document.createElement('script');                         bloggerjs.type = 'text/javascript';                         bloggerjs.async = true;                         bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_item.js';                         (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);                     })();                  (function() {                     var bloggerjs = document.createElement('script');                     bloggerjs.type = 'text/javascript';                     bloggerjs.async = true;                     bloggerjs.src = '//'+disqus_shortname+'.disqus.com/blogger_index.js';                     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(bloggerjs);                 })(); </script> 

https://cdn.rawgit.com/Iwan27/DroidBuzz/master/amp_disqus_buzz.html

Satu lagi ada juga hosting related post sebagai berikut :

<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>

Kamu dapat menghosting sendiri biar lebih aman, namun kalau gak mau ribet yah dibiarin aja yang itu.

https://cdn.rawgit.com/Iwan27/DroidBuzz/master/related-droidbuzz.net.html

Namun, semoga saja tidak akan terjadi error oleh hostingnya, alasannya pengalaman aku memakai hosting github belum pernah terjadi error sama sekali. Namun apa salahnya kita berjaga-jaga. Jika ada yang ingin dibahas dapat melalui form komentar aja yah, semoga betah dan bermanfaat templatenya.

Update 13 Februari 2017, Menghapus iklan Adsense pada template.

Hapus semua code yang seakan-akan bahkan sama kode-kode berikut:

<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>

<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> 

    <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> 

    <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> 

Jika masih ada yang dibingungkan, kau dapat komentar kita bahas pribadi dikomentar yah.

Berbagi :