How to create Google Web Stories using AMP and HTML?

Article by: Manish Methani

Last Updated: September 24, 2021 at 8:04am IST
4 min 26 sec

Google Web Stories

  • Visual Storytelling Platform: Google Web Stories is a platform that allows users to create and share visually engaging and interactive stories on the web.

  • Mobile-Friendly Format: Stories are designed for mobile devices, providing a seamless and immersive experience for users on smartphones.

  • Short, Snackable Content: Stories are typically short and concise, making them ideal for quick consumption and easy sharing.

  • Immersive Multimedia Elements: Users can incorporate a variety of multimedia elements, such as images, videos, and animations, to enhance the storytelling experience.

  • Discoverability: Google Web Stories can appear in search results and are discoverable through Google Search, making it easier for users to find and engage with your content.

Advantages for Monetizing Passion:

  • Engaging Content: The visually appealing and interactive nature of Web Stories can captivate your audience, keeping them interested in your passion.

  • Increased Visibility: With the potential to appear in search results, Web Stories can attract a larger audience, increasing the visibility of your content.

  • Monetization Opportunities: Google Web Stories allows you to monetize your content through various methods, such as ads and affiliate marketing, providing an avenue to generate income from your passion.

  • Social Media Integration: Stories can be easily shared on social media platforms, expanding your reach and driving more traffic to your content.

  • User-Friendly Creation: The platform offers a user-friendly interface, making it accessible for creators of all levels, even those without advanced technical skills.

  • Mobile-Centric Experience: As a mobile-centric format, Web Stories align with the way users consume content on their smartphones, ensuring a seamless and enjoyable experience for your audience.

In essence, Google Web Stories provides a visually appealing and accessible platform for creators to share their passion, with built-in features that facilitate engagement and monetization opportunities.

Sample Code to create the Google Web Stories using AMP and HTML:

<html>
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
></script>

<link rel="canonical" href="https://codzify.com/how-to-answer-tell-me-about-yourself" />

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

<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>

</head>

<body>

<amp-story standalone publisher="" title="" 
publisher-logo-src="https://codzify.com/dash/imgs/main_icons/codzfy_without_border.png"
poster-portrait-src="https://codzify.com/assets/images/stories/tellMeAboutYourself/poster.jpg">
   <amp-story-page id="my-first-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/1.jpg" 
           width="900" height="1600" alt="This is my First Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-second-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/2.jpg" 
           width="900" height="1600" alt="This is my Second Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-third-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/3.jpg" 
           width="900" height="1600" alt="This is my Third Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fourth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/4.jpg" 
           width="900" height="1600" alt="This is my Fourth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fifth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/5.jpg"
            width="900" height="1600" alt="This is my Fifth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-sixth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/6.jpg"
            width="900" height="1600" alt="This is my Sixth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

</body>
</html>

Recommended Videos:

How to Add Google Analytics (GA4) & Adsense to Google Web Stories | Codzify Tech Tutorial

Simplified Coding for Beginners.








Download the Codzify
Mobile App


Mobile App Development, Web App Development, Programming Languages, Latest Tech News & lot more.

Codzify Mobile App

A self-paced learning Courses Created by an Engineer
For Engineers.

Premium

The Complete Angular Course

Instructor: Manish Methani

Explore Curriculum
Free

C Programming for Absolute Beginners

Instructor: Manish Methani

Start Watching
Premium

Flutter Mobile App Development Course

Instructor: Manish Methani

Explore Curriculum
Free

Learn HTML, CSS & Bootstrap

Instructor: Manish Methani

Start Watching

Test your skills with these expert-led curated
Mock Tests.

C Programming Test

Test your C Programming skills with this comprehensive mock test on C Programming.

Take Test

Flutter Test

Solve most asked Interview Questions on Flutter and Test your foundational skills in flutter.

Take Test

GATE(CSE) Operating Systems

Solve most asked GATE Questions in Operating Systems and test your Gate Score.

Take Test

HTML,CSS Test

This is a mock test designed to help you assess your knowledge and skills in HTML and CSS.

Take Test

(GATE CSE) Data Structures & Algorithms Test

Solve most asked GATE Questions in Data Structures and Algorithms and test your Gate Score.

Take Test
include_once 'codzify-footer.php'; ?>