Easy Blog Design Tutorials For The Blogspot Blogger #2 // Sidebar Edition

Saturday, December 12, 2015
Sidebars.

The look of your sidebar is one of the most important things of your blog. (Except for, perhaps, the header.) This is where readers can immediately look for ways to follow your blog, see where you are present on other social media platforms, and learn a bit more about you.

There are SO many times I arrive at a new blog and am overwhelmed with the sidebar. There's just too many gadgets -- and unneeded ones. You don't need that fish feeder or pageview stat counter. Unsure of what to put on your sidebar? Keep reading, and when in doubt, keep it simple. 

I thought of the sidebar as having three main purposes:

1. introduce.
2. follow.
3. promote.

Let's look at the points in more detail. 
-
1. introduce. 

Something your sidebar definitely needs is YOU. This is your blog, and readers will want to know quirks or facts about you upon visiting. (Is she a writer? A beauty blogger? Photographer? Pizza-lover?) 

To draw in a reader right away is with a picture of your face. (so we know you're human and not a robot.) Upload this picture with the "add an image" gadget, and add a "text" gadget underneath to share your short bio.

To make your picture a circle like mine, simply upload it to Picmonkey, click "frames," and then "shape cutouts."

And no, do not write out your whole bio. And please don't use the  basic blogger "about me" gadget. Like I said above, just add a text gadget  and type what you want readers to know. (No more than three sentences.) Underneath this small bio you can link to your more in-depth 'about me' page. [Ex. What I did with the read more text.]
-
2. follow.

If people like what they see on your blog, the next step for them is to follow it! *confetti* The most popular following methods (for blogspot bloggers): 

Google Friend Connect
Email
Bloglovin'

Google Friend Connect: 

It took me absolutely FOREVER to figure out how to add this gadget. If you're having troubles -- you're not the only one.

Go to gadgets, more gadgets, and then proceed to scroll until you find the followers gadget.



Email: 

Email is the second most popular way readers follow my blog. Here are a few customization tutorials to make it look nice and snazzy.
email-gadget
-

Bloglovin'

Haven't heard of Bloglovin'? It's another way to follow blogs -- an online reader feed. Each day it will update the new posts from the blogs you stalk (*ahem* follow.) and allows you to save posts you especially love into folders for later reference.

Make sure to "claim" your blog on Bloglovin'. You'll then receive notification when people follow you or save a post. Bloglovin' has tutorials on their site that you can follow.

Social Media Icons:

If readers really want to stalk follow you on all social media sites, social media icons are your next step. They're typically placed beneath your picture or short bio. 

-
3. promote.

If you're an author, you can promote your books. If you're an owner of an etsy shop, promote that. Keep it simple, keep it small, and there's no need to mention it multiple times. Readers will hunt down what they're looking for if they really want to know. 

Cue the bloggers who say: "But I don't have anything to promote..." 

... You're wrong.

One of the things you can do promote is your own posts! Here are the gadgets that will help you in doing so:

1. Popular posts. 

Once I visit a blog and want to see if I'll be interested in reading any more of their posts, the "popular posts" gadget is one way I can quickly be informed of the types of articles they post. Go to layout > add a gadget > popular posts.

Don't like how the pictures aren't very large or set up? You can enlarge your popular post pictures with this tutorial. (like I did.)

2. Archives. 

It's rare that I go through the archives of someone's blog. But if I REALLY love a blog, I'll take an evening and read all of their posts. Or sometimes I need to reference a post a couple months back. This is where the archives come in handy. 

The default blogger archive is just kind of... blah. But guess what? Just yesterday I found a fantastic tutorial to make the archives look non-blah. :P (example is over on my sidebar -- see the archives) I love the clean look and the easy to navigate panels. 


-
general sidebar design.

Every so often I come across a blog that has the sidebar on the left of the post area. While this is unique and catches your eye, it catches your eye too much. Instead of focusing on the content of the post area, your gaze will automatically travel to the sidebar and can become distracting. While this isn't a huge deal, I personally would recommend keeping it on the right side of the blog.

It's very important to keep your sidebar to one column. You have no idea how insane it drives me when the follow-by-email gadget and the archives are smushed together side by side making it impossible to navigate either of them. Keep your gadgets in a straight line; this will prevent the general look from becoming messy. 

Keep the number of tags you have to a minimum. I've searched countless times for a tutorial to fix this mess below, but I have yet to find one. *disgruntled sigh* So until I come across that live-saving tutorial, keep the number of tags you have to a minimum. I could label this post under: blogging, design, sidebars, link, tutorials, and how-to, but instead I have just one tag I put it under: blogging. Try to insert no more than three tags to a post.

I've actually deleted my tags gadget, but this is what it used to look like. Messy, but better than having 20+ tags. And if you DO have tons of tags, just delete the tag gadget on your sidebar. Readers will still be able to browse the posts under that tag by finding it in the footer of a post.

Notice how my sidebar has a colored background? Here's how to add a background color to your Blogger sidebar.
-

- Katie Grace


Phew! That was a lengthy post, but hopefully it was helpful. There's a lot to say on this topic. 
What do you like to see on sidebars? If you want me to check out yours, drop your blog URL below. :)

- - -
                                                           CONNECT WITH ME!
     

29 comments :

  1. What are your thoughts on having one sidebar on either side of the blog? That way, you have different content on different sides, and it's not all smushed together.

    ReplyDelete
    Replies
    1. Personally, I'd try to keep it to one. I visited your blog and instead of looking at the content, I kept switching between the sidebars trying to look at all the information.
      For instance, on the left sidebar, you could get rid of the "Draven's Light" banner, (since it's outdated -- no longer available for pre-order) and your favorite quotes. Consider putting the quotes into a page of a blog post. (A blog post would be super interesting, actually.)

      So then if you HAVE to keep both sidebars the "follow by email" and the "Google Friend Connect" gadget don't look so smushed.

      Delete
  2. Oh my goodness thank you for this. I will now proceed to spend the rest of my day messing with my blog's sidebar because I hate it. THANK YOU FOR THIS POST.

    ReplyDelete
    Replies
    1. However hah hah what is doing anything with code because none of that makes sense to me. x.x

      Delete
    2. Thanks for this post, Katie! I came up with what I thought was a pretty awesome new design for my blog just recently and I set up a separate blog so I could link to it and show it to my readers without officialky changing my blog. About half of them said I should change it and half said I shouldn't. So I haven't done anything with it, yet. If you'd like to see the design and give me some more tips here's a link: elizatestdesign.blogspot.com . I may try some of those sidebar tricks. Btw it's a design idea for my private blog so unfortunately you can't see what it's like, right now :/

      Delete
    3. Anna - YOU ARE SO WELCOME! *runs over to your blog* Ooooh, I see changes! :D It looks a lot better. *nods*

      Hah hah coding is difficult and very frustrating. -.^ Like, I-want-to-throw-this-computer-at-the-wall-frustrating. :P If there's things you still need help with email me (I sent you a message through your blog so you should have my email) and either I can try to walk you through it or you could add me as a temporary owner so I could just mess with it myself. :)

      Delete
  3. AAH, thank you SO much for posting this, Katie! It helped me a lot! My sidebar looks much better because of it :). And I totally don't care that it was long :D.
    By the way, I was wondering how you created different 'pages' on your blog (about Katie, things I'm writing, let's chat, all of those)? I never could figure out how that was done.
    (P.S. I just finished reading 'Resistance' and 'King's Scrolls' and ... and ... and ... I DON"T HAVE THE WORDS!!! That book gave me ALL the mixed-up feels! How glad I am that you recommend those books to me!)
    ~Savannah Perran

    ReplyDelete
    Replies
    1. You are so welcome! If you ever make your blog public someday, I would be excited to see it. :)

      Ahhh, pages. Make a page under "pages," then go to Layout >> and add a gadget >> and then there SHOULD be pages. I'll most likely be writing up another design post on this. :D

      OH MY G O O D N E S S WASN'T IT AMAZING?! Wow. I'm so excited that you decided to read them! I'm slowly dying as I'm waiting for Samara's Peril to come out. Supposedly it was supposed to come out this Christmas (or around that) but she got behind on editing so it won't come out until sometime next year. *dies* I CAN'T WAIT TO SEE WHAT HAPPENS.

      Delete
    2. I'm definitely hoping to have a public blog sometime, and once I get one, you'll be one of the first to know :).
      "huggles Katie* You have NO idea how long I've waited to figure out how to make pages :D. Thank you!
      AAH, YES, WHY CAN'T SAMARA'S PERIL COME OUT SOONER?! How shall I ever survive until next year?! *flails wildly* MUST. HAVE. MORE. ILYON!
      Do you have a favorite character in that series?
      ~Savannah Perran

      Delete
    3. Eeeeep! You making a public blog would make me SO happy. :D I'd definitely link to it on A Writer's Faith so people could find it. :)

      You're welcome!! :D It took me several hours in an afternoon (with a friend) trying to first figure out how to make them. It's confusing. :P

      ACK, I KNOW. *flails with you* I need to know what happens now. Well... maybe you could have more Ilyon? Have you read Half-Blood? It'll give you ALLLL the background of Jace's story. *tear* :P
      Hmm... Favorite character? Probably Jace. Or Kyrin. Or Jace and Kyrin together. ;)
      Do you?

      Delete
    4. Aw, thanks Katie :D.
      I haven't yet, but I MUST. And very VERY soon! Because ... because Jace. And Ilyon. 'Nuff said.
      Favorite character, oh ... um ... HOW AM I SUPPOSED TO PLAY FAVORITES?! I love Kyrin, but then there's Jace, and Kaden, and Tyra (I'm partial to wolves), and Trask, and Leetra, and Talas, and - I don't think I'm about to pick a favorite character anytime soon :D.
      But I agree, Kyrin and Jace are awesomeness :D.
      ~Savannah Perran

      Delete
    5. TRASK. Ack, I forgot about Trask. I really, really love him. And Daniel, 'cause he makes me laugh. *hugs all the characters*

      Delete
  4. Oops! I didn't mean to make my other comment a reply lol

    ReplyDelete
  5. These are some good tips. I personally like my sidebar on the left (maybe it's because I'm a lefty) and I've heard it recommended to use a page view counter. I do agree that bars on both sides and/or that are really cluttered are annoying. So I follow probably 3/4 of these rules. XD

    storitorigrace.blogspot.com

    ReplyDelete
    Replies
    1. That might be. *shrug* I guess I am a righty so we might see things differently. :P

      The pageview thing could be taken either way. Personally I'm not sure of the use aside from "hey, look at how many pageviews I have." Maybe I'm just taking it in a wrong bragging sort of way. *shrug* People can do what they want, though. xD
      Thanks for commenting! <3

      Delete
    2. Ah I see. I've heard it good because agents and editors see how many views you have and it's a plus for you.

      Delete
  6. I'm with you on the sidebar on one side only. the double sidebar on one side of the screen, or the matching sidebars on both sides of the screen make me shudder. Mostly because of the sheer clutter they add to a blog. Also, I just have to say, I LOVE that read more thing you have with your short bio in your sidebar. I may have to do something similar to that on my own blog!

    ReplyDelete
    Replies
    1. Ooh, you totally should do that! I'd love to see it on your blog. :D

      Delete
  7. Hmm, I will definitely have to keep this in mind for the future. I don't have any time to dive into redesigns at the moment, but I have been thinking of potentially sprucing up my sidebars and stuff, so I'll keep this post in mind for then. Thanks for sharing! :)

    ReplyDelete
    Replies
    1. Ack, blog designing stuff takes so long. :P Especially when coding comes into place. *dies* So. Frustrating. Sometimes.

      I'm excited to see the changes eventually in the future! :D

      Delete
  8. Replies
    1. ABSOLUTELY! <3
      *awkwardly replies to comment very late* xD

      Delete
  9. Katie, this is an absolutely awesome blog editing series that you've written! My blog is looking so much better after reading and following these turotials! :) I have just one question, how did you get your short bio to be centered under your profile pic? thnx so much for the help ! :)

    ReplyDelete
    Replies
    1. You should be able to center with this code:

      http://www.w3schools.com/tags/tag_center.asp

      Delete
  10. One more thing! sorry 0.0, i was wondering how you got your profile pic to be transparent on the edges. i went on PicMonkey and checked the transparent box, but it didnt seem to work. thnx again <3

    ReplyDelete
    Replies
    1. I think I did a google search: "how to get rid of blogger picture border" or something like that. :) There are plenty of tutorials out there to follow.

      Delete
  11. Seriously great post. Thanks for sharing it.

    ReplyDelete
  12. Excellent post. Your post is really resourceful

    ReplyDelete

don't be shy to hang out in the comment section!
make frens, check back for my replies, keep things clean, shout about pizza, squeal about books, moan about editing... all that cool stuff.