Follow us to get updates regarding Latest posts Follow Now!

How to Create a Stylish About Author Page in Blogger with Blog stats

In this post I made a tutorial on How to Create a Stylish About Author Page in Blogger with Blog stats, I hope you have liked and it will be help

In this I made a tutorial on How to Create a Stylish About Author Page in Blogger with Blog stats, I hope you have liked and it will be help


Hello Everyone! Welcome back to Techy DarshaN, Toady on this occasion our tutorial is How to Create a Stylish About Author Page in Blogger with Blog stats,  About Author Page or About Us Page in a website is one of the important part because it helps the visitors to know about you and your website or blog and increases your visitor's trust on you.

Is About Author Page Important?

We all want to make one of most the often visited pages of our site, an incredible one! The About Us page is one of the main pages on your site. It is an open door where their guests get to know their organization. This is an opportunity for your clients' to present themselves and the sort of business they do to their customers. So you should make it extraordinary!

As visitors arrive on your website, they are hoping for a piece of introductory content, such as what/when/where/how details, which has to do with the About Us page. It’s a click away from the homepage, where it’s most required to make a quick impression.

Most successful businesses today realize that they need a strong web presence to make the most of the opportunities out there. Many spend a lot of time customizing their home pages to entice potential customers, but these same companies may be neglecting a very important section of their websites that is the About Us page. You probably know you’re supposed to have an About Us page or About Author page ; even the most rudimentary website templates include it. Then why are you too late,  create a About us page for your site.

What is  About Author Page in Blogger with Blog stats?

This About Author page that I am gonna provide you toady is very Responsive and as well as very attractive with it's own animations and appearance. You can add your site's logo and and your site's description in this about author page and the animation of the logo is very awesome and this automatically displays the Number of posts you have published in your blog and number of comments that your visitors have made in your blog and it will definitely doesn't disappoint you.

Creating this About author page and with blog stats is quite tricky and you must need some knowledge in HTML, CSS and JavaScript but toady you can make it very easily.  just follow the below simple steps. 

This About author page is not designed entirely by me I took some Codes from and Redesigned it and made it look more better and added some extra animations for Logo and also added some social median icons.


  1. Stylish animation to your Logo
  2. Add your Blog description
  3. Add your social median links
  4. Automatically shows the number of posts and comments in your blog
  5. New look to your About us page
  6. Change your old about us page to this new style

Let's Begin!


How to Create a Stylish About Author Page in Blogger with Blog stats ?

Step 1: Login to your  Blogger Dashboard
Step 2: Create a new page or edit a page 
Step 3: Now click on the Pencil icon at top left corner and Switch to HTML View from compose view 
Step 4: Now copy the following codes and paste them 

Edit the text and add your site's description and Logo url and also dont forget to add your social median links!

<div class="pInr">
<div class="pEnt" id="postID-2685985374247424294">
<div class="pBd postBody" id="postBody"><div class="Abt-pg">
  <img alt="Techy DarshaN" class="Abt-img" src="" title="Techy DarshaN" /></div>
@import url("|Rock+Salt|Shadows+Into+Light|Cedarville+Cursive");.Abt-pg{text-align:center}.Abt-img{text-align:center;width:180px;height:180px!important;margin:30px auto!important;animation:ripple 0.6s linear infinite;border-radius:100px!important}@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(255,145,0,0.1),0 0 0 20px rgba(255,145,0,0.1),0 0 0 40px rgba(255,145,0,0.1),0 0 0 60px rgba(255,145,0,0.1)}100%{box-shadow:0 0 0 20px rgba(255,145,0,0.1),0 0 0 40px rgba(255,145,0,0.1),0 0 0 60px rgba(255,145,0,0.1),0 0 0 80px rgba(255,145,0,0)}}.st-nm{color:#555eed;word-spacing:-8px}.pTtl{display:none}.pBd h1{margin:1.4em 0 20px}.signature{font-family:"Cedarville Cursive",cursive;font-size:1.4em}.Abt-footer{margin-top:65px!important;font-style:italic;font-family:cursive}</style>

/* About Author Page=*/
.aAthrP{font-size:0.9rem;color:#08102b}.aAthrP svg{width:18px;height:18px;fill:none!important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:7px}.webSts svg{stroke:#08102b}.aAdm{padding:60px 0 20px 0}.aAdm .aAdmC{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}.aAdmC img{position:absolute;top:-60px;background-color:#ffeaef;width:120px;height:120px;box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;border-radius:50%;pointer-events:none}.aAdmD{text-align:center}.aAdmD p{margin:0;line-height:1.7em}.aAdmB{text-align:center;position:absolute;bottom:30px;left:0;right:0}.aAdmB .btn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:50px;line-height:20px;color:#fefefe;background-color:#F47F16;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}.aAdmB .btn:hover{opacity:.8;transform:scale(0.97)}.webStsH{margin:15px auto;text-align:center;font-size:1.7rem;font-weight:700;font-family:inherit}.webSts{display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center;margin:12px auto}.webStsC{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}.webStsC .stats{height:80px;width:200px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0 35px}.webStsC .statsNa{display:inline-flex;align-items:center;font-size:16px}.webStsC .statsNu{font-family:inherit;font-size:30px;margin-top:6px;font-weight:normal}.drkM .aAthrP{color:#fefefe}.drkM .aAdmC{background-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drkM .aAdmC img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drkM .aAdmB .btn{background-color:#F47F16}.drkM .webStsC{background-color:#252526;box-shadow:0 5px 20px rgba(0,0,0,.2)}.drkM .webSts svg{stroke:#fefefe}@media screen and (min-width:641px){.aAdm .aAdmC{max-width:97%}.webSts{flex-direction:row}.webStsC{max-width:46%;margin:12px}}

<script>/*<![CDATA[*/ function webStats(json){document.write(parseInt(json.feed.openSearch$totalResults.$t,10))} /*]]>*/</script>
   <!--[ About Author Page ]-->
<div class="aAthrP">
  <!--[ About Author ]-->
  <div class="aAdm">
    <div class="aAdmC">
      <!--[ Author Description ]-->
      <div class="aAdmD">
        <p>Our Website Provides You Information About Blogging, Tips &amp; Tricks, Blogger Widgets, Free Tools To Set Up Your Site And Much More..</p><br/>
         <div class="icons">   <a class="twitter" href="#"><i class="fab fa-twitter"></i></a>    <a class="insta" href="#"><i class="fab fa-instagram"></i></a>   <a class="yt" href="#"><i class="fab fa-youtube"></i></a><br/>  </div>
      <div class="aAdmB">
        <a class="btn" href="">
         <!--[ Button Icon ]-->
          <svg viewbox="0 0 24 24" xmlns=""><g><path d="M104.10836,259.25648a5.81417,5.81417,0,0,0-8.34755-1.41453.97717.97717,0,0,1-1.17546,0,5.81416,5.81416,0,0,0-8.34752,1.4145,6.84387,6.84387,0,0,0,.137,7.53223c1.93424,2.97966,5.59943,7.87617,8.79824,7.87617s6.864-4.89654,8.79823-7.87618A6.84388,6.84388,0,0,0,104.10836,259.25648Z" transform="translate(-83.17308 -253.66485)"></path></g></svg>
          <!--[ Button Text ]-->
          Donate Us
        <a class="btn" href="">
           <!--[ Button Icon ]-->
          <svg xmlns='' viewBox='0 0 24 24'><g transform='translate(2.850300, 2.150000)'><path d='M7.072,19.6583 C3.258,19.6583 1.15463195e-13,19.0813 1.15463195e-13,16.7713 C1.15463195e-13,14.4613 3.237,12.3603 7.072,12.3603 C10.886,12.3603 14.144,14.4413 14.144,16.7503 C14.144,19.0593 10.907,19.6583 7.072,19.6583 Z'/><path d='M7.07200002,9.066 C9.57500002,9.066 11.605,7.036 11.605,4.533 C11.605,2.029 9.57500002,1.50990331e-14 7.07200002,1.50990331e-14 C4.56900002,1.50990331e-14 2.53897,2.029 2.53897,4.533 C2.53000002,7.027 4.54600002,9.057 7.04000002,9.066 L7.07200002,9.066 Z'/><line x1='16.281' y1='5.9791' x2='16.281' y2='9.9891'/><line x1='18.3273' y1='7.9839' x2='14.2373' y2='7.9839'/></g></svg>
          <!--[ Button Text ]-->
          Join Us

 <!--[ Stats Heading ]-->
  <h2 class='webStsH'>Website Stats</h2>

  <!--[ Website Statistics ]-->
  <div class='webSts'>
    <!--[ Posts Stats ]-->
    <div class='webStsC'>
      <div class='stats'>
        <div class='statsNa'>
          <!--[ Icon ]-->
          <svg xmlns='' viewBox='0 0 24 24'><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 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'/><line x1='13.009' y1='3.8008' x2='16.604' y2='6.9838'/></g></svg>
          <!--[ Stats Name ]-->
        <div class='statsNu'>
          <!--[ Stats Number ]-->
          <script src='/feeds/posts/default?alt=json-in-script&callback=webStats'></script>
    <!--[ Comments Stats ]-->
    <div class='webStsC'>
      <div class='stats'>
        <div class='statsNa'>
          <!--[ Icon ]-->
          <svg xmlns='' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line x1='13.9394' y1='10.413' x2='13.9484' y2='10.413'/><line x1='9.9304' y1='10.413' x2='9.9394' y2='10.413'/><line x1='5.9214' y1='10.413' x2='5.9304' y2='10.413'/><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'/></g></svg>
          <!--[ Stats Name ]-->
        <div class='statsNu'>
          <!--[ Stats Number ]-->
          <script src='/feeds/comments/default?alt=json-in-script&callback=webStats'></script>

  <link href="" rel="stylesheet"><link/> <style> @import url(';300;400;500;600;700&display=swap'); *{   margin: 0;   padding: 0;   box-sizing: border-box;}  .icons a{   background: #fff;   position: relative;   height: 60px;   width: 60px;   margin: 0 10px;   display: inline-flex;   text-decoration: none;   border-radius: 50%;   transition: all 0.3s;   box-shadow: -3px -3px 7px #ffffff,               3px 3px 5px #ceced1; } .icons a:hover:before{   content: "";   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0;   border-radius: 50%;   background: #ecf0f3;   box-shadow: inset -3px -3px 7px #ffffff,               inset 3px 3px 5px #ceced1; } .icons a i{   position: relative;   z-index: 3;   text-align: center;   width: 100%;   height: 100%;   font-size: 25px;   line-height: 60px; } .icons a:hover i{   transform: scale(0.9); } .icons a.fb i{   color: #4267B2; } .icons a.twitter i{   color: #1DA1F2; } .icons a.insta i{   color: #E1306C; } .icons a.git i{   color: #333; } .icons i{   color: #ff0000; } 
Step 5: Now click on save if you have followed all steps 


In this I post made a tutorial on How to Create a Stylish About Author Page in Blogger with Blog stats, I hope you have liked and it will be helpful for you and please do share with your friends and follow up our blog for more.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Techy DarshaN | All Rights Reserved 

 © Copyright

About the Author

Student | Developer | Blogger

إرسال تعليق

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.