In this article, you will learn how to add an about us page in Blogger using HTML & CSS codes only. For this, you need to follow the below steps given below.
About us page is very important for a website or blog as it gives more information about the website and it also helps in Search engine Optimization. (SEO) You will also need this page to get AdSense Approval.
I have previously covered How to create a basic About us, privacy policy, contact, and sitemap page in Blogger.
Here, I will show you how you can design your About us page with an Info Box design with a call to action (CTA) button. Here, you can add an About image/ website Logo, heading and paragraph and a clickable button.
So, let's start with the about us page design.
Steps to Add About us section in Blogger
To add this about us section you need to create a new page or edit the existing page. Now name it as "About Us" and switch to "HTML View".
Now copy and paste the below code in it and change the Heading, paragraph, and link of the button.
<div class="aboutAuthor">
<div class="K2_bio">
<img alt="About Techyleaf" src="https://blogger.googleusercontent.com/img/a/AVvXsEgWbMp_6DTx-j9wlpuj858lpEqzkizVHK6VDvhHG1WIX_6DxXjcIeeJ0I4Oqe3JLyn8qVGMUb4ZF_dSU06cz-EQnD6_yb15zWaselHSjH9vTLEAIVKUgoPAeNIN0SF6P0wavViVZhix2ZU7phNgBeR9HLgEGzDAe1hSPfKOFKOZimT6JrjAxa3IUjGb">
<h2> About Techyleaf </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="k2About-bt">
<a class="button" href="#"><svg class="K2svg" 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 .K2_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 .K2_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 .K2_bio h2{
margin:0px!important;
padding: 0;
}
.aboutAuthor .K2_bio p {
margin: 1em 0!important;
text-align: center;
}
.aboutAuthor .K2_bio .k2About-bt {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.k2About-bt svg {
width: 22px;
height: 22px;
fill: #FFF;
margin-right:3px;
}
.darkmoade .aboutAuthor .K2_bio {
background-color: var(--dark-bgAlt);
}
</style> Now upload an image and replace the source URL in it and publish the page. Now the about us section is added to your Blogger website.
Copyright Notice:
You are free to use it in your own Blog but can't share this code anywhere online without giving a proper credit link to the original source.
If you have any doubts or having trouble with implementation, let me know in the comment section.
Bookmark This Blogger: 😌