Mary Shaw here again, this time to show you how to customize Blogger. It’s a great blogging tool, and made even more fun by creating a custom layout. I’m using custom graphics that I created using Melissa Esplin’s Psychedelic Circus Blog Kit.
The template I’m using at Blogger is called “Minima.” Since I’m customizing it myself, I don’t want to pick one that already has a wild layout. To select it, click “Layout” in your Blogger menu:
Then, click “Select A Template” and choose “Minima” from the template menu. It’s top left on the list.
Once you have your layout chosen, it’s time to customize the page elements. Select the “Page Elements” tab:
I’ll start with the custom header I made earlier. First I click “edit” on the page header element.
Then I select “browse” and choose my file from my hard drive.
I enter the blog’s title and description, but choose to put the graphic instead of the title on the page. The title and description are important – so include them. The title will appear in the menu bar of your page, and the title and description will become the teaser for your blog in Google and Yahoo if you choose to have your blog open to search engines. I click “save” and the header is installed. Whew.
Next come the blog buttons I customized earlier.
I select “Add a gadget” in what I call the “right rail” of the blog layout: the right-hand column.
The gadget I use for blog buttons is the “Picture” gadget. It’s right there in the first tab, “Basic.” I click the little blue “plus” button 3 times, since I’m adding 3 blog buttons.
Each time, I don’t enter a title, and don’t enter a link, since it’s just a static (pretty but not so useful) button.
I’ll do the nifty drag-and-drop to get them into the right place in my right rail (see the above graphic for order).
When I preview my blog, I see weird blue lines below the blog graphics. I don’t like that. So I’m going to fix it.
I’m going to go into the “Edit HTML” tab. Are you scared? Don’t be. It’ll be easy because I’ll walk you through it.
I check the “expand widget templates” box.
I add the following to the CSS portion of my template. I do a CTRL+F (find) and enter “.sidebar .widget” into the find screen, then paste the following just below that section, as shown.
/* added to fix the blue line under blog buttons */
.sidebar .Image {
border-bottom: 0px !important;
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
/* end fix */
Then I preview it, and the line and all that space below the headers are gone! Yay! I don’t forget to save the template before I leave the screen.
And now I have a clean, simple blog with custom buttons and a custom header.
I hope this tutorial helped you set up your custom blog. Happy blogging!
Related posts
Tags: Blogger Tutorials, Blogs, Mary Shaw, Melissa Esplin
wow. this is awesome. unfortunately i need exactly SUCH a tutorial for wordpress. i would love to redesign my blog but have not a hint of a clue how to do it.
Thanks! This is very helpful…now can you please write an article about creating an extra hour to each of my days so I have time to do this! Haha Just kidding!
THANK YOU SOOOOOOOOO MUCH! This is very helpful. I was wondering how to do all this.
great info! very helpful. thanks mary
I’m glad you all like it! Lou, I do plan to get to WordPress, Typepad, and other blogging systems. I started with Blogger because one of the Design House Decorators asked for my help with their Blogger site. It’s a weekly column, so watch for new articles each Monday.
Betty, I know exactly how you feel! I need about 10 more hours in every day, LOL!
Great info! Is there a quick way to add a custom backgrounds to blogger?
Cathy, yes, there is. There’s a little bit of a trick to it, so I will cover it another week. -Mary
Thank you SO much! This was really helpful! I had even gone to the trouble of buying a book to try learning code…let’s say it’s still packed from our recent move, and leave it at that!
Thank you for the help, I look forward to more!
Melissa,
I’m glad it helped. It’s such a pain to try to do stuff to your blog when you don’t really understand what’s going on. That’s why I’m putting together step-by-step instructions – hopefully you won’t get too lost following them.
Cathy,
I’ve just posted a tutorial on how to add a custom background in Blogger. Hopefully you find it useful. http://www.designhousedigital.com/content/classroom/how-to-set-up-a-custom-background-in-blogger/