Premium CSS3 Author info box for Google Blogger

Premium CSS3 Author info box for Google Blogger
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. 

You may like these posts

4 Comments

  1. Abdul Samad Essani
    Bro any Solution To Add This In WP .... W8ing
    • BloggerSpice
      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.
  2. Unknown
    :d
  3. 123compressedpcgames
    Thanks mohammad for this awesome author box. i have been in quite a hectic search for this one.

    123compressedpcgames.blogspot.in
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up