Infinit AMP Blogger Template Tutorial - Helpnext
News Update
Loading...
Infinit AMP Blogger Template Tutorial

Sunday, May 10, 2020

Infinit AMP Blogger Template Tutorial

         Comment   
----YOU ADS---
----YOU ADS---

Customize Theme


Navigation

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan link Anda.

<nav id='menu-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <label class='toggle' for='drop'><span class='fa-bars'>Menu</span></label>
   <input id='drop' type='checkbox'/>
   <ul class='menu'>
      <li><a href='#'>Home</a></li>
      <li>
         <label class='toggle' for='drop-1'>Blogger</label>
         <a href='#'>Blogger</a>
         <input id='drop-1' type='checkbox'/>
         <ul>
            <li><a href='#'>Themes</a></li>
            <li><a href='#'>Plugins</a></li>
            <li><a href='#'>Tutorials</a></li>
         </ul>
      </li>
      <li>
         <label class='toggle' for='drop-2'>Web Design</label>
         <a href='#'>Web Design</a>
         <input id='drop-2' type='checkbox'/>
         <ul>
            <li><a href='#'>Resources</a></li>
            <li><a href='#'>Links</a></li>
            <li>      
               <label class='toggle' for='drop-3'>Tutorials</label>
               <a href='#'>Tutorials</a>         
               <input id='drop-3' type='checkbox'/>
               <ul>
                  <li><a href='#'>HTML/CSS</a></li>
                  <li><a href='#'>jQuery</a></li>
                  <li><a href='#'>Other</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li><a href='#'>Graphic Design</a></li>
      <li><a href='#'>Inspiration</a></li>
      <li><a href='#'>Contact</a></li>
      <li><a href='#'>About</a></li>
   </ul>
<button class='search_icon' on='tap:search_box'>
  <svg viewBox='0 0 24 24'>
    <path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#ffffff'/>
    </svg>
</button>
</nav>

Footer Menu

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan link Anda.

<div class='footer-column'>
  <div class='footer-menu'>
    <h3>Web Tools</h3>
    <ul class='footer2 line'>
      <li><a href='#' title='Contact Form'>Contact Form</a></li>
      <li><a href='#' title='Disclaimer'>Disclaimer</a></li>
      <li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
      <li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
      <li><a href='#' title='Terms of Service'>Terms of Service</a></li>
    </ul>
  </div>
  <div class='footer-menu'>
    <h3>Blogger</h3>
    <ul class='footer2 line'>
      <li><a href='#' title='Menu 1'>Menu 1</a></li>
      <li><a href='#' title='Menu 2'>Menu 2</a></li>
      <li><a href='#' title='Menu 3'>Menu 3</a></li>
      <li><a href='#' title='Menu 4'>Menu 4</a></li>
      <li><a href='#' title='Menu 5'>Menu 5</a></li>
    </ul>
  </div>
  <div class='footer-menu'>
    <h3>About</h3>
    <p class='footer2'>
      Google today announced IT admins can now apply policies to Chrome on Android and iOS.
<div class='clear'/>
<div class='infinimed'>
<a class='facebook' href='#' rel='nofollow' target='_blank'/>
<a class='twitter' href='#' rel='nofollow' target='_blank'/>
<a class='googleplus' href='#' rel='nofollow' target='_blank'/>
<a class='rssfeed' href='#' rel='nofollow' target='_blank'/>
</div>
    </p>
  </div>
</div>

SEO Meta Tag

Buka Blogger, Template, "Edit HTML"

Cari dan ganti semua tulisan xxxxx dengan keterangan blog Anda (Jika tidak diperlukan, hapus atau dibiarkan juga tidak apa-apa).

<meta content='ISI-DENGAN-DESKRIPSI-BLOG' name='keywords'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='NAMA-PENULIS' name='Author'/>
<meta content='https://www.facebook.com/LINK-FAN-PAGE' property='article:author'/>
<meta content='https://www.facebook.com/LINK-PROFIL-FB' property='article:publisher'/>
<meta content='KODE-FB-APP' property='fb:app_id'/>
<meta content='KODE-PROFIL-ADMIN' property='fb:admins'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>

SEO Meta Tag

Buka Blogger, Template, "Edit HTML"

Cari tulisan UA-XXXXXX-Y dan ganti dengan kode Google Analystic blog Anda.

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
  &quot;vars&quot;: {
    &quot;account&quot;: &quot;UA-XXXXXX-Y&quot;
  },
  &quot;triggers&quot;: {
    &quot;trackPageview&quot;: {
      &quot;on&quot;: &quot;visible&quot;,
      &quot;request&quot;: &quot;pageview&quot;
    }
  }
}
</script>
</amp-analytics>

Subscribe Box

Buka Blogger, Template, "Edit HTML"

Ganti kode Infiniteidn di dalam HTML ini dengan user name feedburner blog Anda

<div id='subscribeBOX'>
<div class='emailCol'>
<form action='https://feedburner.google.com/fb/a/mailverify?' method='get' novalidate='' target='_blank'>
<input name='email' placeholder='Your Email' required='required' type='email'/>
  <input name='uri' type='hidden' value='Infiniteidn'/>
  <input class='Submitter' type='submit' value='Subscribe'/>
</form>
</div>
</div>

Komentar Disqus

Buka Blogger, Template, "Edit HTML"

Ganti infinite-1 dengan user name Disqus blog Anda

<div class='disqus-comments' id='disqus_comments'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/Arlina-Design/redvision/c265155f/disqus_amp.html?shortname=infinite-1&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
</amp-iframe>
</div>

Shortcodes


Drop Caps

<span class="first-letter">Your First Letter here</span>

Your First Letter here Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Button

<div>
<ul class="ripplelink button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>


Membagi konten post menjadi dua kolom

<div class="bagidua">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Membagi konten post menjadi tiga kolom

<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Membagi konten post menjadi empat kolom

<div class="bagiempat">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Membuat tabel di postingan

<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Setelan Lain


Disqus


Jika akan menggunakan versi komentar dengan Disqus dan komentar disqus tidak muncul di postingan. Hapus terlebih dahulu komentar yang ada di postingan atau backup terlebih dahulu ke Disqus di pengaturan Disqus.

Gambar di Postingan


Untuk mengurangi error AMP, silakan edit gambar pada postingan secara manual seperti contoh gambar di bawah ini

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s1600/How+to+pack+without+wrinkles.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="How to pack without wrinkles" style="border: none;" data-original-height="683" data-original-width="1024" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s640/How+to+pack+without+wrinkles.jpg" title="How to pack without wrinkles" width="640" /></a></div>

Hapus semua tag style dan ganti img dengan amp-img

<div class="separator">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s1600/How+to+pack+without+wrinkles.jpg"><amp-img alt="How to pack without wrinkles" data-original-height="683" data-original-width="1024" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s640/How+to+pack+without+wrinkles.jpg" title="How to pack without wrinkles" width="640" /></a></div>

Atau Tambahkan <noscript> sebelum tag img dan </noscript> setelah tag penutup img

<div class="separator">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s1600/How+to+pack+without+wrinkles.jpg"><noscript><img alt="How to pack without wrinkles" data-original-height="683" data-original-width="1024" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfalsebJjlRR2nqg88ohreEKrU3XOwAb029v7_E2M0vM71P8B1iO2jAD6SGN5ekO_Tjgrs7nOb5_e1DqsMHQ619qyIxswchIPRlq4NKg7Br27WoHw4HrmV10Ql87F9kLKIhuZbLVlCkzw/s640/How+to+pack+without+wrinkles.jpg" title="How to pack without wrinkles" width="640" /></noscript></a></div>

Nonaktifkan tampilan khusus mobile


Nonaktifkan versi mobile pada template ini, silakan klik Template > Tombol Gear > Pilih Tidak.

----YOU ADS---
----YOU ADS---

Share with your friends

Give us your opinion

How To Use
  • Put the link on the
  • Generate Link box with http:// or https://
  • Use  CTRL + V  on keyboard to put the link.
  • Click Generate button to get encrypted link.
  • Click Copy URL button.
    • Done