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 |
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
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;
}
<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>
- 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
