Download Kerangka Template Blogger AMP Valid dan Responsive

Kerangka (Framework) Template Valid AMP untuk Blogger dan Responsive.

Kesempatan kali ini Shannenpio Creative akan membagikan Project Dasar Template AMP untuk blogger. meskipun ini masih dalam tahap pembuatan atau masih Kerangka (framework) tapi template dasar AMP ini sudah Valid dan CSS yang di terapkan sudah responsive/flexibel. Pada kesempatan lain kerangka ini akan terus di kembangkan sampai layak untuk di komersialkan. Silahkan download (Gratis) jika berniat mengembangkannya sendiri. untuk keterangan cara pemasangan widget dan cara pemakainnya ikuti terus perkembangan artikel selanjutnya.

Download versi Lengkap yang sama dengan sample demo

View Demo
or
Download

Isi pada kerangka template kurang lebih seperti berikut :
HTML Bagian Head - untuk meta tag silahkan ganti dengan meta tag andalan kalian.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='id'> <!-- amp='amp' menandakan bahwa template akan mengunakan struktur AMP -->
&lt;head&gt; <!-- atau <head> -->
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
&lt;!-- /*<b:skin><![CDATA[*//*
-----------------------------------------------
AMP Blogger Template [Info]
Name           : Eden AMP Blogger
Theme License  : Free
----------------------------------------------- */
]]></b:skin>

Bagian Tag conditional pada style amp-custom (Optional).

<style amp-custom='amp-custom'>

<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
/* Style selain item dan statis */

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
/* Style hanya item  */

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
/* Style hanya statis */

</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
/* Style hanya Error */

</b:if>
</style><!-- end amp-custom -->
<!-- Wajib ADA-->
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Component Script wajib AMP

<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

untuk component script lainnya bisa di lihat di sini ampbyexample.com/#components

Sekarang pada bagian Body.
&lt;/head&gt;&lt;!--<head/>--&gt; (opsional) - atau </head>
<body>

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

<div class='wrapper container-fluid' id='wrapper'>
  <div class='row container'>
    <header class='header-wrapper container' id='header-wrapper'>
       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
          <b:widget id='Header1' locked='true' title='Eden AMP Blogger Template (Header)' type='Header'/>
       </b:section>
    </header>

   <!-- penempatan menu disini atau bisa di dalam header -->

<div class='clear'/>
<div class='container' id='outer-wrapper'>
    <div class='row' id='content-wrapper'>
      <div class='main-wrapper' id='main-wrapper' itemprop='mainContentOfPage'>
        <b:section class='main' id='main' showaddelement='no'/>
      </div><!-- main-wrapper -->

    <aside class='sidebar-wrapper ' id='sidebar-wrapper'>
      <b:section class='sidebar' id='sidebar' preferred='yes'/>
    </aside>

    </div><!-- end content wrapper --><div class='clear'/>
</div><!-- end outer wrapper --><div class='clear'/>

  <footer class='footer-wrapper container' id='footer-wrapper'>
     <div class='footer' id='footer'>
       <b:section class='footer' id='footer' preferred='yes'/>
     </div>
  </footer>

</div></div><!-- end row and wrapper -->

&lt;!--<body/>--&gt;&lt;/body&gt;
</HTML>

Kerangka di atas sudah jadi untuk memenuhi template AMP blogger

catatan:

ketika template di SAVE dan saat di Check Validator AMP kemungkinan tidak akan langsung valid.
di karenakan blogger secara otomatis menempatan strukturnya secara default.
maka kita harus mengedit secara manual.
dimana pada template blogger ada element div yang di dalamnya terdapat style secara langsung yang di mana pada struktur AMP itu tidak di bolehkan.

contoh : <div style='clear:both'/> seharusnya penempatannya seperti ini <div class='clear'/> atau element lain yang sejenis.

Keterangan CSS saya ambil dari CSS library bootstrap. namun saya tidak ambil semuanya karena yang di perlukan hanya layout Responsive saja dan selebihnya saya kembangkan sendiri.
berikut contoh sebagian style CSS yang ada pada contoh.

.container-fluid {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
}
.row {
  margin-right:-15px;
  margin-left:-15px;
}
.container {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto;
}
@media (min-width:768px) {
  .container {
    width:750px;
  }
}
@media (min-width:992px) {
  .container {
    width:970px;
  }
}
@media (min-width:1200px) {
  .container {
    width:1170px;
  }
}
.col-2,.col-4,.col-6,.col-8 {
  position:relative;
  min-height:1px;
  padding-right:15px;
  padding-left:15px;
}
@media (min-width:1200px) {
  .col-2,.col-4,.col-6,.col-8 {
    float:left;
  }
}
@media (min-width:992px) {
  .col-2,.col-4,.col-6,.col-8 {
    float:left;
  }
}
@media (min-width:768px) {
  .col-2,.col-4,.col-6,.col-8 {
    float:left;
  }
  .col-2 {
    width:25%;
  }
  .col-4 {
    width:33.33333333%;
  }
  .col-6 {
    width:66.66666667%;
  }
  .col-8 {
    width:75%;
  }
}

Untuk XML Template AMP Blogger keseluruhannya silahkan kalian download pada link di atas. coba terapkan pada template blogger anda, jika ada pertanyaan seputar kerangka template AMP blogger silahkan diskusikan melalui komentar. untuk tingkat lanjut saya akan buat artikel terpisah.

artikel serupa : Template AMP blogger terbaik

Koleksi Template AMP Blogger Terbaik dan Gratis

AMP (Accelerated Mobile Pages)

Tidak di ragukan lagi bahwa dengan template yang mengusung jenis HTML AMP ini hususnya pengguna Blogger sangat berpengaruh terutama untuk kecepatan loading halaman blog. Meskipun sampai saat ini template dengan HTML AMP ini masih dalam pembahasan, karna masih dalam perkembangan dan masih sedikit penggunanya trutama dalam custom artikel yang sedikit ribet dan beberapa alasan masih meragukan nya apalagi kalau sudah berhubungan dengan SEO (Search Engine Optimize) tapi saya gak akan bahas detail SEO di sini. Dalam artikel berbeda saya akan bahas kelebihan dan kekurangannya menggunakan AMP dan apa hubungannya dengan SEO.

Kali ini saya akan bagikan beberapa koleksi dari beberapa sumber pembuat template AMP, tidak ada salahnya kalian mencobanya untuk mersakan perbedaan custom template blogger biasa dengan custom template AMP.

1.AMP Blanterdeamp - by Mas Rio



Amp blogger cukup baik menurut saya meskipun secara pembuatannya template ini sudah di rilis pada tahun 2016, namun sampai saat ini masih banyak yang menggunakannya. di karenakan tampilan yang minimalis dan blog lebih cepat. template ini di bagikan secara gratis meskipun ada yang versi premiumnnya template ini tidak kalah jauh. hanya saja berbeda dengan service dan updatenya. untuk info lebih lengkapnya kunjungi idblanter.

View Demo
or
Download

2.AMP HTML - by Kang Ismet

template dari kangismet ini tampilannya lebih flexible dan modern minimalis ada beberapa kelebihan fitur lainnya seperti custom pada sidebar yang pasti sudah ready AMP.

View Demo
or
Info Download

3.Vletters AMP BLOGGER - Publish Bung Frangki


Vletters AMP BLOGGER ini di publikasin oleh bung frangki.
template AMP ini memiliki banyak fitur-fitur menarik terutama custom home page dan yang pasti responsive. info lengkapnya

View Demo
or
Info Download

4.Kompi Design Blogger AMP - by KOMPI AJAIB


template dari Kompi Ajaib ini di bagikan secara gratis/free namun untuk service update berikutnya akan berbayar alias Premium namun kalian jangan hawatir karna dokumentasi template ini sudah cukup lengkap. dan kalian bisa mengikuti tutorial optimasi menggunakan template AMP agar valid - info lenkap.

View Demo
or
Info Download

5.Gooplus Free AMP Blogger - by www.goomsite.net


Template ini merupakan update dari template AMP lainnya yaitu MDCAMP. untuk tutorial dan fitur lengkapnya kunjungi link download

View Demo
or
Info Download

Jika ada link yang mati infokan dalam kolom komentar. terimakasih

Buat yang ingin membuat template AMP sendiri dan membutuhkan kerangkanya silahkan kalian download pada artikel kerangka template blogger VALID AMP

Template AMP blogger di atas masih sebagian dari banyaknya template blogger AMP terbaik menurut saya. artikel ini akan terus di update jika ada template yang benar cocok dan layak untuk di coba untuk mengoptimalkan kecepatan blog anda.