Latest News

DroidBuzz Free Responsive AMP HTML Blogger Template

DroidBuzz Free Responsive AMP HTML Blogger Template


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

Dari sisi design tidak banyak perubahan hanya beberapa bagian saja yang saya ubah agar menjadi lebih fresh dari seblumnya, dan perubahan dasar warna pada template ini yang menjadi lebih elegan sih menurut pandangan saya 😏. Untuk setting template ini sudah saya 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 saya sesuaikan dengan keinginan saya pribadi, jika ada yang kurang mohon dimaklumi, kedepannya akan saya perbaharui juga jika saya sudah mendapatkan feel yang terbaik. Dan template ini juga saya minimalisir dari hosting file agar tidak terjadi error dikemudian hari.

Namun, untuk hosting file Disqus yang tidak bisa dihindarkan karena memang harus dihosting agar bisa digunakan dengan baik. Saran terbaik dari saya kamu harus menghosting sendiri filenya yang sekarang saya 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 saya miror di firebase dan bisa diakses disini. Untuk menggantikan file hosting dari github berikut yang kode lengkapnya bisa kamu 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 bisa menghosting sendiri agar 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, karena pengalaman saya menggunakan hosting github belum pernah terjadi error sama sekali. Namun apa salahnya kita berjaga-jaga. Jika ada yang ingin dibahas bisa melalui form komentar aja yah, semoga betah dan bermanfaat templatenya.
Update 13 Februari 2017, Menghapus iklan Adsense pada template.
Hapus semua code yang mirip 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, kamu bisa komentar kita bahas langsung dikomentar yah.

Reaksi:

Berlangganan Via Email

Suka artikel di blog ini, atau ingin dapat template Gratis? nggak ada salahnya untuk berlangganan artikel terbaru dari blog ini langsung via email kamu.

Disqus Comments
How to style text in Disqus comments:Show
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Tool Hide Parse Tool

How to get ID DISQUS - http://disq.us/p/[ID DISQUS]

strong em u strike
pre code pre code spoiler
embed