In the modern blogging era, particularly with Google’s emphasis on E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness), showing your readers who is behind the content is no longer optional—it is a necessity. For Blogger users, adding an "About the Author" section often involves heavy, slow-loading widgets or complex plugins that clutter the code.
Today, we are going to build a professional, responsive, and lightweight Custom Author Box using only clean HTML and CSS. This method ensures your site stays fast while giving your brand a human face.
Why Every Blogger Needs a Custom Author Bio
Before we dive into the code, it is important to understand the strategic value of an author box. When a reader finishes an article, they are at a "decision point." They will either leave your site or engage further. An author box provides a bridge. It tells the reader why they should trust your advice—whether it’s about C++ programming or SEO strategies—and gives them a clear path to follow you on social media or read more of your work.
The Architecture of a Great Author Box
A professional author bio consists of four key elements:
- The Avatar: A high-quality, circular headshot.
- The Name & Title: Your name and a brief professional tagline (e.g., "Senior Java Developer").
- The Narrative: A 2-3 sentence biography that highlights your expertise and personality.
- Social Connectivity: Minimalist icons linking to your LinkedIn, X (Twitter), or GitHub.
Step 1: The HTML Structure
Copy the following code and paste it into a HTML/JavaScript Widget in your Blogger layout, or directly into your theme's XML (usually after the <data:post.body/> tag).
<div class='sj-author-box'>
<div class='sj-author-image'>
<img src='https://placehold.co/100x100' alt='Author Name'/>
</div>
<div class='sj-author-details'>
<h4>About the Author: <span class='author-name'>Your Name</span></h4>
<p>Welcome to Script Jabbers! I am a software enthusiast with over 10 years of experience in Java and C++. My goal is to simplify complex coding concepts and help bloggers optimize their sites for the modern web.</p>
<div class='sj-author-social'>
<a href='#' target='_blank'>Twitter</a>
<a href='#' target='_blank'>LinkedIn</a>
<a href='#' target='_blank'>GitHub</a>
</div>
</div>
</div>
Step 2: The CSS Styling (The "Magic")
To make the box look professional, add this CSS to your blog's Custom CSS section. This design uses a modern "Card" aesthetic with soft shadows and a responsive layout that works perfectly on mobile devices.
.sj-author-box {
display: flex;
align-items: center;
background: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-top: 40px;
border: 1px solid #eee;
font-family: 'Segoe UI', sans-serif;
}
.sj-author-image img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #3498db;
margin-right: 25px;
}
.sj-author-details h4 {
margin: 0 0 10px 0;
font-size: 1.2rem;
color: #2c3e50;
}
.sj-author-details .author-name {
color: #3498db;
font-weight: bold;
}
.sj-author-details p {
margin: 0 0 15px 0;
font-size: 0.95rem;
line-height: 1.6;
color: #555;
}
.sj-author-social a {
text-decoration: none;
font-size: 0.85rem;
color: #fff;
background: #3498db;
padding: 5px 12px;
border-radius: 4px;
margin-right: 10px;
transition: background 0.3s ease;
}
.sj-author-social a:hover {
background: #2980b9;
}
/* Mobile Responsiveness */
@media (max-width: 600px) {
.sj-author-box {
flex-direction: column;
text-align: center;
}
.sj-author-image img {
margin-right: 0;
margin-bottom: 20px;
}
}
Step 3: Customizing for Your Brand
The code above is a "skeleton." To make it truly yours:
Colors: Change #3498db to match your blog’s primary brand color.
Icons: Instead of text links for social media, you can use FontAwesome icons for a cleaner, more visual look.
Dynamic Data: If you are comfortable with Blogger's XML tags, you can replace "Your Name" with <data:post.author/> so it automatically updates based on who wrote the post.
Comments
Post a Comment