Membuat komponen AMP HTML blogspot dasar dari awal

Bimbel Jakarta Timur
By -
0
Inspirasi,Ilmu Pengetahuan,

 

Contoh kecil komponen AMP HTML blogspot dari nol kemudian mari kita lakukan bersama-sama untuk melanjutkan hingga amp html blogspot terbaik









<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html amp='amp' lang="en">

&lt;head&gt;

  &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
  <meta charset='utf-8'/>
  <meta content='width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no,minimal-ui' name='viewport'/>
  <link expr:href='data:blog.canonicalUrl' rel='canonical'/>
  <title><data:blog.title/></title>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
  </b:if>
  <!-- Required AMP styles -->
  <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'>

/*<![CDATA[*/
/*

@platform: Blogger
@theme_name:{{Your Theme Name}}
@created: Oct 2016
@last_mod: Oct 2016
@version: 1.0.0

*/
/* BROWSER RESETS - inspired by Denny Febiana Nurhidayat */
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{
  display: block;
}
blockquote, q{
  quotes: none;
}
blockquote:before,
blockquote:after, q:before, q:after{
  content:' ';
  content: none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
/* TYPOGRAHY */
body{
 font: normal normal 16px Helvetica, Arial, sans-serif;
  line-height: 1.428;
  color: #3b3b3b;
}
h1, h2, h3, h4, h5, h6{
  font: normal normal 16px Helvetica, Arial, sans-serif;
  line-height: 1.1;
  color: #333;
  margin-bottom: 10px;
}
h1{
  font-size: 225%;
  margin-top:20px;
  margin-bottom:20px;
}
h2{
  font-size: 200%;
  margin-top:20px;
}
h3{
  font-size: 150%;
  margin-top:10px;
}
h4{
  font-size: 125%;
  margin-top:10px;
}
h5{
  font-size: 100%;
  margin-top:10px;
}
h6{
  font-size: 80%;
  margin-top:10px;
}
p{
  margin-bottom: 10px;
}
a:link, a:visited{
  text-decoration: none;
  color: #06c;
}
b, strong{
  font-weight:700;
}
.small, small{
  font-size: 80%;
}
blockquote{
  font: normal normal 16px Times New Roman, serif;
}
ul, ol{
  padding-left:20px;
}

/*]]>*/
</style>

<!-- Required AMP-JS -->
<script async='async' src='https://cdn.ampproject.org/v0.js'/>

&lt;/head&gt;&lt;!--<head/>--&gt;

<body>

  <script type='text/javascript'>
  window.setTimeout(function(){
    document.body.className=document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
 }, 10);
</script>
  <b:section class='header' id='header' maxwidgets='' showaddelement='yes'/>

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

</html>

Posting Komentar

0Komentar

Posting Komentar (0)