Monday, October 12, 2015

Easy Blog Design Tutorials for the Blogspot Blogger (#1)

Blogspot is a great blog platform for beginners. It's free, easy to learn, and has plenty of design capabilities and built in plugins. 

BUT, if you use one of the original blogger themes or backgrounds, they can start blending together, and every Blogspot blog looks the same. I visit a lot of blogs -- I know this from experience. 

You want to to stick out from the whole band of bloggers. You want people to keep visiting your blog, right? Content is key, but so is a professional looking blog design. 

I'm going to help with that. Today I start the first post of a new series: easy blog design tutorials for the blogspot blogger. 

Each post I'll focus on something different. I'll gather a bunch of links from the internet (today is more me talking than rounding up links. Links will come later, don't you worry.) and round them up in one post for your convenience.

We're going to start with the bare minimum basics today. Basically, what you see when you first arrive a blog.

image
a header

Basically, the header is the first impression of a blog. If you have a professional looking header and overall blog design, I'm 1,010% more likely to stay around (and especially follow). Even though it sounds selfish and weird, I like reading blogs that are pleasing to look at. 
Here's a post on blog headers. (this blog actually has a bunch of awesome blogging tutorials, so do explore.)

I gather my images from my Pinterest and created the header using Picmonkey.

What you want in a header: 

- Easy to read fonts. Swirly fonts are fine (I have one myself), but make sure it's readable. 
- Pair your fonts (Search for "font pairings" on Pinterest and you'll find a bunch of ideas.) so they don't fight for attention.
- Quality images. No fuzzy ones, please. We want to see what we're looking at.
- People to get a good idea of what your blog is about. You don't want dogs in your header if you have a writing blog, and vice versa. 
- Simplicity is best. 
- Leave white space.

posts 

(Haha, Katie. Obviously we want to see the posts.) 

I'm talking about the general post page you see when you arrive at a blog. Two possible questions that you might have:

how many posts should I display per page? -- I have mine set at four posts on the home page right now. (before readers have to click older posts.) I wouldn't go anymore than five. The more posts you have on your home page, the longer your blog will take to load, and readers won't ever reach your footer.

should I have a "read more" option? -- No. Nope nope nope. I asked people this question on my Twitter, and the answers were unanimous: People don't like wasting time clicking around. 

Yes, the read more option might get you more pageviews, and yes, it makes your home page look cleaner...

...BUT don't do it. Resist. It will ultimately keep people from reading your content. (*raises hand guiltily*)

fonts

I cannot stress enough how important readable fonts are. I see this advice all over the internet, but yet every one out of ten blogs I visit has an unreadable font.

WE CAN'T READ YOUR POST WITH A CURLY FONT. It's not cute. I'll  leave. 

Leave your fonts black or a dark grey (like mine). No yellows. Or even blues. Colorful fonts aren't the way to stand out. 

For the background of your blog, a white is best, or a very, very light color. Simplicity is best.

footer

The footer is the place at the bottom of your blog where half of readers never see, but the other half happens to scroll down far enough to see that ugly white space. 

So make use of that ugly white space and put something lovely in. A few ideas I've seen people use: 

- Social media widget. (Instagram, Twitter, Facebook...) 
- Contact email. 
- List of some of your favorite blogs. 
- Blog button.

navbar 

The navbar is the transparent/colored at the top of a Blogspot blog that looks like this: 


You'd be best to get rid of it if you want to look professional. I just figured out a month ago that I even had this thing. It's really easy, too: 

go to layout in your blogger dashboard.

click edit where you see the navbar.

this will pop up:

click off and then save. 


Boom. Simple as that.

colors

Every blog should have a color scheme, whether it's pastels or bright red and oranges. (I would advise not going crazy on the colors.)

Simplicity is best. 

You can find awesome color schemes for a blog on Pinterest. I would advise finding a color scheme you like and sticking to it: don't add in any extra colors.

-

Aaand that's it! I promise others in the series will have more tutorials and helpful links. View this one as an introductory post of sorts. ;)

- Katie Grace

Sooo, do you have a navbar at the top of your blog? Did you even know what it was or were you guiltily unaware like me? 
What would you like to see next? 
a. sidebar.
b. post footer. 
c. pages. (tabs.) 

33 comments :

  1. I don't actually mind read more's if it's coded into the template instead of manually placed in. The manual way Bloglovin' mobile can't show your entire post, but if it's coded, it's actually easier for me to skim through the posts and pick out the ones I want only. I normally don't visit the blog homepage unless I'm new to the blog, anyways. But if given a choice, I'd prefer no read more's, of course.

    I was wondering -- what do you think of my blog's background colour? It's a beige with hex code #fff9e8, and I would love an honest opinion on whether I ought to tweak it.

    ReplyDelete
    Replies
    1. Huh, I didn't know that. I guess I don't really know there was a manual way to that? Thanks for the new information. ;)

      *goes to look* I think the background is fine. It's a very light and doesn't draw a lot of attention which is good. It goes well with your whole theme, so I love that. I would maybe try expanding the widths a bit more? It's fine as it is if you want to keep it this way, but I feel like the post/text space could be drawn out a bit wider. *shrugs* Just my thoughts.

      Delete
  2. The one exception on the read-more thing is if you have a very picture-heavy post, since pics are slow to load on some computers. Just thought I'd point that out.
    Also . . . my header definitely needs work. :P And possibly some other elements . . . *adds to December to-do list because it sure isn't happening this month or next*

    ReplyDelete
    Replies
    1. Ah, very true. Read mores have their benefits.
      Headers are fun to create. :D I can't wait to see the finished one if you ever get around to it!

      Delete
  3. I absolutely love white backgrounds on blogs. They make it seem clean to me. :) I just don't know if a white background will look good and go with the name of my blog. I think I need to play around with it some more.

    Ooh, you can put a widget tracking your novel's progress? Yes please!

    ReplyDelete
    Replies
    1. I think a white background could work if you changed the header, perhaps? But I like the look of your blog. It's unique. :)

      YES! I haven't done this yet, but I DO have a NaNoWriMo participant tracking widget thingy. xD

      Delete
  4. Great tips! Thank you, Katie! I just got rid of my navbar, thank you so much. I've been looking for a way to get rid of that for a long time!
    I vote for a post on sidbars.
    -Mikayla-

    ReplyDelete
    Replies
    1. You're so very welcome, Mikayla! Glad you got the navbar problem sorted out. ;)
      Awesome! I think that's what I'll do. There are SO many things to be said on sidebars, so I'm excited about it! :D

      Delete
    2. I can't wait to see the post! The sidebar was one of the things I've struggled with for a long time. I've gotten better, but their is still room for a lot of inprovment. =)
      -Mikayla-

      Delete
    3. Sidebars are just difficult! So I don't blame you. Even I still have things to improve on with my sidebar, but hopefully I'll give some tips that can help everyone. :)

      Delete
  5. These are some great tips! And that navbar has been driving me nuts, though I've recently just been ignoring it. I didn't realize I could turn it off! Thanks!

    ReplyDelete
    Replies
    1. I stumbled across a tutorial one day and was so happy I could figure it out. :p
      You're welcome!

      Delete
  6. I am guilty of far too many of these.

    I TOTALLY agree with the read more option. It's such a waste of time, and I have slow internet, so having to load another whole page just to read a post is a huge turn off. I understand the reasoning behind it, but just no.

    When you talk about colourful fonts, do you just mean the actual text, or should titles and headings be black/dark grey as well? What about links?

    I didn't know you could turn the navbar off-- *hurries to do so*

    This was super helpful and I can't wait to see more of your tips! Thanks so much for sharing!

    ReplyDelete
    Replies
    1. When I talk about the fonts, I just mean the general font in the post. Headers/large print I always accent in a different color, so as long as it is readable, that's fine.

      Oh, good! I'm glad it was helpful. I wasn't sure about this post. :p I'm excited to post more on this topic!

      Delete
  7. Great post Katie! I'm thinking a friend of mine might need to take a look at this, she's very un-technological but she's got a blog. I attempted to explain how to work it but it's amazingly difficult! :D
    Also, just so you know, since you were talking about the footer of blogs I scrolled down to take a look at yours and it has some random HTML at the very bottom...I guess that wasn't intentional? :)

    ReplyDelete
    Replies
    1. Thank you much, Jane! Ooh, yes, do send it on to her. It would make me very happy, and be helpful, so it's a win-win situation. ;)

      Gah! I have no idea how that got there. I took care of it -- should be good now. Thank you for pointing it out to avoid future embarrassment! :)

      Delete
  8. Thanks! I never even considered the navbar before...great tips, and I can't wait for more of these posts!

    ReplyDelete
  9. Nice post, Katie. Oh how I wish you used Wordpress so you could help me out with mine! My brain just goes bonkers when I think of the work I need to do. You're doing well, keep on keeping on!

    ReplyDelete
    Replies
    1. Aww, I'm sorry. I have no experience at ALL with Wordpress so I'd probably just end up making everything worse. xD
      You can do it!

      Delete
  10. Good tips! I just went and got read of my navbar - thanks for that suggestion. I'm looking forward to more in the series!
    By the way your last post with End of Year Goals was inspiring too- I ought to create a list myself. And I just brought you one step closer to those 100 followers. ;)

    ReplyDelete
    Replies
    1. Huzzah! Glad it worked out. :D
      Aw, thanks! If you write up a post of your end of the year goals, make sure to send me a link. I would love to read it!

      Ohmygosh that makes me so happy. You, Jessica, are awesome. *hands you multiple cookies*

      Delete
  11. I've kinda been floating around your blog for a while now, but haven't actually commented because I'm one of those people who gets anxious about that. But I had to say something here because this post is so incredibly helpful. I've been trying to set up my own potential blog and this whole post was really helpful. So thanks for this post.

    ReplyDelete
    Replies
    1. Aww, thank you SO much for commenting, then! It makes me so happy. ^.^ (and do feel free to comment all the time. xD)

      Yay! Oh my goodness, you're going to set up a blog? That would be SOO cool! I would totally be willing to share your blog on here once you set it up. :D

      Delete
    2. Will do. xD

      It's a work in progress, and I'm still a little wary of committing to it but I really want to.

      Delete
  12. These are some great tips! I didn't know I could even change some of these settings! And don't feel bad you just told me about the Navbar thing haha. I just got rid of it and shorten the amount of posts displayed.

    storitorigrace.blogspot.com

    ReplyDelete
    Replies
    1. Thanks, Victoria! I didn't know them either until I started doing some digging. :p Most of them are hard to find on the internet.
      Yay! Glad it helped. :D

      Delete
  13. White space. Yes. Please. So many blogs I've been on have something in every. single. available space of the page, and it makes it hard to breathe. Also annoying backgrounds and unreadable drive me crazy. If it's neon green and blue swirls and a white curly font . . . yeah, I'm not staying for long. Appearance of a blog is a first impression, and it's best to make it a good first impression.

    ReplyDelete
    Replies
    1. Ack yes. *headdesk* (Not sure why I'm seeing this comment now oops :P) Some blogs have black background with white text which drives my mind crazy. o.o

      Delete
  14. Thank you Katie so much for this post, it really helps! I didn't know about the navbar thing and I just deleted it:)I wanted to ask if the fonts that you use are free or purchased and if they are free, where (if you could tell me) did you get them. Thnx so much! :)

    ReplyDelete
    Replies
    1. Yay! I'm so glad it worked. :D

      The fonts I use on my blog are just from the regular blogger fonts. For my featured image posts, I use fonts from picmonkey or download them from 1001 fonts. (an online website.)

      Delete
    2. Ok, great! Soon my blog will be epic like this one (hopefully :) I'll definitely check it out, thnx again! ;)

      Delete
  15. Appreciate your thoughts on Blogspot design! Eagerly anticipating more tutorials and tips.

    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.