Home » Blogger Tutorials, Tricks and Hacks » Blogger Posts / Archive Tricks » Show Author’s Short Bio After Post In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Show Author’s Short Bio After Post In Blogger

Show Author’s Short Bio After Post In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

798 views

Sometimes you’d rather have the author’s short bio displayed under their article, which could be a good move particularly for your readers since it saves them the trouble of having to click away from the current page.

Well, lucky for us, Rashin S created an easy-to-follow instructional that shows us how to do exactly that and was also nice enough to share it with the rest of us Bloggers from the world over. All it takes is adding a short CSS script inside your template’s HTML code and also inserting an additional DIV class.

The steps are as follows:

  1. On your Blogger dashboard, go to ‘Design’ then ‘Edit HTML’
  2. Check the ‘Expand Widgets’ box
  3. Find the follow line of code (by pressing Ctrl+F)
]]></b:skin> (

4. Post this set of CSS code above it

.about-author {
background:#EBF3FB none repeat scroll 0 0;
border:1px solid #D4E2E8;
font-size:1em;
line-height:1.5em;
margin:0 0 20px;
padding:10px;
}
.about-author img {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #9ED0DE;
display:inline;
float:left;
margin:0 15px 0 0;
 }

5. Then find this line of code

<div class='post-footer-line post-footer-line-1'>

6. And paste this AFTER (below) it

<div class='about-author'>
<img alt='Rashin' height='100' src='Image URL' width='100'/>
<h4>Author: <a href='Profile URL' target='_blank'><data:post.author/></a></h4>
<p> Short Description</p>
</div>
 </b:if>

7. Replace the following:

Image URL – with your profile image’s URL
Profile URL – can be a link to your Facebook  or Google+ profile
Short Description – write anything/something about you (the author)

8. Save your template and check to see the result. You’re done!

If you want, you can also check out Rashin’s version of the tutorial  HERE.

Liked It ? Please Share

Comments

3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. nice job dude,,

    this is nice triks

    okey, i suggest you to open twitter from http://m.ngetik.com … very fast load..

  2. Nice Post…

    Author Box.

    Thank you so much.

    -jayryan09-

  3. Auto Submit says:

    Your info is very interesting and useful… Thanks

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here