By signing up, you consent to receive email newsletters from me periodically.

How to Create a Killer Blog Sidebar Profile Bio + Photo

How to write a sidebar mini bio. Plus a showcase of unique blog sidebar profile photos + bios. Only on DesignYourOwnBlog.com

Showcase: Unique Blogs Sidebar Profile Photos + Bios. See the showcase and how to at DesignYourOwnBlog.com

What’s one of the first things people want to do when landing on a new blog?

Most (including me) want to know A) What is this blog about? and B) Who is the person behind it?

So it shouldn’t surprise you that the #1 piece of advice I give to bloggers is:

Put your photo and mini bio near the top of your sidebar!

An About page is usually the most visited page on any website or blog. That’s because new visitors to a site want to know more about it before they determine whether or not it’s worth clicking around.

Now, while it’s important to create a killer about page, I won’t be going into that here. Let’s talk about what makes your sidebar author bio and profile photo significant.

Don’t Make Me Click”

People are lazy. They’re impatient. They don’t want to click if they don’t have to.

That’s why it’s our job to make things easy for them.

A new reader lands on your page and wants to know more about you or your blog? Super! Let’s make it as easy as possible for them to know why they’re there: Yep! Put a mini bio near the top of the sidebar.

Sidebar Month!The month of May is all about sidebars and we’re working on them together in the Facebook community. Have you read all the Sidebar posts so far?
4 Ways to Give your Sidebar an Instant Facelift!
How to Really Organize and Prioritize Your Blogโ€™s Sidebar (revised)

There are two essential parts to the Sidebar Bio:

The About Me

Your mini bio should be a few sentences that lead into your full bio on your About page. Despite the name “Bio,” it’s not necessarily all about you.

Here is what I recommend including in those few sentences (scroll down for your free worksheet below):

  • How does your blog benefit the reader?
    This is #1 and I see it missing from so many blogs. Tell me why I should stay and not click away? What’s different about your blog from all the others? Tell me here.
  • A bit about you.
    Keep this short (remember you’re going into detail in the About page). Just a sentence or two that either A) explains why you’re qualified to write about what you share or B) gives a little personal insight about you that may help others to connect with you.
  • A link to your full About page.
    A link that says “Read more” or “Learn more” should suffice.A note to those on the Blogger platform: Do not link this to your Blogger profile page. That profile is too short and essentially useless. Please create a proper About page that is a part of your blog and branding.
  • Ways to connect.
    Putting your social media links and ways to connect are a nice touch to add here as it’s a logical place for people to look for them.

The Sidebar Profile Photo

Why should every blog should have a profile photo of it’s author(s) paired with the mini bio? Two reasons:

  1. It lets people see who you are, know that you’re a real person, and connect with you.
    But won’t people judge me based on my photo?No. And if they do, they’re not your audience anyway. Blogging is about connections and even though it’s in a virtual world and not the real world, it’s still important to be able to put names to faces and get to know each other.
  2. It helps people visually and mentally connect your blog to your other profiles.
    When you use the same photo or same style of photo for your blog bio and your social media profiles, you become recognizable.

Your Photo Should…

  • Be of high quality
  • Show you as friendly and approachable
  • Be of colors and a style that match your branding

Sidebar Mini Bio/Photo Showcase

Let’s take a look at some cute sidebar photos and bios. Please note that many do not include all the proper elements I’ve described above. They are only included here to provide creative inspiration.

Creative Ways to Frame Your Photo

Creative Ways to Position the Bio
While it’s common to include the bio below your photo, some of these examples below align it to the side instead. Another cool option is to overlay the bio on top of the image as in #2 and 4.

Round Photos are Quite Popular
Although I love the cutesy ways the bios are displayed in #1 and #4, you should know that using text as an image instead of regular text will prevent it from being read by search engines. If your bio is keyword friendly and you are optimizing your blog for SEO, you may want to keep that in mind.

You can of course add your text to the alt tag of the image and that will help of course, but search engine bots will always rank actual text on the page, that can be read by your readers, higher than alt text that is technically hidden from view.

More circles! And I love them (obviously)! Below are some unique ways to present your round photo. I love the ones encircled by flowers! How cute is #7, where she’s holding a sign? Or what about cropping your photo in a different shape, like in #8?

Blog sidebar author bios and photos - a showcase of pretty ones on DesignYourOwnBlog.com

1. Journey Mercies – recently redesigned by reader Whitney! // 2. Lemon Jitters // 3. Moogbee Blog // 4. Happiness Is… // 5. Day Jobs & Dreams // 6. Love Letters & Lists // 7. Hello Monday Blog // 8. Life of a Social Butterfly

Your Challenge + Worksheet!

If your sidebar photo/bio is missing any of the elements mentioned above, your challenge this week is to download the Sidebar Mini Bio worksheet and update your sidebar bio and photo. Please be sure to share your changes or questions in the Facebook community!

If your sidebar photo/bio already includes everything mentioned above, good for you! Your challenge is to get in the Facebook community and help those who have questions or need feedback.

Learn How to Create a Unique Bio Photo

Need a new sidebar photo for your mini bio? Here’s a great tutorial to help you take and create the perfect profile photo for not just your blog, but your social profiles as well!

Got questions or just want to share your cute bio/photo? Share in the comments below!

As always, the success of DYOB is dependent upon your sharing. Please share this with the easy links below if you found it useful!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

64 Comments

  • Deborah says:

    Thanks for this Marianne. Love your new photo and look forward to seeing the redesign.

    • Marianne says:

      Hi Deborah ๐Ÿ™‚ It’s been a while since I’ve done an inspiration post so I figured it was about time ๐Ÿ˜‰
      The redesign might still be a few months off, but it’s in the works!

  • Razwana says:

    Your photo looks amazing! Loving the tattoo !

  • fathima says:

    Thanks for the mention, Marianne! What a lovely post, and great advice ๐Ÿ™‚

  • Tiffany says:

    Funny, I was browsing around today trying to check out other blogger’s bio photos… I should have known to just come here first! These are awesome examples, thanks for sharing them!

  • Nikki says:

    I love the idea of an author bio + pic. But how do you actually implement it so it’s always on the sidebar of your website? I see widgets that put author bios below posts, but what do you recommend for having it always appear in your sidebar, no matter what page within your site a user navigates to? Thanks!

    • Marianne says:

      Hi Nikki, you would have to use a template or theme that has a sidebar built into your blog pages. Most of them do and when they do, the sidebars are widgetized, meaning you can add widgets (WP) or gadgets (Blogger) to them.

      Do you have a blog currently and if so, send me the link and which platform are you on?

      • Nikki says:

        Hi Marianne!

        I figured out how to insert a widget in my theme’s sidebar (Travelist theme, WordPress, hosted by Bluehost, with widget oDvut Author Bio.)

        However, this widget won’t allow me to hyperlink to my “About Me” page to read more, and the picture and wording is fairly small. Most author bio widgets I saw put the author bio on the bottom of posts, not the sidebar. If you have any widgets to recommend that allow to hyperlink to your About Me page, and goes in the sidebar, I’m all ears. =) Thanks!!

        • Marianne says:

          Hi Nikki, glad you saw my response! Yes, a lot of blogs do put author bios in the post footer but those are usually multi-author blogs. I always recommend putting your bio in the top of the sidebar because when someone clicks on a link that lands on a page in your site, they usually want to know who you are and why they should listen to what you have to say. This is most easily found in the sidebar.

          Another reason is that you can use that space in your footer for other things such as opt-in forms, product info and related content.

          But going back to your blog… instead of using a plugin for this: how about using just a Text/HTML widget and inserting your info manually. Try this for starters, then you can edit it as necessary:


          <div class="AuthorBioBox">
          <h3 class="widget-title uppercase"><span>Nikki Near And Far</span></h3>
          <p align="center"><img class="avatar avatar-96 photo" width="96" height="96" src="http://1.gravatar.com/avatar/bd38eff63dc259478b05a6b885827738?s=96&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D96&r=G" alt=""/></p>
          <p>Hi, I'm Nikki. I'm a San-Diego-raised, San-Francisco-dwelling adventurer who marvels at natural wonders, world cultures, and really old stuff. I'm talented at eating cheese and chocolate, making crafts, and climbing mountains. <a href="http://www.nikkinearandfar.com/?page_id=23" rel="nofollow">Read more on my About page</a>.</p>
          </div>

          That should help you get started. Let me know if you have questions!

  • Rachel says:

    This is a GREAT post. Do you have any widgets you recommend for the blogger bio in the sidebar?

    • Marianne says:

      Great question Rachel! I haven’t used any that are specifically for bios, but the Tiny MCE Editor plugin is fantastic to make your sidebar widgets like a WYSIWYG editor, meaning you don’t need to know html. Does that help?

  • Elizabeth says:

    Thank you so much for this! Perfect timing! I had been wanting to make our bio pic more interesting!

    • Marianne says:

      Hi Elizabeth good to “see” you again ๐Ÿ™‚ I’m so glad this came at the right time for you! I like your bio pic now, is that the new one?

  • Great post!! Some of these things you wouldn’t even think about but they all add up! I love round photos (and mine is as well hehe). There’s something about it that makes me smile. Some really cool ways to put your side bar and bio and I LOVE the round photos with flowers around them!!! I think I may need to do that

    Lauren Baxter | LB Designs
    xx

    • Marianne says:

      Yes Lauren! I think the flowers around the photo are a cute touch and would definitley add something to your photo. Glad you like the round ones too, I think they’re pretty cute myself!

  • Thanks for this great post and all the beautiful ideas for sidebar photos. I uploaded mine today, and I’m pretty happy with the result as a first try.

    • Marianne says:

      Excellent Anthea, I just popped over and took a quick look and it looks awesome! I’m so glad you were inspired and many thanks for taking the time to let me know ๐Ÿ™‚

  • Joy says:

    I am still working on uniting my website so that all the elements work together. Is there a recommended plug in for side bar author bios for WordPress? I have looked at a few but cant find anything that truly inspires me. Maybe I should be writing a post on widgets myself…great inspiration.

    Thanks, Joy

    • Marianne says:

      Hi Joy! I just realized I didn’t actually reply directly to your comment so you may not have seen my response. So sorry! (see below)

  • Marianne says:

    Hi Joy! It takes time to get everything to work well together. My redesign recaps go into a lot of detail on what it took for me to rebrand DYOB, so check those out, you might learn something useful ๐Ÿ™‚

    http://designyourownblog.com/dyob-redesign-details/

    As far plugins for a sidebar bio, I really don’t know of any. I just use the text widget and add in my own html/css. You could always design a background image with your photo and a blank area and add your text on top of it.

  • Jameelah says:

    How can I find out if I have the widget to add a profile photo?

    • Marianne says:

      Hi Jameelah, I don’t know of any profile photo widgets/plugins, but you can add a custom one via a text widget. If you don’t know HTML, then I highly recommend the TinyMCE plugin which gives you widgets that have a WYSIWYG editor in it (with editing options like the Visual post editor) so you can just click a button to bold text, add images, etc.

      https://www.tinymce.com/ < It's free

  • Thank you Marriane! This post is inspiring and help me ๐Ÿ˜€ good job! ๐Ÿ˜€

  • Marina says:

    Hi Marianne! I recently asked for help with my about/bio sidebar image in office hours and you answered me questions. I’ve updated it. I’d love if you took a second look. I love the shape of my picture if you’re interested in including it in a future post. ๐Ÿ˜‰ Question: “using text as an image instead of regular text will prevent it from being read by search engines”, what does this mean? Can I put my text in the alt area or since I’ve made my image in Photoshop does that hurt me for my keywords? Thanks for all your help!

    • Marianne says:

      Hey Marina, I love it, i think it looks great! The text might still be a little light in color, but it’s better than the green was. You know, the best practice for SEO is to use text whenever possible, because textual content on a page that is useful and visible to a reader will always rank higher in priority than alt text in an image. However, seeing as your content there is not all that keyword heavy anyway, it probably won’t make too much of a difference in this case.

      I would definitely add the text in it’s entirety in your alt tag just so that the search engine bots can read it and so that people that are unable to view images for some reason can read it as well.

      I would just concentrate more on using keywords in your actual content thereby helping your content to be found. Hope that helps!

    • Marianne says:

      I went ahead and amended the post to include that last bit about the alt tags. Thanks for pointing it out!

  • Wow ๐Ÿ™‚ Amazing Im From Indonesia
    Good You blog
    fb.me/pemulaiqbal my fb

  • Grace says:

    Hi Marianne, I’m having issues downloading the worksheet. I can’t click to enter my details.

    Also please what code do I need to use to add an author’s bio through the text widget?

    Also how do I make my social icons look very colorful, bold and nice. My social sharing plug-in just makes it seem bland.

    • Marianne says:

      Hi Grace, try clicking on the form once more and enter your details. I have heard that some have had issues the first time, but then it worked when they tried again. I have not been able to figure out why this glitch is happening yet, so my apologies!

      You are not the first to ask me about how to create the author’s bio, so I’m planning a post on that here soon. Be sure to subscribe to be notified of when it publishes!

  • Mahriya says:

    Hi, thanks for the tips!

    I am creating my About Me widget using HTML and it is working fine. The only problem is my social media icons. I am adding my social icons using HTML and they appear fine in my text widget, links working and images. But they are lined up vertically. The image ‘align’ is none but I want them to come horizontally side by side. Could you please provide any assistance?

    You can see the profile on my blog here:
    https://mybookylife.wordpress.com

    • Marianne says:

      Hey Mahriya, you can force them to align them by floating the elements. I am guessing you have each image in a div or a li tag? If so, you’ll need to add a class to the surrounding div (or ul tag) and then float left each item. So something like this…

      HTML:
      < ul class="social-icons">
      < li>< a href="" rel="nofollow">< img />< /a>< /li>
      < li>< a href="" rel="nofollow">< img />< /a>< /li>
      < li>< a href="" rel="nofollow">< img />< /a>< /li>
      < /ul>
      (you’ll have to ignore the spaces after the <. They are there so you can see the code.) CSS: .social-icons li { float: left; } Let me know if that doesn't work.

  • Thanks for sharing these wonderful tips with us.

  • Realmente necesitaba algunos consejos para mejorar mi perfil. Gracias a Marianne.

  • Great post mate. Thanks for sharing. I was looking for this article cause i just wanted to add a bio in my sidebar. Just loved it. ๐Ÿ˜€

  • sarah says:

    Hey Marianne, I love this post and the ideas that it has given me on how to present my author info in my sidebar – thank you!

    I was just wondering how difficult Tiny MCE is to use. I have zero coding/HTML experience and am trying to design an aesthetically appealing blog, however I seem to find that ordinary widgets etc are dull/boring and not overly attractive (at least as far as I can tell).

    I don’t have the cash to be able to pay someone to design it for me and I would like to learn how to do it myself. I currently have the Avada wordpresss theme and already feel that I am drowning in options that I don’t understand. I want a blog that looks good but I fear that I would be ‘biting off more than I can chew’ with Tiny MCE. I don’t know! Do you have any thoughts/advice?

    A tutorial on how to design and implement the author box would be more than fabulous at some point in the future!

    • Marianne says:

      Hi Sarah, as far as I understand, the Tiny MCE plugin is a WYSIWYG (what you see is what you get) editor, which is similar to the WordPress blog post editor when you use it in Visual mode. Does that answer your question?

  • Morgan says:

    Thank you for this post! It was great design inspiration for my revamped & renamed blog — and I even got my husband to play photographer so I could add in a new profile photo.

  • How to make a good looking website………????

  • Becca says:

    I really love your blog and so glad that I stumbled back on it now that I am up and running with my own blog. I currently have a large slider that I am going to change to a small one, but need a widget for the about me side bar. Do you suggest one in particular or do you really try to get others to do css/coding for their design?

    • Marianne says:

      Hi Becca, you have a few options. I personally prefer to do it using HTML/CSS in a Text or code widget. But you can use an image widget for your photo and then a text widget directly below the image with a brief bio.

      Or you can also try to use the Image Widget where you can insert an image from the media library and add your text as well. https://wordpress.org/plugins/image-widget/ I have not personally used this widget, but it was recommended by someone in my Facebook group.

      Let me know what you do!

  • Samy says:

    These sidebar photo ideas are awesome. Thanks.

  • Great content. Thanks for this

  • Mel says:

    I understand that these are to provide creative inspiration but how do you actually make the sidebar photo and bio look like the ones you have pictured above? Is it a widget or code? How do I make it look so cute and have clickable social icons? Please help!

  • Laura says:

    Awesome tips! This article was very helpful while writing the bio for my site. ๐Ÿ™‚

    P.S. I spent a few hours searching for a good plugin for the bio widget (also, read all the comments here) and realized just then that my theme has that bio info block. :facepalm: ๐Ÿ˜€ Hope this will help all Kadence users!

Leave a Reply

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

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.