Also Read

How To Add A Modern UI About Author Page In Blogger?

An about author page is a brief presentation of a site and site owner. In this post you will get to know how to create an author page in blogger.  An effective author page is short and professional information about the site owner author.

What Is An About Author Page?

An about author page, or author bio page, is mostly found in the about us page or a separate about author page. It tells reader a little about the author of the site.

 

What Is The Purpose Of An About Author Page?

Mainly, an author page or author bio page is usually found at the about us page. In digital publishing, you'll find an author page on site. This page is how readers find out more about the site owner of the site and profile. Total posts and comments and useful profile link are found in about author page.

 

How Do Add A Modern UI About Author Page?

Here are the steps.

Step 1:

Go to Blogger dashboard.

Step 2:

Click on Pages> New Page.

Step 3:

Switch to HTML view.

Step 4:

Copy the below codes and customize as per your site.

  <style>/*<![CDATA[*/ /* About Author Page by Mate Lists */ .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 Mate Lists ]--> <div class="aAthrP"> <!--[ About Author ]--> <div class="aAdm"> <div class="aAdmC"> <!--[ Author Profile Picture ]--> <img alt="Your Site Title" src="Your Profile or Site Logo" /> <!--[ Author Description ]--> <div class="aAdmD"> <p>Your Site Description</p> </div> <div class="aAdmB"> <a class="btn" href="Your Site URL"> <!--[ Button Icon ]--> <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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 ]--> Visit Us </a> <a class="btn" href="Your Group URL"> <!--[ 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> <a href='https://matelists.blogspot.com/'></a> <!--[ 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>

Step 5:

Customization:

* Your Site Title

* Your Profile or Site Logo URL

* Your Site Description

* Your Site URL

* Your Group URL

Step 6:

Publish the page.

You are done.

Hope you have successfully added a modern ui about author page in blogger. If you liked this article please share it with your friends.