 |
| Create basic AMP HTML blogspot Components from scratch 07/12/18 04.35 Blog, Kursus, WEB, by : Denny Febiana https://intitute.blogspot.com/2018/12/create-basic-amp-html-blogspot.html |
this is a little example, basic AMP HTML blogspot Components from scratch then let's do it together to proceed until the best amp html theme blogspot
<?xml version="1.0" encoding="UTF-8" ?>
|
<!DOCTYPE html>
|
<html amp='amp' lang="en">
|
<head>
|
<!-- /*<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'/>
|
</head><!--<head/>-->
|
<body>
|
<script type='text/javascript'>
|
window.setTimeout(function() {
|
document.body.className = document.body.className.replace('loading', '');
|
}, 10);
|
</script>
|
<b:section class='header' id='header' maxwidgets='' showaddelement='yes'/>
|
<!--</body>--></body>
|
</html>
|
