What is Author box?
Author box is for giving information about who has written the post.
It is mainly posted to bottom of each post.
It is very useful gadget to add on your blog because when your blog is multi authored and your blog have some guest post, then this gadget will help you knowing your guest bloggers!
If it'll look better then readers attract from this.
How Can I do this?
# First go to your blog dashboard and click on template tab.
# Then click on Backup/Restore button and click on Download full template.
# After download , Close it and click on Edit HTML .
# Then search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#0000A0' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: rgb(0, 0, 0);'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank'>Facebook</a> And <a href='Your_twitter_profile_link' target='_blank'>Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#0000A0' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: rgb(0, 0, 0);'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank'>Facebook</a> And <a href='Your_twitter_profile_link' target='_blank'>Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
!^^! Replace your links with the links which is highlighted with yellow. and also change the name .
!^^! Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
background: #3BB9FF;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.4;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
{
background: #3BB9FF;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.4;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
!^^! You can change colors and transform and also border-radius with your choice.
!^^! You can also change the information about author when editing the yellow links paragraph and if you want to change color of text and/or style then just change in style tags. [in text paragraph]
!^^! Now save the template and enjoy.
How it'll look like
 |
| Click to zoom |
We are giving you more colorful modifications.
2nd
How it'll look like
 | ||
| Click to Zoom |
# Search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#fff' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: #fff;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: white;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: white;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#fff' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: #fff;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: white;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: white;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
# Replace your links with the links which is highlighted with yellow. and also change the name .
# Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
width: 750px;
background: #123;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #888;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.4;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
{
width: 750px;
background: #123;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #888;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.4;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
3rd
How it'll look like
 |
| Click to Zoom |
# Search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='red' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: maroon;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: maroon;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: maroon;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='red' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: maroon;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: maroon;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: maroon;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
# Replace your links with the links which is highlighted with yellow. and also change the name .
# Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
width: 750px;
background: #ffc;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #123;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
border-radius: 50px;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
{
width: 750px;
background: #ffc;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #123;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
border-radius: 50px;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
4th
How it'll look like
 |
| Click to Zoom |
# Search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='lightblue' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: aqua;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: aqua;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: aqua;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='lightblue' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: aqua;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: aqua;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: aqua;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
# Replace your links with the links which is highlighted with yellow. and also change the name .
# Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
width: 750px;
background: #124;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #123;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
{
width: 750px;
background: #124;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #123;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
5th
How it'll look like
 | |
| Click to Zoom |
# Search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#ffcc09' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: yellow;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: yellow;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: yellow;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#ffcc09' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: yellow;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: yellow;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: yellow;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
# Replace your links with the links which is highlighted with yellow. and also change the name .
# Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
width: 750px;
background: #888;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #e3e3e3;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
{
width: 750px;
background: #888;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #e3e3e3;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
6th
How it'll look like
 |
| Click to Zoom |
# Search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#000' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: #000;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: #000;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: #000;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#000' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: #000;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: #000;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: #000;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
# Replace your links with the links which is highlighted with yellow. and also change the name .
# Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
width: 750px;
background: #fca;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #125;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
{
width: 750px;
background: #fca;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #125;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
7th
How it'll look like
 |
| Click to Zoom |
# Search for (Ctrl + F) , <div class='post-footer-line post-footer-line-1'> or <div class='post-footer-line post-footer-line-2'> and Paste below code above it .
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#20f' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: #20f;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: #20f;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: #20f;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
<div class='author-box'>
<p>
<img alt="image" src='Link_for_your_photo' width='60' />
</p>
<b>
<font color='#20f' >Author</font>
</b>
<br/>
<div style='text-align: left; font-family: verdana; color: #20f;'>
Hello all, Myself Your_name I like blogging and I also like developing websites and blogs, You can follow me on <a href='Your_facebook_profile_link' target='_blank' style="color: #20f;">Facebook</a> And <a href='Your_twitter_profile_link' target='_blank' style="color: #20f;">Twitter.</a>
<br/>
Contact me for any queries!!
</div>
</div>
</b:if>
# Replace your links with the links which is highlighted with yellow. and also change the name .
# Then search for <b:skin> and expand it. [New template changes] then search for </b:skin> and paste below code above it.
.author-box
{
width: 750px;
background: #aaf;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #ee9;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
!^^! Don't forget to bookmark our new url seebeetee.com.{
width: 750px;
background: #aaf;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #ee9;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
overflow: auto;
}
.author-box p
{
margin: 0;
padding: 0;
}
.author-box img
{
background: #fff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #dfdfdf;
opacity: 0.5;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}
.author-box img:hover
{
opacity: 1;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
!^^! If you have any queries or problem just comment.