How To Add A Stylish About us Page in Blogger using HTML & CSS

Author/About Us awesome Page

Author/About Us awesome Page For blogger

   View Demo

Step 1: First of all Login to your Blogger Dashboard.

Step 2: In Blogger, create a post or page and insert the code shown below.

Step 3: Copy and paste the following code into Blogger's blog Post.

<div class="aboutAuthor"> <div class="ABDULLAHCODED_bio"> <img alt="About ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yRQRIkEmT81ZzZIYXIejtTCsmg0uJ6Yrmibu0Xqzr_E9EP4o6y4CjkwZxsmH0GQWz6JLI6uyjNRpWnDfYGBWqe7dgvSjkUhL6C88g8_w6-Np_84uqU3Z4czhagbXo9rx_MKaJN7JZY2q4a7bX5CbE-R5Th3T-vvLtqgeRy-6lfSHBGw/s220/Victor_Logo8_Tech_Ankur-removebg-preview.png"> <h2> About ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ </h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium augue non orci pharetra, eget dictum ante sagittis. Suspendisse eu nibh justo. Cras scelerisque urna lectus. Praesent rhoncus ut risus quis convallis. Praesent nec lorem eros.</p> <div class="abdullahcodedAbout-bt"> <a class="button" href="#"><svg class="ABDULLAHCODEDsvg" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z"></path></g></svg> Join the Community</a> </div> </div> </div> <style> .aboutAuthor { padding: 60px 0 20px 0; } .aboutAuthor .ABDULLAHCODED_bio { justify-content: center; position: relative; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; max-width: 95%; margin: auto; padding: 80px 15px 65px 15px; /*background-color: #FFF;*/ box-shadow: 0 10px 40px rgba(149,157,165,.2); border-radius: 20px; border: 5px solid #404040; } .aboutAuthor .ABDULLAHCODED_bio img { background-image: linear-gradient(to top right,#ffffff,#ffa24d); box-shadow: 0 5px 20px rgba(0,0,0,.2); padding: 0; border: 7px solid #ffc2b4; width: 120px; height: 120px; position: absolute; border-radius: 50%; top: -60px; pointer-events: none; } .aboutAuthor .ABDULLAHCODED_bio h2{ margin:0px!important; padding: 0; } .aboutAuthor .ABDULLAHCODED_bio p { margin: 1em 0!important; text-align: center; } .aboutAuthor .ABDULLAHCODED_bio .abdullahcodedAbout-bt { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; } .abdullahcodedAbout-bt svg  { width: 22px; height: 22px; fill: #FFF; margin-right:3px; } .darkmoade .aboutAuthor .ABDULLAHCODED_bio { background-color: var(--dark-bgAlt); } </style>

Conclusion

I hope you have successfully added your About Us Page. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright ©
ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ