How to Create AMP Web Stories on Blogger
If you run your website on Blogger Hosting and want to create AMP Web Stories that appear on Google Discover, you’ll quickly realize Blogger doesn’t offer this feature directly.
But we’ve found a solution! Now, any Blogger user can create fully functional AMP Web Stories for their website — stories that are SEO-friendly and Discover-ready. You just need a few things:
- Your website should be connected to Cloudflare.
- You need the URLs of the images you plan to use in your story.
Here’s how to create amp web stories, step by step:
Main template code
<!DOCTYPE html><html itemtype="https://schema.org/Article" lang="hi" amp><head><meta charset="utf-8"><meta content="width=device-width,minimum-scale=1,initial-scale=1.0" name="viewport"><meta name="mobile-web-app-capable" content="yes"><meta content="max-image-preview:large" name="robots"><link rel="preconnect" href="https://blogger.googleusercontent.com"><link rel="preload" as="font" href="https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2" type="font/woff2" crossorigin="anonymous"><link rel="icon" type="image/x-icon" href="https://www.thesmartadvice.com/favicon.ico"><meta content="article" property="og:type">
<!--paste-below-Custom_Meta_tags-and-preload-and-NewsArticle_Schema_Markup-code-->
<!--paste-above--Custom_Meta_tags-and-preload-and-NewsArticle_Schema_Markup-code-->
<!--css_do_not_edit--><style amp-custom>@font-face {font-family: 'Montserrat';font-style: normal;font-weight: 400 700;font-display: swap;src: url(https://fonts.gstatic.com/s/montserrat/v29/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}amp-story {font-family: 'Montserrat', sans-serif;color: #fff;}amp-story-page {background-color: #000;}amp-img {position: relative;}amp-story-page amp-story-grid-layer:last-of-type {padding: 0;}amp-story-grid-layer {padding: 0;}h1 {font-weight: normal;font-size: 20px;line-height: 1.2;padding-bottom: 10px;}p {font-size: 14px;line-height: 18px;color: #ddd;padding: 0 20px;font-family: 'Montserrat', sans-serif;}q {font-weight: 300;font-size: 14px;}.align-end {align-content: end;padding: 0;}.align-top, .align-middle {padding: 50px 20px 32px;}.inner-align-end, .inner-align-middle, .inner-align-top {padding: 40px 21px;}.inner-align-end {background-color: rgba(0, 0, 0, 0.35);margin-left: -5%;margin-right: -5%;width: 110%;border-top-left-radius: 50% 75px;border-top-right-radius: 50% 75px;}.cover .inner-align-end {background-image: linear-gradient(transparent, rgba(0,0,0,0.7));background-color: transparent;border-radius: 0;}.inner-align-end-next {background-image: linear-gradient(transparent, rgba(0,0,0,0.7));background-color: transparent;padding: 40px 21px 120px;margin-left: -5%;margin-right: -5%;width: 110%;border-top-left-radius: 50% 75px;border-top-right-radius: 50% 75px;}.inner-align-end-next h2 {font-size: 29px;text-align: center;font-family: 'Montserrat';color: #fff;line-height: 1.27;margin-bottom: 10px;letter-spacing: 1.02px;font-weight: bold;text-transform: uppercase;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);padding: 20px 20px;position: relative;line-height:1.5em;}.inner-align-end-next .summary {font-size: 16px;text-align: center;margin-bottom: 20px;font-family: 'Montserrat';color: #fff;letter-spacing: 1px;line-height: 1.41;padding: 0 20px;}.phone-heading-lang {line-height: 1.7;text-decoration-style: solid;text-transform: uppercase;color: #fff;text-align: center;font-size: 32px;font-family: 'Montserrat';position: relative;padding: 15px 10px;letter-spacing: 1.02px;font-weight: bold;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}.logo {padding: 1px 0 30px 21px;}.logo amp-img img {border-radius: 6px;}.amp-cover__author {background: rgba(0,0,0,0);display: block;padding: 0px 20px;line-height: 3.08;text-decoration-style: solid;text-transform: uppercase;color: #fff;text-align: center;font-size: 13px;font-weight: 100;background-color: rgba(0, 0, 0, 0);letter-spacing: 2.33px;font-family: 'Montserrat';}.inner-align-end h2, .inner-align-middle h2, .inner-align-top h2 {font-size: 19px;font-family: 'Montserrat', sans-serif;color: #fff;line-height: 1.6;letter-spacing: 1px;padding-bottom: 20px;text-align: center;margin-bottom: 20px;position: relative;}.inner-align-end h2:after, .inner-align-middle h2:after, .inner-align-top h2:after {content: '';width: 54px;height: 1px;background-color: #fff;position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);}.summary {text-align: center;color: #fff;line-height: 1.41;letter-spacing: 1px;font-size: 16px;padding: 0 20px 15px;font-family: 'Montserrat', sans-serif;}.amp-cover__date {text-align: center;font-family: 'Montserrat';font-size: 11px;text-transform: uppercase;position: relative;padding: 20px 0;letter-spacing: 5px;color: #fff;font-weight: bold;margin: 0;}.amp-cover__date:after {content: '\02588';position: absolute;bottom: 0;width: 100px;height: 6.5px;margin: 0 auto;font-family: sans-serif;font-size: 100px;line-height: 0;overflow: hidden;left: 50%;transform: translate3d(-50%, 0, 0);color: rgb(224, 32, 32);}.photo_credit {padding: 20px 10px 20px 10px;font-size: 10px;background: none;margin: 0;width: 100%;font-family: 'Montserrat', sans-serif;color: #eee;}.ftr {text-align: right;font-size: 10px;color: #eee;text-decoration: none;font-family: 'Montserrat', sans-serif;}@keyframes bg-zoom-in {0% { transform: scale(1); }100% { transform: scale(1.3); }}@keyframes bg-zoom-out {0% { transform: scale(1.3); }100% { transform: scale(1); }}amp-story-page[active] amp-img.zoom-in {animation: bg-zoom-in 15s forwards;}amp-story-page[active] amp-img.zoom-out {animation: bg-zoom-out 15s forwards;}</style><style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script src="https://cdn.ampproject.org/v0.js" async></script><script src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story" async></script><script src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" custom-element="amp-analytics" async></script></head><body><amp-story publisher-logo-src="https://blogger.googleusercontent.com/img/b/your-website-logo-image-xxxxxx.webp" poster-portrait-src="https://blogger.googleusercontent.com/img/b/xyz/s1600-rw/your-amp-story-cover-image.webp" publisher="YOUR WEBSITE TITLE" title="Your Story Title" standalone>
<!-- Google Analytics (GA4) --><amp-analytics type="gtag" data-credentials="include"><script type="application/json">{ "vars" : { "gtag_id": "G-5FCFZ97DDD", "config" : { "G-5FCFZ97DDD": { "groups": "default" } } }}</script></amp-analytics> <!--paste-below-amp-story-page-code--> <!--paste-above-amp-story-page-code-->
</amp-story></body></html>Step 1: Manually Generate Story Code (Made Easy)
You’ll need to manually create the HTML code for each story. First of all, copy the main template code given above and keep it on notepad. Now it will be edited and the final code will be prepared.
You can save some data of the template on your system once you set it according to your website, rest of the data which will be different for each story, we will edit it and put it in the template, don't worry about that — we’ve built two custom tools to make this process super easy:
You only have to enter your data, and these tools will generate the code for you.
🛠 Step 2: Insert the Code into the Template
Use our AMP Story HTML template (similar to the one you uploaded).
In the template, you’ll see clear instructions:
Paste the Meta tags and schema code between:
<!--paste-below-Custom_Meta_tags-and-preload-and-NewsArticle_Schema_Markup-code-->
<!--paste-above--Custom_Meta_tags-and-preload-and-NewsArticle_Schema_Markup-code-->
Paste the AMP story pages code between:
<!--paste-below-amp-story-page-code-->
<!--paste-above-amp-story-page-code-->
And update these values in the `<amp-story>` tag:
<amp-story
publisher-logo-src="https://blogger.googleusercontent.com/img/b/your-website-logo-image-xxxxxx.webp"
poster-portrait-src="https://blogger.googleusercontent.com/img/b/xyz/s1600-rw/your-amp-story-cover-image.webp"
publisher="YOUR WEBSITE TITLE" title="Your Story Title" standalone>
Also, add your Google Analytics ID to track story traffic.
Step 3: Save and Upload the File
Save your story file with a name like:
cold-drink-nuksan-hindi.html.htmlStep 4: Make the Story Live with Cloudflare Worker
Deploy the uploaded HTML file using a Cloudflare Worker so it appears as part of your website.
Step 5: Create and Submit an XML Sitemap
Finally, create an XML sitemap for all your web stories (you can automate this using your Worker or manually maintain it).
Submit the sitemap to Google Search Console — this is the step that brings traffic from Google Discover.
If this setup process sounds complex, don’t worry — we offer complete setup help for a one-time fee of just ₹2000. This covers everything from Cloudflare configuration to sitemap submission, so you can focus on creating stories.
Like ThisReady to get started?
Use our free tools, follow the steps above, and bring your Blogger site into Google Discover with beautiful AMP Web Stories! 🚀