Premium CSS3 Author info box for Google Blogger

Premium CSS3 Author info box for Google Blogger

data:blog.title
author bio

Author box is an essential part of blogger. Every blog should add author info box to show their visitors who is behind the blog. Ad I have shared many author box and now going to share my premium one which was used by me in BloggerSpice. Earlier I got many request to share the code and finally I am sharing this author box for my loyal visitors. Actually this author box is really unique because you won't find a second copy of this author info box. The features of Premium CSS3 Author info box are as follows-

  • Large Image thumbnails
  • Faded background color
  • Admin Banner
  • Auto post detector
  • Social media links
  • Made with pure CSS
That means so many features in one widget. I think it will help you to introduce yourself among your visitors easily because its unique design is really attractive. So I am revealing the below thus you can install this widget in your blog. Please follow the simple steps from below-

CSS Part of Premium CSS3 Author info box

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Paste the below code  Before/above ]]></b:skin> and Save the templates.

/**CSS3 Author Box by www.bloggerspice.com **/
.BSpostauthorbox {
position: relative;
margin: 5px auto;
padding: 15px;
width:auto;
min-height: 160px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
text-shadow:1px 0 0 #000000;
color:#111;
border: 2px solid #0066B3;
border-radius: 5px;
background: #cae0e4;
background: -moz-linear-gradient(top,  #cae0e4 0%, #9ad0d8 15%, #62b6c0 36%, #9ad0d8 86%, #9ad0d8 99%, #cae0e4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae0e4), color-stop(15%,#9ad0d8), color-stop(36%,#62b6c0), color-stop(86%,#9ad0d8), color-stop(99%,#9ad0d8), color-stop(100%,#cae0e4));
background: -webkit-linear-gradient(top,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: -o-linear-gradient(top,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: -ms-linear-gradient(top,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
background: linear-gradient(to bottom,  #cae0e4 0%,#9ad0d8 15%,#62b6c0 36%,#9ad0d8 86%,#9ad0d8 99%,#cae0e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae0e4', endColorstr='#cae0e4',GradientType=0 );
border-left: 5px solid #333;
border-right: 5px solid #333;
border-top: 5px solid #333;
border-bottom: 5px solid #333;
padding: 10px 15px 10px 15px;
-webkit-box-shadow: inset -5px -9px 100px -18px #333333;
-moz-box-shadow: inset -5px -9px 100px -18px #333333;
-o-box-shadow: inset -5px -9px 100px -18px #333333;
-ms-box-shadow: inset -5px -9px 100px -18px #333333;
box-shadow: inset -5px -9px 100px -18px #333333;
-webkit-border-radius:11.5px;
-moz-border-radius:11.5px;
-o-border-radius:11.5px;
-ms-border-radius:11.5px;
border-radius:11.5px;
background-color: #000000;
color: #000000;
font-size: 14px;
-ms-border-radius:1.0em;
}
.BSpostauthoravatar {
background: #fff;
border: 1px solid #D3D3D3;
float: left;
height: 128px;
width: 128px;
padding: 5px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 5px;
-webkit-box-shadow: 0 0 4px 0 #d9d9d9;
-moz-box-shadow: 0 0 4px 0 #d9d9d9;
box-shadow: 0 0 4px 0 #d9d9d9;
}
.BSpostauthoravatar img {
height: 128px;
width: 128px;
border-radius: 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.BSpostauthoravatar:hover img {
opacity: 1;
}
.BSpostauthorlabel {
background: url("http://3.bp.blogspot.com/-JMP2QSbDyx0/UPe_5fbsjnI/AAAAAAAAAh0/IStTy4spyJs/s1600/badge_admin.png") no-repeat center transparent;
display: block;
height: 30px;
position: absolute;
bottom: -30px;
width: 128px;
}
.BSpostauthorcontent {
margin-left: 160px;
}
.BSpostauthorhead {
border-bottom: 1px solid #c4c4c4;
margin-bottom: 5px;
padding: 0 0 10px 0;
position: relative;
}
.BSpostauthorbox h5 {
font-family: Trebuchet MS;
color: #302E29;
font-size: 25px;
font-weight: normal;
line-height: 30px;
margin: 0;
border: none;
text-transform: none;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox h5 a {
color: #302E29 !important;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox h5 a:hover {
color: #E65002 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.BSpostauthorbox p.postAuthorbio {
line-height: 18px;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
}
.BSpostauthorbox p a {
color: #E65002;
}
.BSpostauthorbox-footer{
padding:10px 0 10px;
font:bold 12px Trebuchet MS;
}



HTML Part of Premium CSS3 Author info box

Step 1 Now Click on Template ->Edit HTML

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find <data:post.body/> or <div class='post-footer-line post-footer-line-1'>

by pressing Ctrl + F

Note: You will find 3/4 time this code go for second one.

Step 4 Now Copy the below code and Paste it before /above code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <div class='BSpostauthorbox'>
                      <div class='BSpostauthoravatar'>
                        <img alt='Mohammad Fazle Rabbi' src='Author Image URL Here'/>
                        <div class='BSpostauthorlabel'/>
                      </div>
                      <div class='BSpostauthorcontent'>
                        <div class='BSpostauthorhead'>
                          <h5>
                            Posted By:
                            <a href='About Author Page URL' title='Mohammad Fazle Rabbi'>
                              Mohammad Fazle Rabbi
                            </a>
                          </h5>
                        </div>
                        <div class='postAuthorbio'>
                          Author Description Here                          <b>
                            <a expr:href='data:post.url'>
                              <data:post.title/>
                            </a>
                          </b>
                        </div>
                        <div class='BSpostauthorbox-footer'>
                          <div style='float:left;text-align:left;'>
                            Join Me On:
                            <a href='http://www.twitter.com/BloggerSpice' rel='nofollow'>
                              Twitter
                            </a>
                            |
                            <a href='https://www.facebook.com/BloggerSpice' rel='nofollow' target='_blank'>
                              Facebook
                            </a>
                            |
                            <a href='http://plus.google.com/102331886274459115104' rel='nofollow' target='_blank'>
                              Google Plus
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </b:if>

Customization

  • Replace Author Image URL Here it with your image
  • Alter About Author Page URL with your About author page link.
  • Write Author Description Here with your own
  • Replace BloggerSpice it with your Facebook and Twitter ID
  • Change 102331886274459115104 with your Google Plus ID
If you face any trouble then feel free to leave a comment below. I will help you to solve the issue. 
Abdul Samad says: 9/07/2013

Bro any Solution To Add This In WP .... W8ing

Mohammad Fazle Rabbi says: 9/07/2013

Bro I am not so expert in Wordpress..So don't have any idea how to convert the widget as Wordpress. But i can convert widget Wordpress to Blogger.

Jmeezy Jhumer says: 6/25/2014

:d

NIKHIL PANDEY says: 9/20/2014

Thanks mohammad for this awesome author box. i have been in quite a hectic search for this one.

123compressedpcgames.blogspot.in

Contact Form

Name

Email *

Message *