Our Aim is to Help You

Reach Dour Destination.

Join CreatorYT for expert YouTube tips and Algrow strategies! Boost your views, gain subscribers, and stay ahead with our actionable insights and channel analysis.

Create & Inspire

Empowering creators to reach new heights.

Creative Hub

Where ideas come to life with CreatorYT.

Learn More

How to Create a Custom About Us Page for Your Blogger Website - A Step-by-Step Guide

Learn how to create a custom About Us page for your Blogger website with our easy step-by-step guide. Enhance your blog's identity today!
create-custom-about-us-page-blogger

Have you ever thought about how important an "About Us" page is for your blog? This page is more than just a formality; it offers your readers a chance to get to know you better. A well-crafted "About Us" page conveys your story, mission, and the vision behind your blog.

Did you know that creating a custom "About Us" page can be incredibly easy? In this article, we will guide you through simple steps to design a page that attracts your readers and connects them to your blog. Are you ready? Let’s get started!

What is an 'About Us' Page?

An "About Us" page is your chance to introduce yourself and your blog to your readers. Think of it as your personal welcome mat! This page tells your audience who you are, what you care about, and what they can expect from your content.

Why Is It Important?

Having a strong "About Us" page is crucial because it helps build a connection with your readers. When they understand your story and your mission, they’re more likely to trust you and stick around for more of your content. Here’s what you typically include:

Your Story: Share how your blogging journey began. What led you to start this blog, and what keeps you motivated? Your story makes your blog relatable and can inspire others.

Your Mission: What’s the goal of your blog? Are you here to share tips, provide valuable insights, or entertain? Clearly stating your mission can attract the right audience who resonates with your goals.

Meet the Team: If you work with others, introduce them here! This gives your blog a personal touch and shows readers that they’re engaging with real people.

An engaging "About Us" page is not just about facts; it’s about creating a connection. So, take a moment to think about what you want your readers to know about you!

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.

In short, a well-thought-out "About Us" page can significantly enhance your blog’s appeal and create a positive impact on your audience.

Step 1: Access Your Blogger Dashboard

  1. Log in to your Blogger account.
  2. Navigate to the Pages section on the left sidebar.
  3. 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>
Remember: The above code is essential for setting up your "About Us" section effectively!

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 &amp; 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>
Note: This JavaScript will create a welcoming alert for visitors when they land on your page!

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.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.