Step by step to designing a blog on blogger

Now that I have written a few posts, I feel it's time to make the blog look a bit prettier.  I don't like the font (or typeface) I chose for the titles. Also I notice that my links come out in a color I don't like.  

I usually use Typepad when I blog and it's second nature to me, but I felt that for your purpose, I think blogger is better as you are developing a 'brand' (eek, that' s word irks me.  Branding evokes labeling, and over- simplification and being part of the system and you know... cows and sheep.) 

Here is why I think blogger is best for your purpose:

Blogger is own/made/controlled by google. It's connected to gmail, google + etc. The interface between all of those makes it very easy to go from one to the other without having to enter passwords etc..  The google search engine probably favors blogger blogs (don't quote me on that but in its pursuit of world domination, don't you think google would?)  Also, when the time to blog comes to communicating with other bloggers and commenting, it will all be very smooth and easy.

By the way, I know you'll hear everywhere that you should use wordpress because... because... because?  Well I see no advantage to using wordpress.  It's hard to navigate and create, the interface makes it more difficult to comment and you can't monetize wordpress blogs with advertising so please tell me why this is better. For your use and purpose, blogger will work great and smoothly. You can always export your blog to another platform later on.


Sorry for digressing. Here I am trying to understand how to design this blog to make it prettier, and help you design and create your own blogger blog in the process.


Okay on that main blogger page (in case you can't find it, just search up 'blogger' on google and you'll get right to it if you're already logged on to gmail, and if you are not you'll be asked your gmail account and password), click on the title of the blog you want to make pretty (in case you have more than one blog).

In the left hand column, click on 'template'

See the title of your blog there, appearing? 

I use 'simple' as a my template for this blog. Not a bad one, clean and basic. Don't get tempted by the frilly templates. Nothing spells amateur like the templates with images already incorporated.  When in doubt go lean, simple and white.

See the button that says 'customize' ? Click on it.

This bring you to a relatively intimidating page.  Gulp once, and look at the top grey bar and find:
Background: If you used simple, it will offer white and that's all you need to know.  Moving on, not to the tab below, skip a few first and click on:

Layout: We're doing this out of order because.. just trust me on that one. How can you adjust width of columns when you haven't even decided how many columns you want. In my experience, three columns work best. The footer doesn't matter for now, select which ever you want.  Note: Interestingly this page informs you that you can move parts of your layout around, only you cannot do it here. This tab is just to select a layout. In order to move things around (such as gadgets) and add, remove and edit them  you will have to go to the actual 'Layout' page.  Moving on to the fun stuff:


Adjust widths: You can move the curser and decide how wide each column should be.  I made this blog 1370 px (I think that's short for pixel, whatever those are), and each column 230 px.  You want large enough side columns to put all kinds of goodies and buttons (which blogger calls 'gadgets'.)

 Did you see how your blog moves as you move the curser?  This is how fun it is to design your blog on blogger. The parts you're working on are highlighted in red and as you try things, it is reflected below. So keep an eye on what's happening on your blog as you click away.
note: periodically click on the top button 'apply to blog' or your changes will be lost and you will be cursing like a sailor. Allright friends, time to move on to the advance tab, because yes, that is what you are. Advanced!

'advanced'.  Oh my... even more intimidating. What are all those choices!?

Well it's self explanatory as long as you take it slow and go methodically one line at a time. 

'page text' : This is where you choose the font (typeface) and the color of the text in each of your posts. I suggest black and a classic font such as Times New Roman.  As you click on various fonts and color you can see exactly how it would look on your blog. When you've chosen, make sure to go up to that button up on top that says 'apply to bloga.  If you don't those new settings won't be saved.


'background':  opt for all white for now.  Chose transparent for the banner for now. You can go mad with color later but here we are sticking to simple (at least until you decide on the color scheme of your brand (eek, that word again...) 


'links' the point here is for readers to distinguish regular text from the text that will lead them to a webpage. The color should be different from the text but still readable. 'Hover' is the color the clickable text changes to when your reader's curser 'hovers' over it and 'visited' color is to indicate to your reader that this is a link they've already visited. It makes them easier for them to keep track of what they are reading and visiting. I made my link in pink hues, so as to keep the color scheme coherent. 


Remember to click the orange 'apply to blog' button to save your changes.


'blog title' This is where you choose the typeface, size of typeface and color of your blog's title. Go ahead, choose big letters. You can create a custom made banner later, there is absolutely no need to obsess about it right now, as your blog will not be public until it is perfect. 


'blog description' :same thing for your blog description. This too will be replaced by a custom banner later on. 


'tab text': below your blog you have the possibility to create a navigation menu/bar. Visitors can click on those, for example a home page, an about the author page, and be taken to a stand alone page. See how I created a 'how to navigate this blog in a bar below the blog title?  Those pages are created by going back to your main page and clicking on 'pages' . You can also see my detailed description of how to create stand alone pages or navigation menu on bloggers. Go ahead and decide on the color of the text and then go down on your list and change the color of the navigation menu background by selecting 'tabs background'.


Now that you are a pro at this, move on to the next steps and apply what you learned to 'post title' (Notice that the color of the post title is the same as the text, and turns to the color you chose for links once you've clicked on it.), 'date header', 'post footer' (notice as well that some elements of the footer appear in the colors you chose for links because somehow they are considered links).


"gadgets' : here is where you make pretty the titles of the gadgets you created.  By gadgets blogger means 'gizmo' or 'thingy', basically stuff you want, such your list of favorite blogs or most read posts, a link to twitter or facebook, a link to your book on Amazon, or your all important opt-in form where people sign up to be on your email list. I decided to make my gadget titles more funky to draw attention to them and make the blog look more fun.  This is my mood of the moment but you now see how easily I could make those changes.


By the way.... when was the last time you saved your changes by clicking on the 'apply to blog' button?


'images': go for white for background, black for text.


'accents': those are lines separating columns. Try a few colors or none at all and decide what you like.


'mobile': I think this is for the way your blog will look on a cell phone. I'm leaving white because this is a detail I'll fix later.


'add css': this is for the geniuses among us who know how to alter existing template coding, fuggetaboutit.


Congratulations, you have designed your blog! As you become more confident, and as you decide on the overall look you want your Brand to have, you will make changes.  Now is time to write your first post.  

No comments:

Post a Comment