How To Add A Stylish About us Page in Blogger using HTML & CSS
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. [ Link of Video Tutorial]
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.
If you have any doubts or having trouble with implementation, let me know in the comment section.
You can also join our Telegram Group for Discussion.Â
Bro make infeed ad tutorial for median ui and imagz theme. Because for displaying recurring infeed ad is not working after load more post…..
have you checked the official documentation on how to show infeed ads on recurring basic after clicking on load more button?