Kerangka Dasar Template Blogger AMP HTML


TIPS CODE SHARE - AMP atau Accelerated Mobile Pages adalah laman seluler yang dipercepat, yang artinya salah satu HTML yang merender dengan cepat walaupun koneksi internet anda lelet. Meminilisir penggunaan Javascript, Css, dan HTML dengan cepat membuat unggul di prioritas Web Mobile.

Untuk keterangan lebih lanjut bisa anda kunjungi link berikut https://www.ampproject.org/id/learn/about-amp/.

Saya akan membagikan Kerangka Dasar Template Blogger AMP HTML dengan percuma/gratis. Oleh karena itu hargailah saya dengan tidak menghapus link blog ini dalam bagian tcd-footer.

Berikut  ini kerangka dasar Template AMP HTML untuk blogspot/blogger.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<meta content='blogger' name='generator'/>
<title><data:blog.title/></title>
<!-- Meta -->
<script type='application/ld+json'>
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;NewsArticle&quot;,
  &quot;mainEntityOfPage&quot;: {
    &quot;@type&quot;: &quot;WebPage&quot;,
    &quot;@id&quot;: &quot;<data:post.url/>&quot;
  },
  &quot;headline&quot;: &quot;Article headline&quot;,
  &quot;image&quot;: {
    &quot;@type&quot;: &quot;ImageObject&quot;,
    &quot;url&quot;: &quot;http://ganti-url-gambar-thumbnailmu.jpg/&quot;,
    &quot;height&quot;: 800,
    &quot;width&quot;: 800
  },
  &quot;datePublished&quot;: &quot;2015-02-05T08:00:00+08:00&quot;,
  &quot;dateModified&quot;: &quot;2015-02-05T09:20:00+08:00&quot;,
  &quot;author&quot;: {
    &quot;@type&quot;: &quot;Person&quot;,
    &quot;name&quot;: &quot;Namamu&quot;
  },
   &quot;publisher&quot;: {
    &quot;@type&quot;: &quot;Organization&quot;,
    &quot;name&quot;: &quot;Google&quot;,
    &quot;logo&quot;: {
      &quot;@type&quot;: &quot;ImageObject&quot;,
      &quot;url&quot;: &quot;http://ganti-url-gambar-logomu.jpg&quot;,
      &quot;width&quot;: 600,
      &quot;height&quot;: 60
    }
  },
  &quot;description&quot;: &quot;Deskripsi Bloggermu.&quot;
}
</script>
&lt;!-- <b:skin><![CDATA[
#layout #tcd-header{width:40%;float:left}#layout #tcd-main-wrapper{width:60%;float:left;}#layout#tcd-sidebar-wrapper{width:38%;float:right;}#layout ul,ol,li{list-style:none}#layout #tcd-footer{width:100%;float:left;}
]]></b:skin>
<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>
<style amp-custom='amp-custom'>
/* Isikan Code-Code CSS mu disini */
#comments{display:none;} /* dikarenakan komentar bawaan blogger tidak valid AMP maka saya matikan */
</style>
<!-- Jangan dihapus script dibawah ini -->
<script async='async' src='https://cdn.ampproject.org/v0.js'/>
<script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/><script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/><script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/><script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/><script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js'/><script async='async' custom-template='amp-mustache' src='https://cdn.ampproject.org/v0/amp-mustache-0.1.js'/><script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</head>
<body>
<div id='tcd-outer-wrapper'>
<header id='tcd-header-wrapper'>
      <b:section class='tcd-header' id='tcd-header' maxwidgets='1' showaddelement='no'/>
</header>
<div id='tcd-content-wrapper'>
<div itemscope='itemscope' itemtype='http://schema.org/Blog'>
<div id='tcd-main-wrapper'>
  <b:section class='tcd-main' id='tcd-main' showaddelement='no'/>
</div>
<aside id='tcd-sidebar-wrapper'>
 <b:section class='tcd-sidebar' id='tcd-sidebar' preferred='yes'/>
</aside>
</div>
</div>
<footer id='tcd-footer-wrapper'>
<div class='tcd-footer' id='tcd-footer'>
<!-- Tolong Hargai saya dengan menyantumkan link https://tipscodeshare.blogspot.com/ -->
Created template by <a href='https://tipscodeshare.blogspot.com/'>TipsCodeShare</a>. Design by <data:blog.homepageUrl/>.
</div>
</footer>
</div>
&lt;!--</body>--&gt;&lt;/body&gt;
</HTML>




ADS SPACE

Deskripsi ADS.

ADS SPACE

Deskripsi ADS.

Disqus Comments