Home » » Smart Author Box Script For Blogger

Smart Author Box Script For Blogger

Posted By Dennelton Mandiau on Tuesday, April 1, 2014 | 23:59

best author box script
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 :)

Share this article :
The Editor

I'm Dennelton from Sabah, editor of www.tvokm.com. I'm a blogger since 2008, I have a great interest about blogging and seeking additional income through the internet. Follow me with like our official Facebook Page HERE

+ comments + 1 comments

May 30, 2014 at 4:50 PM

This is my Step.Who dont know follow this step. :)

1.First Step,go to Templete and choose >edit HTML<
2.Second Step,button the templete and then >Ctrl F<
3.Third step,you must find the code and then copy the Script then Paste the Script above the code.

Post a Comment

Hello there, we are welcome all kinds of thoughts-supportive, opposed, critical or otherwise but before you add comment please use English, Indonesian and Malay language. Thank You!
 
Support : Policies | Contact | About
DMCA.com Copyright © 2013-2017. TVOKM - All Rights Reserved
Designed by Maskolis | Modified by
Proudly powered by Blogger