Hello Everyone, Today in this Tutorial I will show you How To Add Stylish About Us Page in Blogger Website. This Stylish About US Page in Blogger is made with the help of HTML and CSS. So You can use it any Platform like WordPress. This Stylish About Us page is also responsive with All Devices.
In this Stylish About Us page, You can introduce about the websites and apps created by you and your team, How many apps and websites have been designed by the team of Your Website. You can also add your Team members Avatar Photos with name and Post. About Us page is very important to get Google Adsense.
So If you want to add it in Your Blogger Website then Follow this tutorial. So let's get started.
How To Create Stylish About Us Page in Blogger :-
Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login with Your Blogger Account.
Step 3 :- Now Select The Page Menu.
Step 3 :- And Create a New Page.
Note :- Add Your Page Title And Description According To You Need. Well you have to keep about us instead of title
Step 4 :- After Click on Html View.
Step 5 :- Then Copy The Below Code and Paste it in Html View.
<div class="about-container">
<div class="profile-image">
<img src="https://cdn.pixabay.com/photo/2016/08/20/05/38/avatar-1606916_960_720.png" alt="" />
</div>
<div class="description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque a
quam nulla ipsa natus quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum ex
odit tenetur alias expedita impedit in veritatis mollitia ipsam quae
et quia, deleniti facere praesentium sunt assumenda earum saepe
aperiam ullam sit. Tempora animi maxime a velit soluta laboriosam quo!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, tempora!
</p>
</div>
<div class="projects-container">
<div class="project">
<h3 class="project-name">Websites Designed</h3>
<div class="project-number odometer websites-designed">0</div>
</div>
<div class="project">
<h3 class="project-name">Apps Developed</h3>
<div class="project-number odometer apps-developed">0</div>
</div>
</div>
<h2 class="our-team-heading">Our Team</h2>
<div class="our-team">
<div class="team-member">
<img src="https://cdn.pixabay.com/photo/2016/08/20/05/38/avatar-1606916_960_720.png" alt="" />
<div class="designation">
<strong>Alice J.,</strong> (Project Manager)
</div>
</div>
<div class="team-member">
<img src="https://cdn.pixabay.com/photo/2016/08/20/05/38/avatar-1606916_960_720.png" alt="" />
<div class="designation">
<strong>Dave B.,</strong> (Lead Designer)
</div>
</div>
<div class="team-member">
<img src="https://cdn.pixabay.com/photo/2016/08/20/05/38/avatar-1606916_960_720.png" alt="" />
<div class="designation">
<strong>Jeniffer A.,</strong> (Lead Programmer)
</div>
</div>
</div>
<div class="our-mission">
<img class="https://image.flaticon.com/icons/png/512/206/206058.png" alt="" />
<p>Our mission is to provide the best services to our clients.</p>
</div>
</div>
Step 6 :- Now Publish Your About US Page.
Step 7 :- Now its time to add CSS and StyleSheet in blogger Theme. So Click on Theme Menu.
Step 8 :- After this Click on Edit HTML.
Step 9 :- Then Copy the Code Provided Below and Paste it Above </body> or <!--</body>--></body> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>
<script>
const websitesDesigned = document.querySelector(".websites-designed");
const appsdeveloped = document.querySelector(".apps-developed");
setTimeout(() => {
websitesDesigned.innerHTML = "43";
appsdeveloped.innerHTML = "15";
}, 400);
</script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-default.min.css"
/>
Step 10 :- Now Copy the Code Provided Below and paste it Above ]]></b:skin> tag.
.about-container {
max-width: 900px;
margin: 0 auto;
font-family: "Roboto", sans-serif;
}
.about-container p {
line-height: 2;
padding: 0 20px;
}
.about-container .profile-image {
text-align: center;
padding: 30px;
}
.about-container .profile-image img {
width: 200px;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
padding: 8px;
}
.projects-container {
display: flex;
justify-content: center;
padding: 8px;
box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.4);
max-width: 550px;
margin: 24px auto;
border-radius: 20px;
}
.projects-container .project {
height: 160px;
width: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0 32px;
}
.projects-container .project-name {
font-size: 16px;
}
.projects-container .project-number {
font-size: 72px;
font-weight: bold;
}
.our-team-heading {
text-align: center;
text-transform: uppercase;
font-size: 48px;
padding-top: 64px;
}
.our-team {
display: flex;
padding: 30px;
}
.our-team img {
width: 100%;
}
.our-team .team-member {
margin: 0 4px;
position: relative;
}
.our-team .designation {
position: absolute;
bottom: 30px;
background: #fff;
padding: 12px 20px;
border-radius: 0 20px 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
font-size: 14px;
}
.about-container .our-mission {
padding: 20px;
position: relative;
display: flex;
align-items: center;
}
.about-container .our-mission .quote-icon {
position: absolute;
opacity: 0.2;
height: 80px;
}
.about-container .our-mission p {
margin-left: 100px;
font-size: 20px;
font-style: italic;
}
@media (max-width: 700px) {
.our-team {
flex-direction: column;
align-items: center;
}
.our-team img {
height: 250px;
width: 300px;
object-fit: cover;
}
}
Step 11 :- Now Do not Forget to Click on Save Button. Finished and Now Check Your Stylish About Us Page.
Conclusion :-
Well Thats Great Tutorial on How To Add Stylish About Us Page in Blogger Website will be helpful for You and your Blogger Website. If you face any any problem then put your valuable comment.
Post a Comment
Post a Comment