Home / Blogging / how to add an elegant author box in blogger
Hwo to add an elegant author box in blogger
How to add an elegant author box in blogger

how to add an elegant author box in blogger

Are you looking for an Author Box for your blogger? If yes, I have one elegant Author box widget for your blog try this one and make your blog more professional because the visitor or the reader of your blog should know about its author, so this widget is considered as one of the most important and elegant widgets for your blogger. In this widget, you can write anything about you that you think your blog visitors should know about you and then they can also connect with you by means of any kind of social networking site in which you are available and they find it comfortable. This can also be considered as a marketing strategy as if one visitor likes your blog and about you, the way you approached your reader then he might just go and share this info with his/her friends and by this, you and your are just getting popular.
  1. Go to blogger Dashboard —–> Template —–> Edit HTML.
  2. Click anywhere in HTML area and press Ctrl+F (A Search Box will appear).
  3. Copy and paste the code 2.1 or 2.2 in the search box and press Enter from your keyboard.

 

 
2.1.<div class=‘post-footer’>
 
Try this code No#2.2 (if you don’t find matching code No#2.1)
 
2.2.<div class=“post-footer”>
 
Press ‘Enter’ twice to find the matching code.
 
 
When you find the exact matching code place this HTML code just above this <div class=‘post-footer’>  or  <div class=“post-footer”>  post-footer tag
 
 
<b:if cond=‘data:blog.pageType == “item”‘>
<div class=“authorbox”>
<div class=“authorimg”>
<img src=“LINK” alt=“About Me” />
</div>
<div class=“wraptext”>
<h4>YOUR NAME</h4>
<div class=“authordesc”>
DESCRIPTION ABOUT YOU (AROUND 50 WORDS)
</div></div></div>
</b:if>
 
 
Instructions
 
RED CODE: Do not change this code 
ORANGE AREA:  Replace this text with your name and description.  
 
Now
Go to blogger Dashboard —-> Template —-> Edit HTML.
Click anywhere in HTML Area and press Ctrl+F from your keyboard.
Search for this code  ]]></b:skin>  .
Just above this code past the code below
 
 
 
.authorbox {
    backgroundcolor: #F7F7F7;
    color: #555;
    padding: 10px 12px;
    minheight: 80px;
    overflow: hidden;
    width: 100%;
    clear: both;
    margin: 20px 0 10px;
}
.authorbox h4{
    fontsize: 20px;
    margin: 0 0 2px 0;
}
.authorbox .authorimg {
    display: block;
    float: left;
    width: 100px;
    margintop: 10px;
}
.authorbox .authorimg&gt;img {
    width: 100px;
    maxwidth: 100% !important;
    border: 0;
    textshadow: none;
    padding: 0;
}
.authorbox .wraptext {
    marginleft: 116px;
    lineheight: 1.5;
}
 
 
 
Instructions:
 
Color Replace this color with your desired color
 
Save your template and view blog.
That’s it you done your work and if you have any problem please comment below.
 

About admin

IT Expert, Web Designer & Developer, SEO Specialist, YouTuber. Studying BS (Software Engineering) From Middlesex University Lived in Islamabad, Pakistan

Check Also

how to add different style blockquote in blogger

how to add different style blockquote in blogger

A block quotation (also known as a long quotation or extract) is a quotation in …

Leave a Reply

Your email address will not be published. Required fields are marked *