Smart Author Box Script For Blogger

Today my friends enjoy April fool game but I'm busy with work blogging. However, I have completed updating my "author box" to make it more brief and concise. It looks like the diagram above and if you like, feel free to read the steps future.

As usual, go to the template to edit HTML. In that space, find the code <data:post.body> ,after that search the code at the very bottom because the code has two or three depending on your template. After that, place the script below the code.

In addition you can also put the script just above it <div class='post-footer'> ,this is the method I used to my template.

Here the script:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tvokm-author-box'>
<a href='Place link to target the title' target='_blank'><img alt='' class='avatar avatar-60 photo' height='60' src='Place your Url Photo!' width='70'/></a><b><a href='http://tvokm.blogspot.com/p/about_11.html' target='_blank'>Place Your Title!</a></b><br/><br/>
Your Description!!
</div>
</b:if>

The script above shows 3 different colors which is Blue, Purple, Green, and Red. 

• Blue color indicates when you click on your title, you will taken to the link destination eg Blogger >> Facebook. 
• Purple is your url photo eg https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t1.0-1/c25.0.200.200/p200x200/1395265_169504976581214_1306635578_n.png
• Red is your title like "The TVOKM"
• Green color is the size of avatar and it is up to you to change the size.

For the last step, find the code ]]></b:skin>, after that, place the CSS script just above it.

CSS Script:

.tvokm-author-box {
background: #F7F7F7;
margin: 10px 0 10px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.tvokm-author-box p {
margin: 0;
padding: 0;
}
.tvokm-author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

Now you're done. Don't forget to make a comment. Thanks :)