Author/About Us awesome Page For blogger

Hello! Welcome toTaosin Blog. 

You are looking for Author/About Us awesome Page For blogger then this post is just for you.

Step 1: Login to your Blogger Dashboard 

Step 2: In Blogger, create a post or page and insert the code shown below.

Step 3: Copy and paste the following code into Blogger's blog Post. 

 <style>/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub{max-width:none}
.headH .headSub::before{content:"About"}
/* About Author CSS */ .aboutAuthor{padding:60px 0 20px 0} .aboutAuthor .aboutCont{justify-content:center;position:relative;display:flex;max-width:95%;margin:auto;padding:80px 30px 95px 30px;background-color:#fff;box-shadow:0 10px 40px rgba(149,157,165,.2);border-radius:20px} .aboutAuthor .aboutCont img{box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;width:120px;height:120px;position:absolute;border-radius:50%;top:-60px;pointer-events:none} .aboutAuthor .aboutCont p{margin:0;text-align:center;font-family:var(--fontBa)} .drK .aboutAuthor .aboutCont{background:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)} .drkM .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aboutAuthor .aboutCont img{border-color:var(--darkBs);box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* About Author Button */ .aboutAuthor .aboutCont .athrBtn{text-align:center;position:absolute;bottom:0;left:0;right:0} .aboutAuthor .aboutCont .athrBtn .button{border-radius:50px;margin:0 0 30px} .aboutAuthor .aboutCont .athrBtn .button svg{stroke:var(--darkT);margin-right:5px}
/* Website Stats */ .statsHeading{text-align:center} .statsWebsite{display:flex;flex-wrap:wrap;flex-direction:column;margin:12px auto} .statsCont{background-color:#fff;display:flex;justify-content:center;padding:8px;width:95%;margin:12px auto;box-shadow:0 5px 20px rgba(149,157,165,.2);border-radius:20px} .statsCont .stats{height:80px;width:200px;display:flex;align-items:center;justify-content:center; flex-direction:column; margin:0 35px} .statsCont .statsName{display:inline-flex;align-items:center;font-size:16px;font-family:var(--fontBa)} .statsCont .statsName svg{margin-right:7px} .statsCont .statsNumber{font-family:var(--fontB);font-size:30px;margin-top:6px;font-weight:normal} .statsNumber.v >span::before{content:attr(data-text)} .drK .statsCont{background-color:var(--darkBs);box-shadow:0 5px 20px rgba(0,0,0,.2)}
/* To change Profile background */
/* Light Mode */
.aboutAuthor .aboutCont img{background-color:#ffeaef}
/* Dark Mode */
.drK .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171)}
/*]]>*/</style>
<style type="text/css">
   *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}body{font-family:"noto sans",sans-serif;}.timeline{overflow-x:visible;}
  .timeline ul{padding:0px 0;}
  .timeline ul li{list-style-type:none;position:relative;width:6px;margin:0 auto;padding-top:50px;    box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 20%);
    background: #41B37590;}
  .timeline ul li::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:inherit;z-index:1;}
  .timeline ul li div{position:relative;bottom:0;width:400px;padding:15px;background: #ffffff10;box-shadow: 0 10px 40px rgb(0 0 0 / 20%);
    border-radius: 10px;}
  .timeline ul li div::before{content:"";position:absolute;bottom:7px;width:0;height:0;border-style:solid;}
  .timeline ul li:nth-child(odd) div{left:45px;}
  .timeline ul li:nth-child(odd) div::before{left:-15px;border-width:8px 16px 8px 0;border-color:transparent #f0f1ff transparent transparent;}
  .timeline ul li:nth-child(even) div{left:-439px;}
  .timeline ul li:nth-child(even) div::before{right:-15px;border-width:8px 0 8px 16px;border-color:transparent transparent transparent #f0f1ff;}time{display:block;font-size:1.2rem;font-weight:bold;margin-bottom:8px;}
  .timeline ul li::after{transition:background 0.5s ease-in-out;}
  .timeline ul li.in-view::after{background:#41B375;}
  .timeline ul li div{visibility:hidden;opacity:0;transition:all 0.5s ease-in-out;}
  .timeline ul li:nth-child(odd) div{transform:translate3d(200px,0,0);}
  .timeline ul li:nth-child(even) div{transform:translate3d(-200px,0,0);}
  .timeline ul li.in-view div{transform:none;visibility:visible;opacity:1;}@media screen and (max-width:900px){.timeline ul li div{width:200px;}
  .timeline ul li:nth-child(even) div{left:-289px;}}@media screen and (max-width:600px){.timeline ul li{margin-left:20px;}
  .timeline ul li div{width:calc(100vw - 91px);}
  .timeline ul li:nth-child(even) div{left:45px;}
  .timeline ul li:nth-child(even) div::before{left:-15px;border-width:8px 16px 8px 0;border-color:transparent #f0f1ff transparent transparent;}}
  .timeline-clippy ul li::after{width:40px;height:40px;border-radius:0;}.timeline-rhombus ul li::after{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);}
  .timeline-rhombus ul li div::before{bottom:12px;}.timeline-star ul li::after{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);}
  .timeline-heptagon ul li::after{clip-path:polygon(50% 0%,90% 20%,100% 60%,75% 100%,25% 100%,0% 60%,10% 20%);}.timeline-infinite ul li::after{animation:scaleAnimation 2s infinite;}
  @keyframes scaleAnimation{0%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.25);}100%{transform:translateX(-50%) scale(1);}}
  /* Dark Mode */
.drK ..timeline ul li.in-view div .timeline ul li.in-view div img{background-image:linear-gradient(to top right,#363636,#717171)} 
</style> 

 <!--[ About Author ]-->
<div class='aboutAuthor'>
  <div class='aboutCont'>
    <!--[ Author Profile Picture, Recommended Sizes: 1280×1280px, 720×720px below 30KB for fast loading, use transparent picture ]-->
    <img alt='alt_here' src='https://blogger.googleusercontent.com/img/a/AVvXsEhsw7PUP_5frj-mDVttDrduB9YN2e3b1OtO_UswtTwFc2dURIs_nY3qlZEkXNhwguwTEiWc1Fc_MsFP0mqoKOuFfiK0WxvV8dt5cUIi4lko3m_myOE_OhwXN9q4jQhALElk5aOpDIQqmhRfYA2FzhS1Rp0JUdHrxlFpwaY-qpMIUpZyfN6vHTWzJfd-jWQ=s1453' />
    <!--[ Author Description ]-->
    <p>Lorem ipsum dolor sit amet. Qui ratione rerum vel odit alias qui totam placeat! Aut esse sint hic possimus reprehenderit et consectetur beatae  voluptates fugit. A earum vero et quos ipsa vel voluptatum sequi vel numquam nostrum eum explicabo vero.This is a sample About Us/About Author Page.</p>
    <div class='athrBtn'>

    </div>
  </div>
</div>
<section class="timeline">
  <ul>
    <li>
      <div>
        <time>1934</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1937</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1940</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1943</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1946</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1956</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1957</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1967</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1977</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>1985</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>2000</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
    <li>
      <div>
        <time>2005</time>ThemesGadget helps you find all your blogger themes related questions in one place, design blocks for Blogger and much more.
      </div>
    </li>
  </ul>
</section> 

<script>

    (function () {

  "use strict";

  // define variables

  var items = document.querySelectorAll(".timeline li");

  // check if an element is in viewport

  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

  function isElementInViewport(el) {

    var rect = el.getBoundingClientRect();

    return (

      rect.top >= 0 &&

      rect.left >= 0 &&

      rect.bottom <=

        (window.innerHeight || document.documentElement.clientHeight) &&

      rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );

  }

  function callbackFunc() {

    for (var i = 0; i < items.length; i++) {

      if (isElementInViewport(items[i])) {

        items[i].classList.add("in-view");

      }

    }

  }

  // listen for events

  window.addEventListener("load", callbackFunc);

  window.addEventListener("resize", callbackFunc);

  window.addEventListener("scroll", callbackFunc);

})();

  function statsPst(json){var el = qSel('.statsNumber.p');el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</span>'};

  function statsCmt(json){var el = qSel('.statsNumber.c');el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</span>'};

  if(isPrivateBlog!='true'){

    Defer.js(blogUrl+'feeds/posts/default?alt=json-in-script&callback=statsPst', 'sts-pst');

    Defer.js(blogUrl+'feeds/comments/default?alt=json-in-script&callback=statsCmt', 'sts-cmt');

  };

</script>

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: Taosin Blog