Download Kerangka Template Blogger AMP Valid dan Responsive
Kerangka (Framework) Template Valid AMP untuk Blogger dan Responsive.
Kesempatan kali ini Eden Creative akan membagikan Project Dasar Template AMP untuk blogger. meskipun ini masih dalam tahap pembuatan atau masih Kerangka (framework) tapi template dasar AMP ini sudah Valid dan CSS yang di terapkan sudah responsive/flexibel. Pada kesempatan lain kerangka ini akan terus di kembangkan sampai layak untuk di komersialkan. Silahkan download (Gratis) jika berniat mengembangkannya sendiri. untuk keterangan cara pemasangan widget dan cara pemakainnya ikuti terus perkembangan artikel selanjutnya.
Download versi Lengkap yang sama dengan sample demoIsi pada kerangka template kurang lebih seperti berikut :
HTML Bagian Head - untuk meta tag silahkan ganti dengan meta tag andalan kalian.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang='id'> <!-- amp='amp' menandakan bahwa template akan mengunakan struktur AMP -->
<head> <!-- atau <head> -->
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<!-- /*<b:skin><![CDATA[*//*
-----------------------------------------------
AMP Blogger Template [Info]
Name : Eden AMP Blogger
Theme License : Free
----------------------------------------------- */
]]></b:skin>Bagian Tag conditional pada style amp-custom (Optional).
<style amp-custom='amp-custom'>
<b:if cond='data:blog.pageType != "item" and data:blog.pageType != "static_page"'>
/* Style selain item dan statis */
</b:if>
<b:if cond='data:blog.pageType == "item"'>
/* Style hanya item */
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
/* Style hanya statis */
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
/* Style hanya Error */
</b:if>
</style><!-- end amp-custom -->
<!-- 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>Component Script wajib AMP
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>Sekarang pada bagian Body.
</head><!--<head/>--> (opsional) - atau </head>
<body>
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-XXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics> <div class='wrapper container-fluid' id='wrapper'>
<div class='row container'>
<header class='header-wrapper container' id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Eden AMP Blogger Template (Header)' type='Header'/>
</b:section>
</header>
<!-- penempatan menu disini atau bisa di dalam header -->
<div class='clear'/>
<div class='container' id='outer-wrapper'>
<div class='row' id='content-wrapper'>
<div class='main-wrapper' id='main-wrapper' itemprop='mainContentOfPage'>
<b:section class='main' id='main' showaddelement='no'/>
</div><!-- main-wrapper -->
<aside class='sidebar-wrapper ' id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside>
</div><!-- end content wrapper --><div class='clear'/>
</div><!-- end outer wrapper --><div class='clear'/>
<footer class='footer-wrapper container' id='footer-wrapper'>
<div class='footer' id='footer'>
<b:section class='footer' id='footer' preferred='yes'/>
</div>
</footer>
</div></div><!-- end row and wrapper --></HTML>
Kerangka di atas sudah jadi untuk memenuhi template AMP blogger
catatan:
ketika template di SAVE dan saat di Check Validator AMP kemungkinan tidak akan langsung valid.
di karenakan blogger secara otomatis menempatan strukturnya secara default.
maka kita harus mengedit secara manual.
dimana pada template blogger ada element div yang di dalamnya terdapat style secara langsung yang di mana pada struktur AMP itu tidak di bolehkan.
<div style='clear:both'/> seharusnya penempatannya seperti ini <div class='clear'/> atau element lain yang sejenis.Keterangan CSS saya ambil dari CSS library bootstrap. namun saya tidak ambil semuanya karena yang di perlukan hanya layout Responsive saja dan selebihnya saya kembangkan sendiri.
berikut contoh sebagian style CSS yang ada pada contoh.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}
.row {
margin-right:-15px;
margin-left:-15px;
}
.container {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}
@media (min-width:768px) {
.container {
width:750px;
}
}
@media (min-width:992px) {
.container {
width:970px;
}
}
@media (min-width:1200px) {
.container {
width:1170px;
}
}
.col-2,.col-4,.col-6,.col-8 {
position:relative;
min-height:1px;
padding-right:15px;
padding-left:15px;
}
@media (min-width:1200px) {
.col-2,.col-4,.col-6,.col-8 {
float:left;
}
}
@media (min-width:992px) {
.col-2,.col-4,.col-6,.col-8 {
float:left;
}
}
@media (min-width:768px) {
.col-2,.col-4,.col-6,.col-8 {
float:left;
}
.col-2 {
width:25%;
}
.col-4 {
width:33.33333333%;
}
.col-6 {
width:66.66666667%;
}
.col-8 {
width:75%;
}
}Untuk XML Template AMP Blogger keseluruhannya silahkan kalian download pada link di atas. coba terapkan pada template blogger anda, jika ada pertanyaan seputar kerangka template AMP blogger silahkan diskusikan melalui komentar. untuk tingkat lanjut saya akan buat artikel terpisah.
artikel serupa : Template AMP blogger terbaik
Klik tombol show dan tunggu hingga loading comment disqus muncul dan selesai memuat. berkomentarlah sesuai artikel: Download Kerangka Template Blogger AMP Valid dan Responsive