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.
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:
- 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. - 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
1. The Ashcraft Bunch // 2. Hands Free Mama // 3. Simply Grove // 4. A Fab Life
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.
1. Katelyn Brooke // 2. Elizabeth Rider // 3. Small for Big // 4. Happy Pretty Things
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.
1. Courtney Bowlden Photography // 2. Ann Meer Design // 3. Eat Yourself Skinny // 4. Raindrops and Kisses
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?
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!
Thanks for this Marianne. Love your new photo and look forward to seeing the redesign.
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!
Your photo looks amazing! Loving the tattoo !
Ha, thanks Razwana!
Thanks for the mention, Marianne! What a lovely post, and great advice 🙂
Thanks for stopping by Fathima, you really do have a beautiful blog!
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!
Haha thanks Tiffany! I’m glad you appreciated them as much as i did!
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!
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?
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!!
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!
This is a GREAT post. Do you have any widgets you recommend for the blogger bio in the sidebar?
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?
Thank you so much for this! Perfect timing! I had been wanting to make our bio pic more interesting!
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
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.
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 🙂
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
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)
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.
How can I find out if I have the widget to add a profile photo?
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! 😀
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!
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!
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
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.
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!
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
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.
Thank you SO SO SO SO much. That worked perfectly! Thank you so much for your advice, i appreciate it!
That’s awesome Mahriya! I like the improvements to the bio, now if only we can get you to show your face….. 🙂
Hahaha, one day, maybe… 😀 I’ll keep my anonymity till then 🙂
Thanks for sharing these wonderful tips with us.
Realmente necesitaba algunos consejos para mejorar mi perfil. Gracias a Marianne.
Great ideas thanks
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. 😀
Awesome Nishat, looking good so far!
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!
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?
it looks like you spent most of time creating graphics. they are amazing. loved it
thank you Victor, glad you enjoyed the post!
Hi ! Why don’t you provide code to replace the default Author profile widget to About page.
Hi Saurabh, this post was written to inspire people to create different designs for their sidebar bios, not so much a tutorial. I will think about adding a tutorial like this in the future though, as it would involve knowing some HTML and CSS. In the meantime, feel free to explore my HTML/CSS tutorials here and see what you can figure out on your own: https://designyourownblog.com/html-and-css-design-bloggers-guide/
Hi ! I am Saurabh. My website on blogger and my custom theme also provide me ‘Author’ sidebar but I want to customize my Author bio as same as your design which has given below. Could you please provide me code so that I can modify my Author profile.
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.
Wow that’s a great pic Morgan, you did a great job on your bio, it looks fantastic!
How to make a good looking website………????
Hi Sandeep, explore my blog. 🙂 You can start here: http://designyourownblog.com/startablog
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?
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!
These sidebar photo ideas are awesome. Thanks.
I’m so glad you think so Samy!
Great content. Thanks for this
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!
Hi Mel, I did mine using HTML and CSS in the Custom HTML widget. If you aren’t familiar with html and css, I recommend you check out this post: https://designyourownblog.com/html-and-css-design-bloggers-guide/ Let me know if you have further questions! And don’t forget to join my FB group too where you can get help as well: http://designyourownblog.com/blog-beautiful-facebook-community-guidelines/