15 way to create amp html blogger
How to create amp html template on blogger ? How to implement amp html to blogger?
How to create amp template on blogger? For this word in the future i think a lot of Blogger want to know. How to do? Now google launch AMP html around the world.
we are blogger need to make AMP html because for render your blog and fast speed for user
update2 add facebook fanpage like box to amp template blogger this easy way for more traffic please follow me you need to add before
update3 before create blogger to amp html please think more and more because in your if you have 1000 post and a lot of image that mean you need to change all of the image code to amp html.
By the way you need to create new blog is best way.
This 's only old templat.
update4 when i do something in template it automatic change some code of new blogger template and after error, Please check before change to amp html because blogger not support amp html.
in this time blogger not yet to support create AMP html and i can make amp html but not perfect not beautiful after you can improve by yourself.
This 's my test blog you can see this link "Thai food for you"not perfect but it's work.
Right now let we 're start to
1.stop to use mobile version and after you need to disable 2 css
and after use new inline css like in template classic and maybe you can copy css in template classic and keep in notepad before make this.
2.put new layout css inline from classic template or you make new by yourself after item 1. at
3.add this under code before
4.add this code after
5.push this code after item 3. to tell google this page is AMP html
6.find this code
and change from "true" to "fales"after save template and go out of edit html to layout and remove footer because power by blogger this make error and maybe you can use gadget massage after.
7.again go to edit html and remove google plus follow this code
8.check in amp validate on chrome browser by your https://your-url.com#development=1
check about error and remove it's such as change "style" to "class" or delete some thing in your html
9.remove java script in your template
10. use this code for amp image by change to amp-image.jpg in html post to this image
10.1 if you want image responsive use this code under
11.replace new code with
12.add javascript amp to template before
13.add config to template blogger get below code and paste after item 12
14.add config analytic to you template
15.Add code for your analytics to your blog and keep this code paste before footer
after check for validate your amp page by (https://your url #development=1)and open f12 in your computer or by https://validator.ampproject.org and after you know about error and clear all error by your self and recheck description your blog in source code if no have description you can add
note: change all style to class this make error
how to blogger make amp html
update 1 after finish to implement amp html and google index my site and i try to click my site in browser (html tag for AMP )and check counter in dashboard not count but try to check page not index to amp it 's count.
i waiting to check in google analytics again.
Thailand AMP html not available now.
Remark when you update tag amp is gone and wait 1-2 day for index again.
google launched new tool for test only amp google search console amp test available now.
You can see result of amp search and structure data test tool in this page.
This 's my test blog you can see this link "Thai food for you"not perfect but it's work.
Right now let we 're start to
Create AMP HTML in blogger template
1.stop to use mobile version and after you need to disable 2 css
<b:skin> and </b:skin>and <b:template-skin> to </b:template-skin> in your blogger template by this code
<!-- /*<b:skin><![CDATA[*/]]></b:skin>
and after use new inline css like in template classic and maybe you can copy css in template classic and keep in notepad before make this.
2.put new layout css inline from classic template or you make new by yourself after item 1. at
<style> new inline css by your self </style>
3.add this under code before
<head> and repaste to <html b:version='2' class='v2'............>
<html amp='amp'> and close by </html> or this code <HTML amp='amp'> and close by </HTML>
4.add this code after
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no,minimal-ui' name='viewport'/>
5.push this code after item 3. to tell google this page is AMP html
<link expr:href='data:blog.url' rel='canonical'/>
6.find this code
<b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’>
and change from "true" to "fales"after save template and go out of edit html to layout and remove footer because power by blogger this make error and maybe you can use gadget massage after.
7.again go to edit html and remove google plus follow this code
<data;top. googlePlusBootstrap/>
8.check in amp validate on chrome browser by your https://your-url.com#development=1
check about error and remove it's such as change "style" to "class" or delete some thing in your html
9.remove java script in your template
10. use this code for amp image by change to amp-image.jpg in html post to this image
<amp-img src="your image.jpg" width="800" height="400"></amp-img>
10.1 if you want image responsive use this code under
<center>
<amp-img alt="your img alt " height="350" layout="responsive" sizes="(min-width: 650px) 350px, 70vw" src="your image.JPG" width="400"></amp-img></center>
<amp-img alt="your img alt " height="350" layout="responsive" sizes="(min-width: 650px) 350px, 70vw" src="your image.JPG" width="400"></amp-img></center>
11.replace new code with
</body> by new code under
<!--</body>--></body>
12.add javascript amp to template before
</head>
<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>
13.add config to template blogger get below code and paste after item 12
<script async='async' src='https://cdn.ampproject.org/v0.js'/></script>
14.add config analytic to you template
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>
15.Add code for your analytics to your blog and keep this code paste before footer
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<script type='application/json'>
{
"vars": {
"account": "UA-XXXXXXXX-X"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
after check for validate your amp page by (https://your url #development=1)and open f12 in your computer or by https://validator.ampproject.org and after you know about error and clear all error by your self and recheck description your blog in source code if no have description you can add
amp html blogger
if you need more information about accelerated mobile project and please check structure data testing tool and google page speed insight and google mobile friendly for make sure everything is perfect. and my sample for for amp htmlnote: change all style to class this make error
update 1 after finish to implement amp html and google index my site and i try to click my site in browser (html tag for AMP )and check counter in dashboard not count but try to check page not index to amp it 's count.
i waiting to check in google analytics again.
Thailand AMP html not available now.
Remark when you update tag amp is gone and wait 1-2 day for index again.
google launched new tool for test only amp google search console amp test available now.
You can see result of amp search and structure data test tool in this page.
</head>
<script async='async' src='https://cdn.ampproject.org/v0.js'/></script>
and use facebook fanpage like box iframe to gadget like under code
<amp-iframe width=250 height=200
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/xxxx/idxxxxxxxxx">
</amp-iframe>
if you want to download amp template blogger for your blogger blogspot to use or studies please click here amp template blogger for freesandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="https://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/xxxx/idxxxxxxxxx">
</amp-iframe>
update3 before create blogger to amp html please think more and more because in your if you have 1000 post and a lot of image that mean you need to change all of the image code to amp html.
By the way you need to create new blog is best way.
This 's only old templat.
update4 when i do something in template it automatic change some code of new blogger template and after error, Please check before change to amp html because blogger not support amp html.
Add comment click here