DroidBuzz Free Responsive AMP HTML Blogger Template

- Januari 03, 2017


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.

Advertisement

17 komentar

avatar

Bang koq ada iklannya ? hilanginnya gimana ?

avatar

Sudah saya update artikelnya mas, selamat mencoba.

avatar

mas gimana cara menghilangkan auto readmore di homepage template ini

avatar

Masnya mau biar gambar sama judul artikel aja yah yang muncul??

avatar

semua artikel mas, jadi homepage isinya full seperti postingan ^_^

avatar

Masih bingung sih mas, atau maksudnya mau buat satu kolom aja mas seluruh postingan..?? Dan homepage juga..?? Tanpa sidebar..??

avatar

bukan mas, kalo di homepage template mas sekarang kan otomatis readmore tu, artikelnya ke potong otomatis kalo di homepage, nah caranya biar artikel di homepage tu utuh seperti template2 bawaan blogger gitu mas ^_^

avatar

Bisa aja sih mas, nanti saya buatkan mas.

Tunggu saya liburan r kerja mas yah.

avatar

terima kasih banyak mas ^_^

avatar

wuih keren, bahkan ID GA dipublikasikan :-d

avatar

Wkwkwk, salah saya waktu itu gak edit lagi untuk slot iklannya mas.. 😅😅

avatar

gan, tombol searchnya kalo versi mobile gak bisa digunain. tolong perbaikannya gan..

avatar

mas, profil box koq g nongol ya di tempatku pdhl dlm setingan sdh sy tampilkan... mohon pencerahannya mas...
kodeposq.blogspot.com

avatar

Mohon pencerahanya om cara ngilangin kode iklan yg ada di postingan gimana ya ?

avatar

Ada tuh tambahannya gan. Tutorialnya

avatar

kalau cara buat related post agan tau kah caranya ?saya udh setting tapi error terus gk mau tampil :) maaf banyak tanyak gan

Berkomentarlah jika memang ada pertanyaan apapun itu, admin akan membalasnya jika tidak ada kesibukan lainnya. Terima kasih
EmoticonEmoticon

 

Start typing and press Enter to search