Premium CSS3 Author info box for Google Blogger
Premium CSS3 Author info box for Google Blogger
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBreOsgYwvgI2l8lJ7cO2FuuJxzh6MVjIUunKZEuGbrXqJLaUIzSuS6e3lDrCBPNWX8icau1rOj1A_RleIaWQ_n1-MqTtQcNt7G7ZAuypcLh0mKXr8qg_iDzvZ_Fr36YTaYTSCFZ28lWc/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 == "item"'>
<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'>
</a>
|
<a href='https://www.facebook.com/BloggerSpice' rel='nofollow' target='_blank'>
</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.
4 comments
123compressedpcgames.blogspot.in