The AMP format is supported by multiple platforms, including Google Search. If the page listed in Google search results has a valid AMP version, Search may direct the mobile user to the cached AMP.
Goomsite template blogger is already valid AMP HTML, as recommended by google at this time. Goomsite is a blogger template that has been valid AMP HTML with modern Bussines display style so that the look of this template looks professional.
As for how to set this Goomsite template for valid AMP HTML, you can see below
SETTING
Logo
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQACScsQJuQfda3XYXMPorXKj8lhGEzkMZscwZY3Zzu46RwQfOGo1dIuHak-Nq50OYleu_vDZUDDPLTGW16ii0DKWb_7uEZm_XmrXYfyc06RE-czX0URkKGD9bKJIpQXJdsYtcT3HMJ5t3/s1600/logo.pngCari dan ganti url logo blog diatas, rekomendasik ukuran logo 300x300
Primary Menu
<nav id='menu'>
<input aria-label='Checkbox' type='checkbox'/>
<div class='check'>
<span></span><span></span><span></span>
</div>
<ul>
<li class='satu'><a href='/'>WINDOWS</a></li>
<li><a href='#'>ANDROID</a></li>
<li><a href='#'>GIVEWAY</a></li>
<li><a href='#'>PENULIS TAMU</a></li>
</ul>
</nav>
Ganti url # dengan url link tujuan
Menu Grid
<div class='nav-amp1'>
<div class='nav_grid'>
<ul class='sc_vertical'>
<li class='count-nav'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Apps</span></span></a></li>
<li class='count-nav1'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Theme</span></span></a></li>
<li class='count-nav2'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Games</span></span></a></li>
<li class='count-nav3'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Rom</span></span></a></li>
<li class='count-nav4'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Tips</span></span></a></li>
<li class='count-nav5'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Review</span></span></a></li>
<li class='count-nav6'><a href='#'><span class='icon'></span><span class='items'><span class='label'>News</span></span></a></li>
<li class='count-nav7'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Tutorial</span></span></a></li>
</ul>
</div>
</div>
Ganti Url # dengan URL tujuan
Slider Corousel
<amp-carousel autoplay='' controls='' delay='3000' height='222' type='slides'>
<div class='textslide'>
<span>ROM FULL UPDATE</span>
<p>Kamu bisa menemukan segala jenis ROM di Web ini.</p>
<ul class='button'>
<li><a class='amp-button' href='#' rel='noopener' target='_blank' title='ROM'>CHECK</a></li>
</ul>
</div>
<div class='textslide'>
<span>TUTORIAL ANDROID</span>
<p>Ada berbagai macam tutorial yang mungkin bisa membantu.</p>
<ul class='button'>
<li><a class='amp-button' href='#' rel='noopener' target='_blank' title='Tutorial'>CHECK</a></li>
</ul>
</div>
<div class='textslide'>
<span>TIPS ANDROID</span>
<p>Tips Trick akan selalu di update setiap hari.</p>
<ul class='button'>
<li><a class='amp-button' href='#' rel='noopener' target='_blank' title='Tips'>CHECK</a></li>
</ul>
</div>
</amp-carousel>
Ganti Url # dengan URL tujuan
Menu Grid Icon CSS
.nav_grid ul li{text-align:center;width:23%;float:right;padding:5px}
.nav_grid .fa{color:#fff}
.nav_grid .count-nav .icon:before{content:"\f17b";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav1 .icon:before{content:"\f1fc";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav2 .icon:before{content:"\f11b";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav3 .icon:before{content:"\f10a";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav4 .icon:before{content:"\f0eb";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav5 .icon:before{content:"\f00e";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav6 .icon:before{content:"\f0ac";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav7 .icon:before{content:"\f044";font-family:FontAwesome;font-size:30px}Ganti icon yang ditandai dengan warna kuning dengan icon FontAwetsome, untuk melihat bentuk-bentuk icon silahkan klik link dibawah ini
http://fontawesome.io/icons/
Setelah didapat jenis iconnya silahkan cari CSSnya di link dibawah ini
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Search Box
Search and replace URL demo-purpleamp.blogspot.co.id with your blog URL in HTML below<amp-lightbox id='search_box' layout='nodisplay'>
<div class='lightbox'>
<button class='close_search' on='tap:search_box.close' role='button' tabindex='0' title='Close'>×</button>
<div id='search-box'>
<form action='/search' method='get' target='_blank'>
<input autocomplete='off' autofocus='autofocus' class='search-form' name='q' placeholder='Search...' required='required' type='text'/>
<input name='as_sitesearch' type='hidden' value='demo-purpleamp.blogspot.co.id'/>
<button class='resetbutton' type='reset'><svg viewBox='0 0 24 24'>
<path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#000000'></path>
</svg></button>
</form>
<div class='note_search'>Press Enter To Search</div>
</div>
</div>
</amp-lightbox>
Icon Label on Homepage
/*---- Icon Tag ----*/
a.Islam:before {content:"\f186"}
a.Kuliner:before {content:"\f0f5"}
a.Traveling:before {content:"\f267"}
a.Diary:before {content:"\f212"}
a.Teknologi:before {content:"\f0a0"}
a.Internet:before {content:"\f0ac"}
a.Murottal:before {content:"\f001"}
a.Motivasi:before {content:"\f06c"}
a.Blogger:before {content:"\f121"}
Ganti icon yang ditandai dengan warna kuning dengan icon FontAwetsome, untuk melihat bentuk-bentuk icon silahkan klik link dibawah ini, sedangkan label warna hijau adalah nama label artikel sesuaikan dengan nama label anda, besar kecil font sangat berpengaruh.
http://fontawesome.io/icons/
Setelah didapat jenis iconnya silahkan cari CSSnya di link dibawah ini
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Menu Footer
<div class='amp-menu'><ul>
<li><a href='#' rel='noopener' target='_blank' title='About'>About</a></li>
<li><a href='#' rel='noopener' target='_blank' title='Contact'>Contact</a></li>
<li><a href='#' rel='noopener' target='_blank' title='Privacy'>Privacy</a></li>
<li><a href='#' rel='noopener' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' rel='nofollow noopener' target='_blank' title='DMCA Protection'>DMCA Protect</a></li>
<li><a href='#' rel='noopener' target='_blank' title='Advertise'>Advertise</a></li>
<li><a href='#' rel='noopener' target='_blank' title='Sitemap'>Sitemaps</a></li>
</ul></div>
ganti tanda "#" dengan Url Tujuan
Social Footer
<div class='amp-soc'>
<a class='facebookBtn iconn' href='https://www.facebook.com/xxx' rel='nofollow noopener' target='_blank' title='Facebook'/>
<a class='instagramBtn iconn' href='https://instagram.com/xxx' rel='nofollow noopener' target='_blank' title='Instagram'/>
<a class='twitterBtn iconn' href='https://twitter.com/xxx' rel='nofollow noopener' target='_blank' title='Twitter'/>
<a class='googleplusBtn iconn' href='https://plus.google.com/xxx' rel='nofollow noopener' target='_blank' title='Google+'/>
<a class='youtubeBtn iconn' href='https://www.youtube.com/channel/xxx' rel='nofollow noopener' target='_blank' title='Youtube'/>
</div>
ganti tanda "#" dengan Url Tujuan
Sidebar - Fanspage
<amp-iframe width="300"
height="214"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
scrolling="no"
src="https://cdn.rawgit.com/basrimedia/media/d822862b/goomlike.html?page=goomsite">
</amp-iframe>
ganti username fanspage "goomsite" dengan username fanspage anda
Gambar Parallax
<noscript><img alt="seoamp" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIseqaEqy4RASqK1pgLwOTWAAV-sA_VUKdfFkeW6-jMuk7iku2m5HG9i0AB4vMNNs0x_hDKgYu-fw-AQEEZATg45PFcoq7VUm_njKZQDP26PbV0G4SA2qqzVHHPpNjYy6-EkP1c9ItCUo/s1600/Health2.jpeg" title="seoamp" width="700"></noscript>
Ganti Url Gambar diatas dengan gambar yang akan dipublis sedangkan height = "400" and width = "700" adalah ukuran asli gambar
Gambar 2 dan seterusnya
<amp-img alt="AMP HTML" height="300" layout="responsive" src="https://4.bp.blogspot.com/-EyPxNdd-5Mg/V9oqDTiC2nI/AAAAAAAAGLM/4UxCZ3GrwB06xhnG6O1o23JhK_CZEV9ngCLcB/s1600/Kota%2BDengan%2BPenghasil%2BWanita%2BCantik%2BTerbanyak%2BDi%2BDunia.jpg" width="430"></amp-img>Ganti Url Gambar diatas dengan gambar yang akan dipublis sedangkan height = "300" and width = "430" adalah ukuran asli gambar
Error 404
<div class='error-wrapper'>
<div class='nav-amp1'>
<div class='nav_grid'>
<ul class='sc_vertical'>
<li class='count-nav'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Apps</span></span></a></li>
<li class='count-nav1'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Theme</span></span></a></li>
<li class='count-nav2'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Games</span></span></a></li>
<li class='count-nav3'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Rom</span></span></a></li>
<li class='count-nav4'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Tips</span></span></a></li>
<li class='count-nav5'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Review</span></span></a></li>
<li class='count-nav6'><a href='#'><span class='icon'></span><span class='items'><span class='label'>News</span></span></a></li>
<li class='count-nav7'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Tutorial</span></span></a></li>
</ul>
</div>
</div>
<div class='error_right'>
<div class='error_404'>
<h2>MAAF!</h2>
<h3>404 Error (Halaman Tidak Ditemukan)</h3>
<h4>Halaman ini mungkin sudah dihapus!</h4>
<hr/>
<p>Halaman yang Anda cari mungkin telah dihapus namanya diubah atau sementara tidak tersedia</p>
<p>Coba ikuti langkah berikut :</p>
<ul>
<li>Jika kalian mencari halaman melalui pencarian, pastikan katanya di tulis dengan benar.</li>
<li>Kalian bisa klik tombol <strong><a href='/' title='beranda'>Beranda</a></strong> dan coba cari kembali dengan kata yang benar.</li>
</ul>
</div>
</div>
</div>
Ganti icon yang ditandai dengan warna kuning dengan icon FontAwetsome, untuk melihat bentuk-bentuk icon silahkan klik link dibawah ini
http://fontawesome.io/icons/
Setelah didapat jenis iconnya silahkan cari CSSnya di link dibawah ini
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Reaksi
Masuk di Layout - Blog Post
Subscribe
<div id='subscribeBOX'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=idnxmus' method='get' novalidate='' target='_blank'>
<h4>Langganan Artikel</h4>
<p>Berlangganan artikel Gratis langsung via email...</p>
<label>
<input aria-label='Masukkan Email' class='user-valid valid' name='email' placeholder='Your Email Address...' required='required' type='email'/>
</label>
<input class='Submitter user-valid valid' type='submit' value='Langganan'/>
<input class='user-valid valid' name='uri' type='hidden' value='idnxmus'/>
<input class='user-valid valid' name='loc' type='hidden' value='en_US'/>
</form>
</div>
Ganti Shortname Feeds "idnxmus" dengan shortname feeds anda
Comments Disqus
<div class='comments'>
<div id='open-comment'/>
<div class='disclaimer_box'>
<div class='content'>
<b>Comment Policy :</b> Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
</div>
</div>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' on='tap:komen.show,tutup-komen.show,buka-komen.hide,open-comment.scrollTo("position"="top")' role='button' tabindex='0'>BERI KOMENTAR</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='' id='tutup-komen' on='tap:komen.hide,tutup-komen.hide,buka-komen.show,close-comment.scrollTo("position"="top")' role='button' tabindex='0'>TUTUP KOMENTAR</div>
<div class='disqus' hidden='' id='komen'>
<amp-iframe expr:src='"https://cdn.rawgit.com/Goomsite/bm/7bb5f069/disqus_amp.html?shortname=seoamp&url=" + 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>
</div>
Ganti seoamp Disqus tersebut dengan shortname disqus anda








