Karena disini saya juga masih belajar mengenai AMP HTML jadi pembahasan disini hanya mengenai elemen AMP GOOGLE yang wajib disertakan saja, serta template AMP tang ingin dibuat hanya untuk kerangka saja.
Implementasi AMP HTML ke Template Blogspot
Sekarang mari kita implementasikan beberapa komponen di atas ke dalam template dasar blogspot:
Dimulai dari komponen Top-level wajib ada
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang="en">
Kemudian komponen heading dan seterusnya
<!-- S:komponen heading template -->
<head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title itemprop='name'><data:blog.pageTitle/></title>
<b:else/>
<title itemprop='name'><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<!-- S:link kanonik ke AMP HtML -->
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<!-- E:link kanonik ke AMP HTML -->
<b:include data='blog' name='all-head-content'/>
<b:include data='blog' name='google-analytics'/>
<!-- S:komponen meta data -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
<!-- tuliskan meta tag anda disini diseusaikan dengan kebutuhan template yang ada -->
<!-- E:komponen meta data -->
<!-- S:Komponen skin -->
<b:skin>
/* kode css disini */
body {background :white}
</b:skin>
<!-- E:Komponen skin -->
<style amp-custom='amp-custom'>
<!-- css custom code silahkan tulis di sini -->
body {
background-color: white;
}
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<!-- S:Komponen style yang wajib ada -->
<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>
<!-- E:Komponen style yang wajib ada -->
<!-- S:Komponen script yang wajib ada -->
<script async='async' src="https://cdn.ampproject.org/v0.js"></script>
<!-- E:Komponen script yang wajib ada -->
<!-- S:Komponen Javascript tambahan jia ada -->
<script async='async' src='http:www.example.com/example.js'/>
<!-- E:Komponen Javascript tambahan jia ada -->
</head>
<!-- E:komponen heading template -->
Komponen body serta komponen utama blog
<body>
<!-- S:Google Tag Manager Optional -->
<noscript><amp-iframe height='0' src='//www.googletagmanager.com/ns.html?id=GTM-M7L5N8' style='display:none;visibility:hidden' width='0'/></noscript>
<!-- E:Google Tag Manager Optional -->
<!-- S:Komponen utama blog -->
<b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
</b:section>
<b:section id='nav' class='nav' maxwidgets='1' showaddelements='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
<b:section id='main' class='main' maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<b:section id='sidebar' class='sidebar' maxwidgets='' showaddelements='yes'>
<b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
<b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
<!-- E:Komponen utama blog -->
</body>
</HTML>
Sekian Mengenai cara buat template AMP GOOGLE pada blogspot, jika ada yang salah mohon untuk di maklumi karena saya disinin juga masih belajar.
No comments:
Post a Comment