Join our Telegram and Youtube Channels

How to add stylish About Us Page Script on Blogger - Pixabin Official

add stylish About Us Page Script on Blogger

What is about our page?

About Us Page is an important page used on your website. This page will help you to let your users know about you and what your website is about through this page. Now let's see how to add this about us page to your blogger page.

How does it work this about us page?

This about us page is UI designed clean and professional-looking page script. This page has four sections.

 The first section is the logo section. This section showed your logo top center of your page.

The second section is the description section. This section helps to show your site description or your description. 

The third section is the site post counting section. This section helps to show you are all over post counting on blogger website. 

The fourth and final section is the comment section, this section helps to show your comment counting on your blogger website.

How to add this about us page on your blogger website?

Go to your blogger dashboard.

After, select the "page" section and create a "new page".

Next, open your newly created page. And, covert to "HTML mode".

Now, copy the below script and paste it on your newly created page on your blogger website.


<style>/*<![CDATA[*/
/* About Author Page by Fineshop */
.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:#482dff;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}
.darkMode .aAthrP{color:#fefefe}
.darkMode .aAdmC{background-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.darkMode .aAdmC img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.darkMode .aAdmB .btn{background-color:#8775f5}
.darkMode .webStsC{background-color:#252526;box-shadow:0 5px 20px rgba(0,0,0,.2)}
.darkMode .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}}
/*]]>*/</style>

<script>/*<![CDATA[*/ function webStats(json){document.write(parseInt(json.feed.openSearch$totalResults.$t,10))} /*]]>*/</script>

<!--[ About Author Page by Fineshop ]-->
<div class='aAthrP'>
  <!--[ About Author ]-->
  <div class='aAdm'>
    <div class='aAdmC'>
      <!--[ Author Profile Picture ]-->
      <img alt='alt_here' src='image_src_here' />
      <!--[ Author Description ]-->
      <div class='aAdmD'>
        <p>author_description_here</p>
      </div>
      <div class='aAdmB'>
        <a class='btn' href='#'>
          <!--[ Button Icon ]-->
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><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)'/></g></svg>
          <!--[ Button Text ]-->
          Donate Us
        </a>
        <a class='btn' href='#'>
          <!--[ Button Icon ]-->
          <svg xmlns='http://www.w3.org/2000/svg' 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
        </a>
      </div>
    </div>
  </div>

  <!--[ 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='http://www.w3.org/2000/svg' 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 ]-->
          Posts
        </div>
        <div class='statsNu'>
          <!--[ Stats Number ]-->
          <script src='/feeds/posts/default?alt=json-in-script&callback=webStats'></script>
        </div>
      </div>
    </div>
  
    <!--[ Comments Stats ]-->
    <div class='webStsC'>
      <div class='stats'>
        <div class='statsNa'>
          <!--[ Icon ]-->
          <svg xmlns='http://www.w3.org/2000/svg' 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 ]-->
          Comments
        </div>
        <div class='statsNu'>
          <!--[ Stats Number ]-->
          <script src='/feeds/comments/default?alt=json-in-script&callback=webStats'></script>
        </div>
      </div>
    </div>
  </div>
</div>

Do not forget to save the page. Well done! Your About Us Page is Ready!

Final words

we hope this about us page script is helpful to you. If you want more scripts like this stay tuned with Us. If you do not forget to subscribe to our YouTube channel, telegram channel, and Google News.

You may also Like

Post a Comment