 |
| 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>
|
Tags:
Tutorial