Tuesday, June 10, 2014

Blog Design - Level Padawan

Since I have been recently trolling blogs by more successful bloggers than me I have come to notice how clean and sharp their blogs look.  I wanted mine to look like that!  I did some research and found that I am NOT computer literate enough to write HTML or CSS code (that stuff is hard Nicole!) and that I am too cheap to pay $30 for a template to instantly make my blog look professional.  However, thanks to lots of other people who are more computer literate and willing to freely share some tips I was able to make my blog look sleek and less scrapbook-y (I mean, unless that's what you're going for...).

First I looked at lots of blogs and pay-for templates that I liked and made a secret Pinterest board to keep those ideas in one place.  I decided that I liked the blogs that had BIG pictures on a white background.  It really drew the reader into the pictures instead of being distracted by the background. Then I found this website by Sommerfugl Designs that really got me started.  She said that you should make a brand new blog to design on and had a tutorial on how to get it started, moving around widths and layouts and such.  I did this and called it my test blog (and only later made it private after I started getting a bunch of page views).  I stuck to the Simple Template in Blogger because I knew I wanted a clean background and the Simple Template is the easiest to tweak.  Most of the tutorials out there work on the Simple Template and I didn't want this to be any harder than it had to be.

Next she said to find some resources!  I had already started some of this with my Pinterest board but she suggested a great site for finding a color scheme you want to use called Design Seeds.  Man, I could spend all day on this site pinning beautiful color schemes.  She also suggested looking at Google fonts, which did help me find the idea of what kind of font I wanted to use, but I found trying to add them to my blog difficult.  In the Template Designer under the Advanced tab, you can select quite a few different fonts for Post Titles, Sidebar Titles, Pages, etc, you just have to keep scrolling down.  But it did lead me to another blog tutorial by Kevin & Amanda that was trying to help you add new fonts (tried this too and it didn't work for me either...), but they had a link to a bunch of free fonts.  This was another site I spent many hours on downloading fonts and adding them to my computer.  It was one of these fonts that I ended up using for my header image, rather than using them in my Post Titles.

Back at Sommerfugl Designs I used her Creating a Header Tutorial which takes you to another amazing site called Pixlr.  Here you can upload and tweak and add text to create your header image and then save that to your computer as a .png or .jpeg file.  You can also upload the picture from Design Seeds with your color scheme to Pixlr and use the color select tool to get the color code for all the colors in your palette.  I wrote these down and then used them on any site to get the exact same color every time.  So in Template Designer under the Advanced tab where I selected the font I wanted for my Post Titles I also could then type in my color code and use a color from my palette.  It keeps it looking professional and balanced.

So now I had a header and fonts I liked but I wanted those cool social media buttons to link my Facebook and Pinterest page and so on.  Enter Beautiful Dawn Designs and her lovely tutorial!  She also had a bunch of other Blogger tutorials so browse away.  I just googled some free social media icons to use and downloaded those because she wants you to use Photobucket to get the image url for them.  That's another great site because you can shrink the image so that they will fit on your blog better.  Mine came as 100 x 100 px images and I had to shrink them to 30 x 30 so they looked appropriate.  I actually used this tutorial by Every Little Polish as well because I could get the whole HTML code, but the Beautiful Dawn Design tutorial tells you how to get the direct link from Photobucket.

I wasn't sure if my header was center well so I found this tutorial by Carrie Loves that was helpful if you think you have a problem there too.  I really liked her tabs under her header and that was an easy addition in Blogger, you just have to add the Pages Gadget and then move it in the layout to go under your header.

So that was about where I was done designing for now.  I backed up the template to my computer under the Template tab and then applied it to my live blog using the same Backup/Restore button.  I had to do a bit of tweaking and adjusting but it worked pretty well!  I also had to copy and paste my pages over because they aren't included in the template. Hope all this helps you to get inspired to do a bit of designing on your own blog!

No comments: