Blog Design–Details

Untitled-2 copycrop

I’m just going to cover some remaining blog design details this week, but before I do, notice I tweaked my social media buttons a bit?  I figured out through another social media button tutorial that the images will line up side-by-side as long as they are small enough to all fit in a row.  So if you want to make the small round buttons, follow my social media button tutorial and just make them smaller.   Go read my social media button tutorial to see which fonts to use for the Facebook and Twitter buttons, as well as a tip on how to do a Pinterest button since there is no Pinterest font.

Okay, on with some of the details!


If you want your blog design to look cohesive, it helps greatly to have all the colors exactly the same.  In order to do this, you have to be able to find the color code for each color you want to use.  Once you have the color code, you can insert them into your blog design to make them all match.  It’s also important to make note of you color codes when actually designing your social media buttons, header, and background in your scrapbooking/photo program, so you can make sure the colors in all your page elements match exactly.

In any scrapbooking or photo editing program or website, when you adjust the color of the text a box like this shows up.  When you get the color just how you like it, write down the color code.  Make sure to do this for each color you use in your blog design. 

(Once again, click on any picture in this post to see it larger.)


A lot of programs also have an “eyedropper” tool, so you can pull color off of any of your blog elements to make them match exactly.  Open the color box and then drag your cursor anywhere else on the page and if the eyedropper icon appears, just click.  Most programs and websites will allow you to pull a color from the image you are working on so you can match the colors.

Once you have all your color codes, you can use them for the text or highlights in your blog.  Do this by opening the template designer and clicking on the “Advanced” tab.

With Blogger’s new interface you can open the template designer by going here:


From here you can insert the color codes for various areas of your blog.


You’ll just insert the appropriate color code into the white box.  Notice the list of things you can adjust on the right side: Page Text, Backgrounds, Links, etc.  If you didn’t know, you can also pick a font for each of the text elements too – I have my “Tabs Text” set to “Walter Turncoat” for example.  It’s best to pick a basic font for the page text though, so that if your page has trouble loading at least the font for your posts shows up easily.  Just fyi.

Note: If the main background for your blog is not plain white (#ffffff), then you’ll want to find the code for the background color that you are using before you even start making a header or social media tabs.  This is important because you want the background of your header and social media buttons to be the same as your page background so they will blend with the rest of your page and look like they are embedded into your page.  Find the color you are using for your background here:


Just for fun, here are the color codes for my current color selections:

Peach: FA8A74

Mint: 9ADDA7

Grey:  808080
links2 copy
Though I did use a darker grey for the page text so you could read it more easily, and it still fits with my color scheme.


When designing your header and other buttons, you’ll want to have more font choices than just the basic fonts that come with your computer.  There are a ton of free fonts out there.  Two websites that I like to use are 1000 Free Fonts and Urban Fonts - they have a ton of fun fonts.  Once you find one you like, download the file, and save it somewhere where you can find it.

Open the file, then double-click on the TrueType font file.


Click the “Install” button at the top of the page that comes up.


And voila!  The font is installed on your computer.  Once the font is installed any scrapbooking or photo program you use on your computer should have the new font listed (try closing the program and reopening it if you don’t see it right away).

The possibilities are endless when you have thousands of free font choices!

Sidebar Intros

This is going to sound redundant, but I really made the sidebar pictures introductions with the same methods that I made the social media buttons and header.  Once you know how to make a header image, you really can make any page element you want.  Once again, just make sure the background of your introduction image is the same as the rest of your page background.

To make my sidebar introduction images I opened the photo I wanted in Photoshop Elements, used the cookie cutter tool to cut the shape I wanted out of the image (in this case, a circle), then dragged it onto a new blank file.  Then I just added text and played around with the fonts and sizes until I had it how I wanted it.

Intro-Menarrow2biggerwords copycrop

See my header design post for more tips on how to do this.

Once I had the image how I wanted it, I sized it so it would fit perfectly in my sidebar and inserted it into a gadget.  I used the html gadget and photobucket html code that I discussed in this post, but you could also upload it as a “Picture” gadget – just make sure you uncheck the “Shrink to fit” box and have it sized exactly how you want it – otherwise Blogger might re-size it too small.



And finally, I had a question on pages, so I thought I’d cover that quickly as well – it’s the last thing I can think of that you might want to add to your blog, if you don’t already have it.

When people come to visit your blog, it’s really nice if you have an “About Me” tab.  You can go a bit more in-depth about yourself when you have a separate “About Me” page, and this way your new visitors don’t have to search through tons of old posts to learn more about you.  I highly suggest adding at least an “About Me” tab if you don’t already have one.

Blogger has made this nice and easy.  All you have to do is go to your layout page and then click “Add A Gadget”. 


Find the “Pages” gadget.


Once you add that gadget you can create some pages by clicking on the pages option in your blog dashboard sidebar, and then “New Page”.


Add as many pages as you want, and then go back and edit the pages gadget you created to change the order.  If you want the pages to appear as horizontal tabs, as opposed to a list of links in your sidebar, drag the gadget under your header. 

See? And that is all you need to do!

Okay, I think I’ve now covered almost every blog design question that I can think of, at least the ones that I know the answers to!  Please let me know if you have any questions for me about anything I discussed, or any other questions about blog design and I’ll see what I can figure out for you.

This concludes my series on blog design!  Thanks for hanging in there with me.  Now you see why there was no possible way I could fit it all into one post!
You may also like:
THE COOKS said...

you are so good at this stuff!! Thanks for sharing! :))

Meghan said...

These posts are so informative Callie. Thanks for taking the time to teach us less savvy bloggers how to do it all. Again, I will be coming back to this post this summer (when I have some more time on my hands) and hopefully experimenting with some of these ideas. You're awesome!

Jennifer R said...

Cool info! Thanks! :)

© Through Clouded Glass. Design by MangoBlogs.