What is an 'About Us' Page?
What Are the Benefits of Having an 'About Us' Page for Your Blog and Audience?
Having a well-crafted "About Us" page offers numerous advantages for both your blog and your readers. Here’s how it can make a difference:
Builds Trust: When readers know more about you, they’re more likely to trust your content. This trust can lead to increased engagement and loyalty.
Creates a Personal Connection: Sharing your story allows readers to relate to you on a personal level. This connection can turn casual visitors into dedicated followers.
Improves SEO: An optimized "About Us" page can improve your blog’s visibility on search engines. Including relevant keywords related to your blog’s niche can help attract organic traffic.
Sets Expectations: By explaining your mission and what readers can expect from your content, you set clear expectations. This helps in attracting the right audience who resonates with your goals.
Encourages Interaction: A compelling "About Us" page can inspire readers to reach out, leave comments, or follow you on social media. This interaction can foster a sense of community around your blog.
Step 1: Access Your Blogger Dashboard
- Log in to your Blogger account.
- Navigate to the Pages section on the left sidebar.
- Click on New Page to create your "About Us" page.
Step 2: Add HTML Code
Use the following HTML code for your "About Us" page. This code will structure your page effectively.
<style> .about-container img { width: 400px; height: 100%; object-fit: cover; object-position: top; max-width: 300px; } .about-container { display: flex; gap: 40px; align-items: center; max-width: 1200px; margin-inline: auto; padding: 20px; font-family: "Roboto", sans-serif; color: #1d3557; overflow: hidden; isolation: isolate; } .about-container .icon { width: 30px; color: #e63946; flex-shrink: 0; padding: 0px; } .about-container .info { color: #457b9d; font-size: 18px; } .about-container h2 { font-size: 30px; line-height: 1.2; margin: 0; } .about-container p { font-size: 16px; line-height: 1.8; margin-top: 30px; } .about-container p.description { margin-top: 18px; } .about-container .features { display: flex; justify-content: space-between; background: #fff; padding: 16px; margin-block: 24px; } .about-container .feature { display: flex; flex: 1; gap: 16px; } .about-container .feature h3 { margin: 0; color: #1d3557; } .about-container .feature p { margin: 0; margin-top: 12px; } .about-container .btn { background: transparent; border: 2px solid #e63946; color: #1d3557; text-decoration: none; padding: 12px 40px; display: inline-block; font-size: 18px; font-weight: bold; margin-top: 16px; transition: all 300ms ease; } .about-container .btn:hover { background: #e63946; color: #fff; } .about-container .about-info { position: relative; } .about-container .bg-color { position: absolute; width: 300px; height: 300px; background: #00e600; top: 93px; right: 60px; z-index: -1; opacity: 0.6; border-radius: 50%; filter: blur(120px); } @media (max-width: 1100px) { .about-container .features { flex-direction: column; gap: 30px; } } @media (max-width: 970px) { .about-container { flex-direction: column; gap: 30px; max-width: 600px; } .about-container .about-image { width: 100%; height: 400px; } .about-container img { width: 100%; max-width: 100%; } .about-container h2 { font-size: 40px; } .about-container .bg-color { width: 240px; height: 200px; top: 233px; right: 160px; } } </style>
Step 3: Add JavaScript Code
To enhance the functionality of your "About Us" page, you’ll need to insert the following JavaScript code. This code can be used to add interactive elements to your page.
<div class="about-container">
<div class="about-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguoTcj1EJ6H3TBsaClDGpWda7OJuJF5h9oF99vJpRTqOydnFS36TFdOGC9rG9xNRQ8xc6x0RKikOtzqTl_Wu1UAUsOTXQZ4y_uLd6sQjllafoJiVk6z-uCO9qZPzjQqYQM2aoeUGyxdf0YXjRcR8_z7h-SAyQsTp2hcXhbflB7i24irp2nPCae3kqkM68/s1600/YYYY-ezgif.com-resize.jpg" />
</div>
<div class="about-info">
<p class="info">Our Aim is to Help You</p>
<h2>Reach Dour Destination.</h2>
<p class="description">
Join <a href="https://www.creatoryt.in/" target="_blank">CreatorYT</a> for expert YouTube tips and Algrow strategies! Boost your views, gain subscribers, and stay ahead with our actionable insights and channel analysis.
</p>
<div class="features">
<div class="feature">
<div class="icon">
<svg class="size-6" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" fill-rule="evenodd">
</path></svg>
</div>
<div class="feature-description">
<h3>Create & Inspire</h3>
<p>
Empowering creators to reach new heights.
</p>
</div>
</div>
<div class="feature">
<div class="icon">
<svg class="size-6" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" fill-rule="evenodd">
</path></svg>
</div>
<div class="feature-description">
<h3>Creative Hub</h3>
<p>Where ideas come to life with <a href="https://www.creatoryt.in/" target="_blank">CreatorYT</a>.</p>
</div>
</div>
</div>
<a class="btn" href="https://www.creatoryt.in/">Learn More</a>
<div class="bg-color"></div>
</div>
</div>
Step 4: Save and Publish
- After adding the codes, click on Save and then Publish your page.
- Make sure to check how your "About Us" page looks by previewing it.
Conclusion
By following these steps and utilizing the provided codes, you can easily create a custom "About Us" page that resonates with your audience. This page will serve as a valuable introduction to your blog and help foster trust with your readers.