Are you searching for How to create stylish About Us page for Blogger? Don't worry, you are at the right place. Here, in this article, we know how to create stylish About Us page in Blogger? I have shared an unique way of creating About us page. In previous articles, I have shared unique method of creating stylish Contact Us page for Blogger? So, if you are interested do check it.
Hello Everyone! Welcome to Bloggingzero. Today in this article, I am going to show you How to create stylish Responsive About Us page for Blogger?, I will also answer the most frequently asked queries - (i) How to create About Us page for Blogger? (ii) How to add stylish About Us page in Blogger? (iii) About us page generator for Blogger.
What is About us Page?
It is a section in a website where every thing about the site was mentioned. In simple terms, About us page helps visitor to know about concerning website and Builds the trust of your visitors in you.
Every website needs an about us page. With a good about us page visitors build a better connection with you. Because when a visitor comes to your website or blog for the first time, you are a stranger to them.
How to create About us page?
While creating an About us page for Blogger, it doesn't require any knowledge of HTML, CSS or JAVA Script. Here, I have shared already designed HTML code by Fineshop design which will help you in creating a stylish About us page in Blogger.
So, follow the following given steps for creating Stylish About us page for Blogger/Blogspot. Let's begin with the tutorial-
Step 1: First of all, Go to the Blogger Dashboard.
Step 2: Click on the Pages Option from the left of the menu.
Step 3: Now click on the Create a new Page option.
Step 4: Switch to HTML View from the compose view.
Step 5: Copy the given code and Paste it in HTML view.
<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>About_us_page_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>
</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>Step 6: Do the sudden changes as per your wish.
Step 7: After that click on the Publish icon.
Note : If your template has dark mode feature, and if you want a different color in dark mode, you can customize the code as per your requirement. Each template may have a different dark mode class, so please adjust it, you can replace the marked square with your own template dark mode class.
Your are Done!!!... Now you blog or website is ready with a stylish About us page. Make sure you add the link of your about us page in Header as well as in the Footer section of your Website.
Terms and Disclaimer
This HTML code of creating About Us Page for Blogger is Legally developed by Fineshop Design. Fineshop Design provides Plus UI Blogger Template, Blogging Tips, etc. So, If you are interested in it you may visit- https://www.fineshopdesign.com .
Conclusion
Here in the article we've learned How to create stylish About Us page for Blogger? in unique way. So, if you have any query regarding this topic or any thing please comment below or contact us.
Please.... Kindly share this methods with your friend circle so they too enjoy a clean website interface in blogger because Sharing is Caring.
Thanks for reading this article if you have any questions or queries in your mind feel free to contact us.