How To Create And Add Stylish About Us Page To Your Blog?

 

What Is About Us And Why Should I Use This In Your Website?

Hello There Friend!

About Us Is A Much Important For Any Blog To Tell Them About You. What's More, This About Us Page We Will Make Will Likewise Show The Details Of Your Post And Remark And It Look Extremely Lovely.

So How About We Start The Method Involved With Adding This Page. You Just Need To Add A Few Codes In Your Page. So Cautiously Follow The Beneath Given Advances So You Can Without Much Of A Stretch Make This.

• Step 1: First Of All Login To Your Blogger Dashboard.
• Step 2: On Blogger Dashboard, Click Pages.
• Step 3: Either Create A New Page By Clicking On Icon Or Click On The Existing Page To Add Codes There.
• Step 4: Switch To HTML View.
• Step 5: Paste The Following Codes In It And Publish Your Page.
  
HTML

<!--[ 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="Logo is missing" src="add image url" />
    <!--[ Author Description ]-->
    <p>Hello!<br />
My name is E3xSA<br />
Unknown<br />
Unknown<br />
Thanks for your visit you can find us by typing: <strong>thecyberterminal.blogspot.com</strong></p>
    <div class='athrBtn'>
      <a class='button' href='https://www.instagram.com/thecyberterminal' target='_blank'>
        <!--[ Button SVG ]-->
        <svg class='line' viewBox='0 0 24 24'><g transform='translate(5.000000, 2.400000)'><path d='M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z'/><path d='M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z'/></g></svg>
        <!--[ Button Text ]-->
        Author Profile
      </a>
    </div>
  </div>
</div>
<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Blog Stats
</h3>

<!--[ Website Statistics ]-->
<div class="statsWebsite">
  <!--[ Page Views Count ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"></path><path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Total Visits
      </div>
      <div class="statsNumber v">
        <!--[ Website Views]-->
        <span class="pu-views" data-id="WebsiteStats" data-text="100K"></span>
      </div>
    </div>
  </div>
  
  <!--[ Posts Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001"></path><path d="M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z"></path><line x1="13.009" x2="16.604" y1="3.8008" y2="6.9838"></line></g></svg>
        <!--[ Stats Name ]-->
        Posts
      </div>
      <div class="statsNumber odometer" id="postCount">0</div>
    </div>
  </div>
  
  <!--[ Comments Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><line x1="13.9394" x2="13.9484" y1="10.413" y2="10.413"></line><line x1="9.9304" x2="9.9394" y1="10.413" y2="10.413"></line><line x1="5.9214" x2="5.9304" y1="10.413" y2="10.413"></line><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Comments
      </div>
      <div class="statsNumber odometer" id="commentCount">0</div>
    </div>
  </div>
    <!--[ Since ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M19.2498,10.0001 C19.2498,15.1081 15.1088,19.2501 9.9998,19.2501 C4.8918,19.2501 0.7498,15.1081 0.7498,10.0001 C0.7498,4.8911 4.8918,0.7501 9.9998,0.7501 C15.1088,0.7501 19.2498,4.8911 19.2498,10.0001 Z"></path><polyline points="14.1907 10.7672 9.6607 10.6932 9.6607 5.8462"></polyline></g></svg>
        <!--[ Stats Name ]-->
       Since
      </div>
      <div class="statsNumber">Dec 2022</div>
    </div>
  </div>
</div>
<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Youtube Stats
</h3>

<!--[ Youtube Statistics ]-->
<div class="statsWebsite">
  <!--[ Subscribers Count ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
       <svg class="line" viewbox="0 0 24 24"><g transform="translate(1.000000, 3.000000)"><path d="M10.9725,17.3682 C7.7335,17.3682 4.9665,16.8782 4.9665,14.9162 C4.9665,12.9542 7.7155,11.2462 10.9725,11.2462 C14.2115,11.2462 16.9785,12.9382 16.9785,14.8992 C16.9785,16.8602 14.2295,17.3682 10.9725,17.3682 Z"></path><path d="M10.9725,8.4487 C13.0985,8.4487 14.8225,6.7257 14.8225,4.5997 C14.8225,2.4737 13.0985,0.7497 10.9725,0.7497 C8.8465,0.7497 7.12248426,2.4737 7.12248426,4.5997 C7.1165,6.7177 8.8265,8.4417 10.9455,8.4487 L10.9725,8.4487 Z"></path><path d="M17.3622,7.3916 C18.5992,7.0606 19.5112,5.9326 19.5112,4.5896 C19.5112,3.1886 18.5182,2.0186 17.1962,1.7486"></path><path d="M17.9432,10.5444 C19.6972,10.5444 21.1952,11.7334 21.1952,12.7954 C21.1952,13.4204 20.6782,14.1014 19.8942,14.2854"></path><path d="M4.5838,7.3916 C3.3458,7.0606 2.4338,5.9326 2.4338,4.5896 C2.4338,3.1886 3.4278,2.0186 4.7488,1.7486"></path><path d="M4.0018,10.5444 C2.2478,10.5444 0.7498,11.7334 0.7498,12.7954 C0.7498,13.4204 1.2668,14.1014 2.0518,14.2854"></path></g></svg>
        <!--[ Stats Name ]-->
        Subscribers
      </div>
      <div class="statsNumber odometer" id="youtubeSubscriber"></div>
    </div>
  </div>
  
  <!--[ Videos Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
<svg class="line" viewbox="0 0 24 24"><g transform="translate(2.514381, 5.114095)"><path d="M13.6370476,4.55866688 C15.4751429,3.10152403 17.9418095,1.69200022 18.4084762,2.19676212 C19.1799048,3.02533355 19.1132381,10.9110478 18.4084762,11.6634288 C17.9799048,12.1300955 15.4941905,10.7205716 13.6370476,9.2729526"></path><path d="M-6.21724894e-15,6.92285714 C-6.21724894e-15,1.73047619 1.7247619,-2.66453526e-15 6.90095238,-2.66453526e-15 C12.0761905,-2.66453526e-15 13.8009524,1.73047619 13.8009524,6.92285714 C13.8009524,12.1142857 12.0761905,13.8457143 6.90095238,13.8457143 C1.7247619,13.8457143 -6.21724894e-15,12.1142857 -6.21724894e-15,6.92285714 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Videos
      </div>
      <div class="statsNumber odometer" id="youtubeVideo"></div>
    </div>
  </div>
  
  <!--[ Views Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
       <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"></path><path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Views
      </div>
      <div class="statsNumber odometer" id="youtubeView"></div>
    </div>
  </div>
    <!--[ Since ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M19.2498,10.0001 C19.2498,15.1081 15.1088,19.2501 9.9998,19.2501 C4.8918,19.2501 0.7498,15.1081 0.7498,10.0001 C0.7498,4.8911 4.8918,0.7501 9.9998,0.7501 C15.1088,0.7501 19.2498,4.8911 19.2498,10.0001 Z"></path><polyline points="14.1907 10.7672 9.6607 10.6932 9.6607 5.8462"></polyline></g></svg>
        <!--[ Stats Name ]-->
       Started on
      </div>
      <div class="statsNumber">Dec 2022</div>
    </div>
  </div>
</div>
<!--[ Telegram Count ]-->
<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Telegram Stats
</h3>

<div class="statsWebsite">
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
         <svg class="line" viewbox="0 0 24 24"><g transform="translate(1.000000, 3.000000)"><path d="M10.9725,17.3682 C7.7335,17.3682 4.9665,16.8782 4.9665,14.9162 C4.9665,12.9542 7.7155,11.2462 10.9725,11.2462 C14.2115,11.2462 16.9785,12.9382 16.9785,14.8992 C16.9785,16.8602 14.2295,17.3682 10.9725,17.3682 Z"></path><path d="M10.9725,8.4487 C13.0985,8.4487 14.8225,6.7257 14.8225,4.5997 C14.8225,2.4737 13.0985,0.7497 10.9725,0.7497 C8.8465,0.7497 7.12248426,2.4737 7.12248426,4.5997 C7.1165,6.7177 8.8265,8.4417 10.9455,8.4487 L10.9725,8.4487 Z"></path><path d="M17.3622,7.3916 C18.5992,7.0606 19.5112,5.9326 19.5112,4.5896 C19.5112,3.1886 18.5182,2.0186 17.1962,1.7486"></path><path d="M17.9432,10.5444 C19.6972,10.5444 21.1952,11.7334 21.1952,12.7954 C21.1952,13.4204 20.6782,14.1014 19.8942,14.2854"></path><path d="M4.5838,7.3916 C3.3458,7.0606 2.4338,5.9326 2.4338,4.5896 C2.4338,3.1886 3.4278,2.0186 4.7488,1.7486"></path><path d="M4.0018,10.5444 C2.2478,10.5444 0.7498,11.7334 0.7498,12.7954 C0.7498,13.4204 1.2668,14.1014 2.0518,14.2854"></path></g></svg>
        <!--[ Stats Name ]-->
        Channel Subscribers
      </div>
      <div class="statsNumber odometer" id="channelMembers"></div>
    </div>
  </div>
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
         <svg class="line" viewbox="0 0 24 24"><g transform="translate(1.000000, 3.000000)"><path d="M10.9725,17.3682 C7.7335,17.3682 4.9665,16.8782 4.9665,14.9162 C4.9665,12.9542 7.7155,11.2462 10.9725,11.2462 C14.2115,11.2462 16.9785,12.9382 16.9785,14.8992 C16.9785,16.8602 14.2295,17.3682 10.9725,17.3682 Z"></path><path d="M10.9725,8.4487 C13.0985,8.4487 14.8225,6.7257 14.8225,4.5997 C14.8225,2.4737 13.0985,0.7497 10.9725,0.7497 C8.8465,0.7497 7.12248426,2.4737 7.12248426,4.5997 C7.1165,6.7177 8.8265,8.4417 10.9455,8.4487 L10.9725,8.4487 Z"></path><path d="M17.3622,7.3916 C18.5992,7.0606 19.5112,5.9326 19.5112,4.5896 C19.5112,3.1886 18.5182,2.0186 17.1962,1.7486"></path><path d="M17.9432,10.5444 C19.6972,10.5444 21.1952,11.7334 21.1952,12.7954 C21.1952,13.4204 20.6782,14.1014 19.8942,14.2854"></path><path d="M4.5838,7.3916 C3.3458,7.0606 2.4338,5.9326 2.4338,4.5896 C2.4338,3.1886 3.4278,2.0186 4.7488,1.7486"></path><path d="M4.0018,10.5444 C2.2478,10.5444 0.7498,11.7334 0.7498,12.7954 C0.7498,13.4204 1.2668,14.1014 2.0518,14.2854"></path></g></svg>
        <!--[ Stats Name ]-->
        Group Members
      </div>
      <div class="statsNumber odometer" id="groupMembers"></div>
    </div>
  </div>
</div>
<style>/*<![CDATA[*/
/* 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)}
@media screen and (min-width:641px){.aboutAuthor .aboutCont{max-width:97%} .statsWebsite{flex-direction:row} .statsCont{max-width:46%;margin:12px}}
/* 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>
<!--[ Odometer Stylesheet ]-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-default.min.css" rel="stylesheet">
<!--[ Odometer JS ]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>
<script>
  /*<![CDATA[*/
  /* Get Ajax */
  function getAjax(t){var r=new XMLHttpRequest;try{r=new XMLHttpRequest}catch(e){try{r=new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{r=new ActiveXObject("Microsoft.XMLHTTP")}catch(e){return console.warn("Something went wrong!"),!1}}}if(r.open("GET",t.url,t.async),t.setRequestHeader)for(var e in t.setRequestHeader)r.setRequestHeader(e,t.setRequestHeader[e]);r.send(),r.onreadystatechange=function(){var e;4===r.readyState&&(200===r.status?(e=r.responseText,t.success&&t.success(e)):t.error&&t.error(r))}};
  
  document.addEventListener('DOMContentLoaded', function (){
    /* Config */
    const tgbTkn = '########################',
          gcpTkn = '########################',
          group = '@############',
          tgChnl = '@############',
          ytChnl = '########################';
    
    /* Posts Count */
    getAjax({
      url: '//' + window.location.hostname + '/feeds/posts/default?alt=json',
      async: true,
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#postCount').innerHTML = parseInt(data.feed.openSearch$totalResults.$t,10);
      }
    });
    
    /* Comments Count */
    getAjax({
      url: '//' + window.location.hostname + '/feeds/comments/default?alt=json',
      async: true,
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#commentCount').innerHTML = parseInt(data.feed.openSearch$totalResults.$t,10);
      }
    });
    
    /* Telegram Group Members Count */
    getAjax({
      url: 'https://api.telegram.org/bot' + tgbTkn + '/getChatMembersCount?chat_id=' + group,
      async: true,
      setRequestHeader: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#groupMembers').innerHTML = data['result'];
      }
    });
    
    /* Telegram Channel Subscribers Count */
    getAjax({
      url: 'https://api.telegram.org/bot' + tgbTkn + '/getChatMembersCount?chat_id=' + tgChnl,
      async: true,
      setRequestHeader: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#channelMembers').innerHTML = data['result'];
      }
    });
    
    /* YouTube Stats */
    getAjax({
      url: 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=' + ytChnl + '&key=' + gcpTkn,
      async: true,
      success: function(data){
        data = JSON.parse(data);
        document.querySelector('#youtubeSubscriber').innerHTML = data["items"][0].statistics.subscriberCount;
        document.querySelector('#youtubeVideo').innerHTML = data["items"][0].statistics.videoCount;
        document.querySelector('#youtubeView').innerHTML = data["items"][0].statistics.viewCount;
      }
    });
  });
  /*]]>*/
</script>

• NOTE:
  
• Change Author Profile Picture.
• Change Author Description.
• Change tgbTkn To Your Telegram Bot API Token.
• Change gcpTkn To Your Google Cloud Platform API.
• Change Group To Your Telegram Group Username.
• Change tgChnl To Your Telegram Channel Username.
• Change ytChnl To Your YouTube Channel URL (Standard Channel URL).
  

Now You Have Completed All The Steps And Successfully Created Stylish And Responsive About Author Page. Please Add That Page In Your Template So That Visitors Can View This Page.

That Is It, We Have Finally Created The An About Us Page For Your Blog, If You Have Any Problem In Making This Please Tell Me In The Comment Box, I Will Try To Fix It As Soon As Possible