Wednesday , 23 July 2014
Home » blogging » How to create an ‘About the Author’ Widget below post body on blogger

How to create an ‘About the Author’ Widget below post body on blogger

Blogger is not a premium platform for blogging and therefore, several widgets and functions that are available in wordpress are unavailable for blogger. But as blogger is using the simple XML for it’s designing and creation, there is a hope that most of such widgets can be made with the help of some simple tricks, i.e, just by adding some codes to your default blogger template. From now onwards i will try my best to introduce WP style widget and themes to blogger too, even though I know that it’s impossible. Today, I’m going to introduce you, how to create an WordPress style ‘About the Author’ widgeat that contains a short Author-bio below the post body. Here is a screenshot of it…

Here is the way  how to do it…..

How to create a wordpress style ‘About the Author’ Widget below post body on blogger ( blogspot )?[with image]

    1. Log on to blogger and navigate Layout –> Edit HTML
    2. Select the ‘Expand Widget templates’
    3. Now paste the following code just below the  ]]></b:skin>
.authbio{
color: #666;
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px dotted #cc0000;
width: 600px;
padding: 15px;
margin-bottom:25px;

}

.biotitle {
width: 600px;
background: #CC0000;

width: 600px;
padding: 0px;

}

.biotitle h2 {
font-weight: bold;
color: white;
padding:10px;

}
.authbio a{

color:#cc0000;

text-decoration:underline;}

NB: Change the colours matching your template.

4. Now search your template and find the ‘<data:post.body> and paste the following code just below it

<div class='authbio'> <div class='biotitle'> <h2> About the Author </h2> </div> <br/> <div style='float: left;'> <img alt='' height='75' src='http://www.Your-Avatar-pic.jpg/' width='75'/> </div> Your Short Bio here. You can add some info related to you including your personla info, occupation, hobbies, love to blogging....etc here.  This will be displayed at the end of each and every post. It took me a little struggle and time for creating such a widget and so, if you liked this template, please share these on any social bookmarking sites and also please link to me from your blog </div>

Now your ‘About the Author’ Widget is ready and you have to replace the ‘your Avatar picture.jpg’ with the URL of  your avatar picture and “<<your short……” with your Short Bio.

Now your widget will appear something like ;-

Remember that this box will be read by 90% of your blog readers and if your articles are interesting, then they will be trying to know more about you and your blog and this widget will be a great utility for them. Take a special care to edit the css as you like and make the widget more attractive and interesting. Also make the text inside the box too magical …..

About Rajeel

I'm Rajeel, a teen blogger from India who loves computers, sports, internet and all other kind of tech stuffs. This blog thing is one of my favourite hobby and the one that eats up much of my time. But Really, I'm loving it :) Find me in G+

27 comments

  1. Adirondack Blogger

    How can I do this when I have several contributors on the same blog? This works fine for a single author but I want to show different “About Author” blurbs depending on who wrote the post.

    Thanks in advance for your help.

    • Ya sure.

      Just addd the codes between the ;

      
      
      
      < ---widget code taken from here with the code for author-1---->
      
      
      
      
      < ------Widget code taken from here with the code for author-2---->
      
      

      And replace the author 1, author 2 with the name of the authors

    • Adirondack Blogger

      Rajeel,

      I appreciate your quick response. However, your response is confusing and the code doesn’t work. Could you look it over carefully for me?

      You say add the codes between the ; but where is the ;?

      “And you say Widget code taken from here” which doesn’t make sense – taken? from where?

      Thanks again for your help.

  2. shows this error ‘Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The value of attribute “src” associated with an element type “null” must not contain the ‘<' character.'
    .-= Victor´s last blog ..Facebook:How to block your friends from commenting on your posts =-.

  3. Wondering why you’ve not implemented it in your blog
    .-= TechGyo´s last blog ..How To Make Cool Manga Avatar For Your Profile ? =-.

    • This is not blogger, It’s WP. My previous theme did had this facility. That’s why i didn’t cared to add one. Thanks for notifying, will add it.

  4. Could you please let me know the name of the plaugin you are using for social bookmarking below the post?
    .-= TechGyo´s last blog ..How To Make Cool Manga Avatar For Your Profile ? =-.

  5. I am kind of new to social bookmarking but social bookmarks presents great resource when doing research.”`.

  6. I use Blogger but would like to do a novel. How do I edit the html? The usual templates are too confining, and I don’t know enough to make my own.

  7. Editing HTML is easy. you can learn it by editing your own theme and studying from error or just learn i online from W3schools. Btw, if you are looking for a good blogger theme, have a look at Red Ink theme too
    http://www.labofweb.com/red-ink-premium-seo-blogger-template/

  8. hi i tried to find ‘ in my template but it says no such words found so please help me

  9. Nice brief and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.

  10. social bookmarking is very popular nowadays in the same way that social networking sites are also very popular”;~

  11. Thanks dude, i was looking for these!

  12. social bookmarking has been the trend in the last few years, Facebook really dominated Friendster, Myspace and others “.*

  13. well this tip did not work for my blog at all, i did install all the code properly yet even after no errors the output did not come, what to do now..help please
    raj recently posted..Valentine LOVE There s an App for thatMy Profile

  14. I will do the same. i need to know more about this

  15. Cheap Beats by dre

    Many thanks for taking the time to discuss this, I’m fervently about this kind of and i also get pleasure from researching this particular matter. Make sure you, when you obtain information, you should up-date this website with increased details. I have discovered that very helpful.

  16. Extremely informative plus excellent bodily structure of written content , currently which is easy to use (.

  17. Fantastic write-up, We believe online marketers should larn a good deal from that web webpage it has the really intuitive .

  18. Hello, happy i ran across your website. It helped me to learn the topic slightly better.

  19. burton ak backpacks

    I stumbled onto your web site, i believe your site is awsome, keep posting.

  1. Pingback: Tips To Bring More Traffic To Your Website

  2. Pingback: Art notes: Author honored | Our Pets

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Scroll To Top