How I added professional Author box below all My post

Making your profile recognised to your audience can create engagement through social media. Many bloggers just put up posts without their audience knowing their actual identification
Why many love this, others detest it. I can count a large number of bloggers who hates unveiling their profile on their weblog. however as for those that love to reveal their profile, here is a expert writer container i will share with you to be able to show profile after every post you publish in your weblog. The writer box, indicates your full picture, your social hyperlinks and a little description about your self.

How I added professional Author box below all My post
How I added professional Author box below all My post 

Professional Author Box Features

  • Professional look
  • Fully responsive design 
  • Simple CSS Design
  • Very easy to use and customizable
  • Short code (doesn’t affect on your blog loading speed)
  • Suits to your template

Procedures
To be on the safer side, i recommend you make a backup of your template.
1. Go to templates on blogger>>edit HTML then search for this code  ]]></b:skin>

2. Just below the code, paste the following CSS code

 /*Professional Author Box CSS Code*/
.about-author {

width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
    background: #f2f2ef;
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #EAEDEF;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    font-family: Georgia, Tahoma, Verdana;
    line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;

/*Professional Author Box CSS Code*/
3. Search for
  <data:post.body/>
4. Now after the following code, add this HTML code
<div class=”about-author”>

<h3>About Author:</h3>
<img align=”left” src=”Paste Your Image URL Here“/><p>Write Something About Yourself</p><br/>
<p>Let’s Get Connected: <a href=”http://twitter.com/techfashy” rel=”nofollow” target=”_blank”><font color=”#00aced”>Twitter</font></a> | <a href=”http://www.facebook.com/techfashy” rel=”nofollow” target=”_blank”><font color=”#3b5998″>Facebook</font></a> | <a href=”http://plus.google.com/109208666606854207231” rel=”nofollow”><font color=”#dd4b39″>Google Plus</font>
</a></p>
</div>


Little Customizations
  • Paste Your Image URL Here : Add Your Profile Picture
  • Write Something About Yourself 
  • http://twitter.com/techfashy Replace with your Twitter page URL
  • http://www.facebook.com/techfashy : Replace with your Facebook page URL
  • http://plus.google.com/109208666606854207231 : Replace with your Google Plus page URL
  • You can adjust the width from 750px to your preferred size if it is not fitting on mobile view.

This post was inspired by shoutersclub

Join Over 10,000+ Readers

Loading

JOIN US ON TELEGRAM FOR LATEST UPDATES


FOLLOW US ON TWITTER | FACEBOOK | INSTAGRAM

1 Comment

Leave A Reply

Please enter your comment!
Please enter your name here