Header Ads Widget

IMPORTANT AMP HTML CHEAT SHEET

Inspirasi,Ilmu Pengetahuan,
IMPORTANT AMP HTML Cheat Sheet






Hello World


<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello World!</title>
    <link rel="canonical" href="https://htmlcheatsheet.com">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
   {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Hello World",
      "datePublished": "2018-08-08T12:02:41Z",
      "image": [
        "logo.jpg"
     ]
   }
    </script>
    <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>
    <style amp-custom>
      p{
        margin: 1em;
     }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>


Images


Basic syntax


<amp-img src="/m/cheatsheet.jpg" alt="Cheat Sheet" height="200" width="300"></amp-img>

Responsiveness


<amp-img
   src="/narrow.jpg"
   srcset="/wide.jpg 640w,
      /narrow.jpg 320w"
   width="1200"
   height="800"
   layout="responsive"
   alt="demo image">
</amp-img>

Layout types


nodisplay – works like display: none style.
fixed – fixed width & height
responsive – fills container automatically to aspect ratio
fixed-height – keeps the specified height unchanged
fill – fills available height & width
container – lets its children define its size, like a normal div
flex-item – works like display:flex style
intrinsic – responsive until it reaches its height and width

CSS media queries


@media screen and (max-width: 720px){
  p{font-size: 0.9em;}
}

Element media queries:


<amp-img
  media="(min-width: 720px)"
  src="demo.jpg"
  width=300
  height=200
  layout="responsive">
</amp-img>

Placeholder

Shows a placeholder while the element is being loaded:

<amp-anim src="animation.gif"
   layout="responsive"
   width="300"
   height="200">
   <amp-img placeholder
      src="demo.jpg"
      layout="fill">
   </amp-img>
</amp-anim>

Fallback

When an element is not supported:

<amp-img alt="Demo"
  width="300"
  height="200"
  layout="responsive"
  src="videofile.webp">
  <amp-img alt="Demo"
    fallback
    width="300"
    height="200"
    layout="responsive"
      src="image.jpg"></amp-img>
</amp-img>

Hide loading indicator

noloading


Google Analytics


Include


<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Replace UA-XXXXXXXX-1 with your code

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars":{
    "account": "UA-XXXXXXXX-1"
 },
  "triggers":{
    "trackPageview":{
    "on": "visible",
    "request": "pageview"
   }
 }
}

AdSense


Include


<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>

After the opening body tag, add your ID.


<amp-auto-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"></amp-auto-ads>

Sidebar ☰


Include


<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

Custom CSS:


.sidebar{padding: 10px;margin: 0;color: #FFF;font-weight:bold;}
#sidebar1{background: #CE5937;}
.sidebar > li{list-style: none;margin-bottom:10px;}
.sidebar a{text-decoration: none;color: #FFF;}
.close-sidebar{font-size: 1.5em;padding: 5px 15px;cursor: pointer;color: #FFFFFF;}
.headerbar{background: #CE5937;color: #FFF;line-height: 30px;position: fixed;top: 0;left: 0;right: 0;height: 40px;z-index: 1000;}
.headerbar a{text-decoration: none;color: #FFF;}

amp-sidebar


<header class="headerbar">
   <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
   <a href="/" class="site-name">MySite</a>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
   <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
   <ul class="sidebar">
      <li><a href="https://htmlg.com/">Editor</a></li>
      <li><a href="https://html5-templates.com/">Templates</a></li>
      <li><a href="https://htmlcheatsheet.com/">Cheat Sheet</a></li>
   </ul>
</amp-sidebar>

Facebook comments


Include


<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>

Code


<amp-facebook-comments width="300"
   height="350"
   layout="responsive"
   data-numposts="5"
   data-colorscheme="dark"
   data-locale="es_ES"
   data-order-by="time"
   data-href="https://htmlcheatsheet.com/">
</amp-facebook-comments>

Social share buttons


Include


<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Code


<amp-social-share type="facebook" width="30" height="30"
   data-param-text="HTML Cheat Sheet"
   data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="twitter" width="30" height="30"
   data-param-text="HTML Cheat Sheet"
   data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="gplus" width="30" height="30"
   data-param-text="HTML Cheat Sheet"
   data-param-url="https://htmlcheatsheet.com">
</amp-social-share>

Carousel


Include


<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Code


<amp-carousel width="300"
   height="200"
   layout="responsive"
   type="slides">
   <amp-img src="/img1.jpg"
      width="300"
      height="200"
      layout="responsive"
      alt="a demo image"></amp-img>
   <amp-img src="/img2.jpg"
      width="300"
      height="200"
      layout="responsive"
      alt="another cool image"></amp-img>
   <amp-img src="/img3.jpg"
      width="300"
      height="200"
      layout="responsive"
      alt="and the last one"></amp-img>
</amp-carousel>

Important ‼


Define AMP page location on Desktop site


<link rel="amphtml" href="https://htmlcheatsheet.com/m/">

Link back to Desktop from AMP


<link rel="canonical" href="https://htmlcheatsheet.com/">

Image tag


<amp-img src="/m/cheatsheet.jpg" alt="Cheat Sheet" layout="responsive" height="200" width="300"></amp-img>

Keep in mind!


Don't use !important CSS
https:// highly recommended
No custom .JS files
Only 50Kb inline style allowed in <style amp-custom> </style>

Common attributes


fallback, heights, layout, media, noloading, on, placeholder, sizes, width and height

Video 


Include


<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Example

<amp-video controls
  width="600"
  height="400"
  layout="responsive"
  poster="geekprank.png">
  <source src="geekprank.webm"
    type="video/webm" />
  <source src="geekprank.mp4"
    type="video/mp4" />
  <div fallback>
    <p>Video element not supported.</p>
  </div>
</amp-video>

Attributes

src, poster, autoplay, controls, controlsList, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen

artwork, artist, album, title

Youtube Video


<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<amp-youtube
  data-videoid="VeeFwwAz7no"
  layout="responsive"
  width="480" height="270"></amp-youtube>

Actions, events 


Syntax


eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Example


on="submit-success:lightbox1;submit-error:lightbox2"
<div id="cookie-consent">The site is using Cookies!</div>
<button on="tap:cookie-consent.hide">OK, I understand!</button>

Events


show, hide – shows/hides the target element
toggleVisibility, toggleClass
scrollTo(duration=INTEGER, position=STRING) –
focus – make the target element gain focus
open – opens the amp-image-lightbox with the source image being the one that triggered the action
close – closes the lightbox
change – on input & select
input-debounced – 300ms passed since an input value change
input-throttled – change event fired maximum once every 100ms
tap – click or tap
slideChange – amp-carousel[type="slides"]
toggleAutoplay – amp-carousel[type="slides"]
goToSlide(index=INTEGER) – advance the carousel to the index
lightboxOpen – amp-lightbox fully visible
lightboxClose – amp-lightbox fully closed
sidebarOpen – amp-sidebar fully open
sidebarClose – amp-sidebar fully closed
play, pause, mute, unmute, fullscreen – video controls
firstPlay – first user interaction with video
timeUpdate – video playing position changed
submit – form is submitted
clear – clears values in the inputs
submit-error – form submission response is an error
play, pause – controls amp-audio
refresh – refreshes data from the src and re-renders the amp-list
selectUp(delta=INTEGER), selectDown(delta) – moves the amp-selector up/down by a value
open, close, toggle – amp-sidebar controls
navigateTo(url)
goBack – go back in history
print – Opens the Print Dialog

amp-bind


<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Button changes 'World' to 'John':
<p [text]="'Hello ' + str">Hello World</p>
<button on="tap:AMP.setState({str: 'John'})">

amp-state

Initialize state:

<amp-state id="thisState">
  <script type="application/json">
   {
      "foo": "bar"
   }
  </script>
</amp-state>
thisState.foo=="bar"
Update state with AMP.setState()
<button on="tap:AMP.setState({foo: 'bar', baz: myAmpState.someVariable})"></button>
<input type="range" on="change:AMP.setState({myRangeValue: event.value})">
AMP.pushState
<button on="tap:AMP.pushState({foo: '123'})">Set 'foo' to 123</button>

Facebook like


Include


<script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>
Code
<amp-facebook-like width=90 height=20
   layout="fixed"
   data-layout="button_count"
   data-href="https://www.facebook.com/htmlcoding/">
</amp-facebook-like>

iFrame 


Include


<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Use it for Google Maps or anything else


<amp-iframe width="400"
   title="Collection of HTML codes"
   height="300"
   layout="responsive"
   sandbox="allow-scripts allow-same-origin allow-popups"
   allowfullscreen
   frameborder="0"
   src="https://htmlcheatsheet.com/">
   <amp-img layout="fill"
      src="/placeholder.jpg"
      placeholder></amp-img>
</amp-iframe>

Accordion menu


Include


<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Example
<amp-accordion>
   <section expanded>
      <h4>Title 1</h4>
      <p>Add any text.</p>
   </section>
   <section>
      <h4>Title 2</h4>
      <div>Add any <strong>HTML</strong> content.</div>
   </section>
   <section>
      <h4>Title 3</h4>
      <figure>
         <amp-img src="/demo.jpg"
            width="400"
            height="200"
            layout="responsive"
            alt="description"></amp-img>
         <figcaption>This is an image</figcaption>
      </figure>
   </section>

Posting Komentar

0 Komentar