 |
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"> |
<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:
Instituteistic