Table of Content AMP HTML

HTML

<!--
     This is the minimum valid AMP HTML document. Just type away
     here and the AMP Playground will render your document on the fly.
-->
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    body{padding:10px}
    h1 {
      margin: 16px;
    }
    #btn_toc{font-weight:bold;cursor:pointer}
    #btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
    #btn_toc svg{vertical-align:middle}
    #toc li,.back_toc{cursor:pointer}
    :target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}
  </style>
</head>
<body>
<h1>Table of Contents For Blogger</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare nisi iaculis elementum venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas interdum neque convallis magna vulputate molestie. Nam congue egestas dui, ut elementum velit porttitor eu. Etiam scelerisque, libero sit amet aliquet laoreet, lacus erat vulputate arcu, non rhoncus sapien ex sed tortor....