Ahmad Dawami
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/AVvXsEgFE2Tj9u1PBsZ6iqotUPKHJCIEgCYK2_25JLI7MMlWIAhNfZEDqux-bgzDfmgAEWWFZ8TfJO1W4-KCFiBFBy7TzyNHsTdYt7eNA35WVGf2xODdNgxO8X9r0L69h4q0LO3uU-sRCA5Clyw/w247/iman-sani-header-logo.jpg
Cari dan ganti url logo blog diatas, rekomendasik ukuran logo 247x277
Primary Menu
<nav id='menu'>
<input aria-label='Checkbox' type='checkbox'/>
<div class='check'>
<span/><span/><span/>
</div>
<ul>
<li class='satu'><a href='/' title='Home'>HOME</a></li>
<li><a href='/' rel='noopener' target='_blank' title='Penulis Tamu'>PENULIS TAMU</a></li>
<li><a href='/' rel='noopener' target='_blank' title='Blog Roll'>BLOG ROLL</a></li>
<li><a href='/p/about-me.html' rel='noopener' target='_blank' title='About'>ABOUT</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 class='items'><span class='label'>FragM</span></span></a></li>
<li class='count-nav1'><a href='#'><span class='icon'/><span class='items'><span class='label'>InspirT</span></span></a></li>
<li class='count-nav2'><a href='#'><span class='icon'/><span class='items'><span class='label'>HighL</span></span></a></li>
<li class='count-nav3'><a href='#'><span class='icon'/><span class='items'><span class='label'>News</span></span></a></li>
<li class='count-nav4'><a href='#'><span class='icon'/><span class='items'><span class='label'>Citizen</span></span></a></li>
<li class='count-nav5'><a href='#'><span class='icon'/><span class='items'><span class='label'>Opini</span></span></a></li>
<li class='count-nav6'><a href='#'><span class='icon'/><span class='items'><span class='label'>Bisnis</span></span></a></li>
<li class='count-nav7'><a href='#'><span class='icon'/><span class='items'><span class='label'>KnowL</span></span></a></li>
</ul>
</div>
</div>
Ganti Url # dengan URL tujuan
Menu Grid Icon CSS
.nav_grid .count-nav .icon:before{content:"\f186";font-family:FontAwesome;font-size:30px}
nav .icon:before{content:"\f186";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav1 .icon:before{content:"\f0f5";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav2 .icon:before{content:"\f267";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav3 .icon:before{content:"\f212";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav4 .icon:before{content:"\f0a0";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav5 .icon:before{content:"\f0ac";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav6 .icon:before{content:"\f001";font-family:FontAwesome;font-size:30px}
.nav_grid .count-nav7 .icon:before{content:"\f06c";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
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'>Business</span></span></a></li>
<li class='count-nav1'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Fashion</span></span></a></li>
<li class='count-nav2'><a href='#'><span class='icon'></span><span class='items'><span class='label'>News</span></span></a></li>
<li class='count-nav3'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Health</span></span></a></li>
<li class='count-nav4'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Tech</span></span></a></li>
<li class='count-nav5'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Sport</span></span></a></li>
<li class='count-nav6'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Music</span></span></a></li>
<li class='count-nav7'><a href='#'><span class='icon'></span><span class='items'><span class='label'>Word</span></span></a></li>
</ul>
</div>
</div>
<div class='error_right'>
<div class='error_404'>
<h2>SORRY!</h2>
<h3>404 Error (page not found)</h3>
<h4>That page seems to be taking a break!</h4>
<hr/>
<p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p>
<p>Please try the following :</p>
<ul>
<li>That page you are looking for was either deleted, moved or wasn't really there in the first place.</li>
<li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li>
<li>You can browse to our <strong><a href='/' title='beranda'>Beranda</a></strong> and plan your own break there.</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='disqus' hidden='' id='komen'>
<amp-iframe expr:src='"https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=kompi-design&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>
Ganti kompi-design Disqus tersebut dengan shortname disqus anda
