Free Blogger Templates

Stripes and Dots Premade Template

2011-10-06T20:26:00.000-07:00

I've got another premade template for you! This one is a little edgier, but I think it would be perfect for someone looking for something unique and different. The Stripes and Dots Template (live demo) is a modern black and cream Blogger template.

Highlights from this template:

Includes customization of the stripey header in whatever font you'd like (I'll give you some options)
Has two columns, but I can make it one or three columns on request
Drop down navigation menu is included in a widget for easy customization
Colors and fonts can be changed in Blogger's Template Designer
Includes installation

How it works: You purchase the template by clicking on the buy now button below. I will contact you within 48 hours to set up customization and installation.

Note: Because this is a premade template, it is not custom, so will be sold to other clients, too! Go here for a custom design quote if you'd prefer something one of a kind.
Purchase the Stripes and Dots Template:

Sleek Premade Template - Perfect for a Photography Blog

2011-10-05T16:30:00.000-07:00

Introducing the premade SleekTemplate! This one is simple, clean, and modern and can be customized with your own image and logo.

A few highlights:

One column design supports images as wide as 930px (can be made with two columns upon request)
Includes custom header (you send the image and logo and I'll create the header for you)
Optional Flash Slideshow header can be added (you send the images and your logo and I create and install the slideshow for your header)
Drop Down navigation bar is included in a widget that is easily customizable
Modern black and gray quatrefoil
Red accents shown in demo can be coordinated to your logo through Blogger's Template Designer feature
Includes installation

How it works: You purchase the template by selecting your header option and clicking on the buy now button below. I will contact you within 48 hours to set up customization and installation. Note: Because this is a premade template, it is not custom, so will be sold to other clients, too! Go here for a custom design quote if you'd prefer something one of a kind.

Custom Blogger Designs

2009-09-02T20:21:00.000-07:00

Thanks for your interest in a custom Blogger template design. Check out my portfolio below and if you're interested, please fill out this contact form and I'll send you a price quote. Just let me know if you are interested in a full redesign or some tweaks (like widening your blog to accomodate larger pictures, adding a rotating header, making a blog that will match your website, or maybe a new background pattern). I look forward to hearing from you!

Here are a few custom designs I've done. I try to keep prices down by making my designs simple and easy to use. Click on the link above the screenshot and you can see the template in action. Some of the owners have made a few changes since I did their blog, which just goes to show the designs really are easy to use!

Lexi Photography

Anne Ruthmann Photography

My Life as a Married Girl

Leah Haydock Photography

Haley Lamb Photography

Paul White Weddings

Laura Leslie Photography

I Pray to Gouda

Kenzie Shores Photography

Cakegrrl

Eternal Reflections Photography

Megan Renae Photography

The B Family

Black and Yellow Floral Three Column Free Blogger Template

2009-05-13T19:14:00.000-07:00

I thought it was time again to post a free Blogger template! I bought this background, but then we decided to go in a different direction with the design, so you get to benefit! I think there is a dearth of free three column templates out there, so this makes two that I've posted.

If you'd like to use this for your Blogger blog, you can download it here. If you'd like it with scrolls on the header, download it here. Make sure you only select up to and including the html tag just above the black line at the very bottom. Don't copy the black line or the text below it. To install this template, please check out the Installation Guide.

Recommended Blogger Nav Bar Color: Black.

[Updated 2/2/10 to include two header options.]

Pink Retro Free Blogger Template

2008-07-04T19:24:00.000-07:00

Wow, it's been awhile since I posted a free Blogger template! This one is a fun, bubble gum pink one, with a few cute bubbles thrown in for good measure. This is the first three column template I've posted. I created it for a friend who decided to go with a different background and color scheme, so here it is for free for you!

If you'd like to use this for your Blogger blog, you can download it here. Make sure you only select up to and including the html tag just above the black line at the very bottom. Don't copy the black line or the text below it.

To install this template, please check out the Installation Guide.

Recommended Blogger Nav Bar Color: Tan.

Got Toast Free Blogger Template

2007-07-23T21:01:00.000-07:00

Haven't you always wanted a free Blogger template with toast pictures? Maybe a big picture at the top, then little pieces of toast next to the sidebar headings? Yeah, me too. So I made one. Click on the picture to see a bigger version.

I just think this is a silly little template. If you'd like to use this for your Blogger blog, you can download it here. Make sure you only select up to and including the html tag just above the black line at the very bottom. Don't copy the black line or the text below it.

To install this template, please check out the Installation Guide.

Lost Smoke Free Blogger Template

2007-05-10T15:21:00.000-07:00

Like everyone else, I am addicted to Lost on ABC. I saw the black smokey image used in this template and thought - ooooh. That looks like the scary smoke monster on Lost. That would make for a great, simple, free blogger template. So, here you go. I also think it looks like black ink, but the Lost thing is much more interesting.

Click on the picture to see a bigger version and feel free to download away. You can find it here. Make sure you only select up to and including the html tag just above the black line at the very bottom. Don't copy the black line or the text below it.

To install this template, please check out my Installation Guide.

Recommended Blogger Nav Bar Color: Black.

Yowl Kitty Free Blogger Template

2007-03-07T21:16:00.000-08:00

This is the Yowl Kitty Free Blogger Template. Click on the picture to see a bigger version. Isnt' he just so cute?

You can download this template here (make sure you only select up to and including the html tag just above the black line at the very bottom, don't copy the black line or the text below it).

To install this template, check out the Installation Guide.

Recommended Blogger Nav Bar Color: Tan

Blue Stars Free Blogger Template

2007-03-03T22:54:00.000-08:00

This is the Blue Stars Free Blogger Template. Click on the picture to see a bigger version.

You can download this template here.

To install this template, please check out my Installation Guide.

Recommended Blogger Nav Bar Color: Silver

Update: For some reason, imageshack lost the footer image. If you are using this template, just log in to your blog, go to template, then edit html. Scroll down till you see #footer. In that section there is "background-image." Replace the url there with this one and you should be set: http://img525.imageshack.us/img525/8697/footerrc5.jpg. I updated it in the version for download, so if you're not already using this template, no worries.

How to Post Large Images in Blogger

2006-11-20T19:51:00.000-08:00

One of the main tweaks people want for their blogs is the ability to post pictures that are sized larger than Blogger will allow. So, here's how you have posts with large images. It looks like a lot of words, but I just want to be as clear as possible. And once you do it a couple times, it will be very easy, I double pinky swear.

The tutorial below assumes your blog is wide enough to accomodate larger pictures. If you haven't widened it, it's pretty easy. The widest you should make your blog is 950px. Just go to Template, then click on Customize. On the left side, you'll see an option to Adjust Widths. Make your Entire Blog 950px wide and your sidebar 0px wide. For those of you with older style templates, check this out (and the rest of you can skip ahead past the bullets!):

If you haven't switched to the new interface yet, go to Design, then Template Designer. Follow the instructions above from there.
If you have an even older template style, follow these instructions: In the Edit HTML section of your Dashboard, scroll down to outer-wrapper and increase that to 950px. Then scroll down to main-wrapper and increase it so that the width of main-wrapper and sidebar-wrapper add up to 950px. You may have to play around with the numbers a little bit so that your sidebar isn't pushed down. This tutorial also assumes you are using the updated post editor. You can do that by going to Settings, the scroll down to Global Setting and select Updated Post Editor.

Okay, on to the big images!

1. Resize the image you want to upload so that it is no wider than your main column and save it. If your blog is 950px wide, I'd recommend doing images that are 930px wide so there is a white space on either side of the image in your post.

2. Go to www.photobucket.com, www.flikr.com, or www.imageshack.us (or whatever image hosting site you prefer) and upload the photo there.

3. Those sites give you an option for "direct link to this image" or "url for this image." This will be a link to a webpage that has just the image on it and nothing else. Copy that link.

4. Log into your Blogger account and start a new blog post.

5. Go to your post and click on the button to upload an image.

6. Select Web Address (URL) and enter the link for the image (the one that you copied in step 3 above) in the Image URL box.

7. Align it however you like and click on Original Size.

8. If your image is a little bit off center, you can go to the more old school, but still easy, way of doing it. You can click on Edit HTML in your post reader, look at the code for the image, and delete the part that says style="margin-left: 1em; margin-right: 1em;". If messing with that code is difficult, you can create your own code for the image simply. Click here to find out how.

The image should show up with the correct dimensions!

[Updated 11/15/11. Updated to reflect new Blogger Template Designer features.]

[Updated 6/29/2010. Please note many of the comments below related to the way to upload large images in the "old" post editor, so they are now outdated.]

How to Keep Your Gadgets in Your New Template

2006-10-31T21:33:00.000-08:00

1. Before you install the new template, go to your Dashboard and click on Layout. Then click on Edit HTML.

2. Scroll down in the scary looking HTML until you see this code:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>.

It will likely be almost all the way at the bottom.

3. Right underneath that code, you'll see a list of your gadgets that will look something like this, although everyone's will be different since everyone has different sidebar stuff:

<b:widget id='Text1' locked='false' title='Test' type='Text'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

4. Copy all the gadgets, up to but not including </b:section>

5. Open up a Notepad window (or Word if you don't know how to find Notepad) and paste the list of gadgets in there. Save it to your desktop and keep it open.

6. Follow the Installation instructions. Before hitting "confirm and save," copy the list of gadgets from your notepad and paste into the template underneath the same code in number 2. It will be a little harder to find this time, but it's there! Also, make sure you paste it under the second line of code listed in number 2, not under the first line.

7. Hit preview to make sure all your gadgets show up. When you hit "confirm and save" it might give you an error message that is something like this: "More than one widget was found with id: BlogArchive1. Widget IDs should be unique." If that happens, you have to go into the gadgets you pasted and delete whichever one is listed in the error message. (If you're interested, the reason this happens is that the template I created and your template have the same gadgets, but if you delete one, then yours will still be there). If your gadgets don't show up, go back and start over!

8. Hit "confirm and save."

Old School Way to Post Images

2006-06-28T20:47:00.000-07:00

If your images look a little off center using this tutorial (which is easier), then try this method out:

This tutorial also assumes you are using the updated post editor. You can do that by going to Settings, the scroll down to Global Setting and select Updated Post Editor.

1. Resize the image you want to upload so that it is no wider than your main column and save it.

2. Go to www.photobucket.com, www.flikr.com, or www.imageshack.us (or whatever image hosting site you prefer) and upload the photo there.

3. Those sites give you an option for "direct link to this image" or "url for this image." This will be a link to a webpage that has just the image on it and nothing else. Copy that link.

4. Log into your Blogger account and start a new blog post.

5. Go to your post and click on the button to upload an image.

6. In the spot where you'd like your image to go, type this code but replace my link with your direct link to the image: <center><img src="http"//www.youlinkhere.com" /></center>

The image should show up with the correct dimensions and perfectly centered!

Installation Guide

2006-04-03T22:44:00.000-07:00

The free Blogger templates you will find on this site are set up for the Blogger Layouts format (as opposed to the old Classic format).

The Reader's Digest version of these instructions is that you need to save your old template and copy and paste the new template code into the "Edit HTML" page.

If you have a bunch of stuff in your sidebars, Blogger now allows you to keep them! You'll see the option after you hit save - it will ask you to select whether to keep them or not.

Here are more detailed instructions:

1. Log into your Blogger Account.

2. On your dashboard (the first screen you see), click on "Layout". (If you are still using a Classic Template, click on Template.) Click on "Edit HTML" and download a full copy of your current template. This is your backup in case all hell breaks loose and for saving the content from your current customized widgets. (If you are using the old Classic Template, save your old template, then select "Customize Design," then click on "Upgrade Your Template" and select any of the templates in there. Click "Save Template." Now you're all caught up.)

3. Come back to this site and copy the code for the template using the instructions in the post for the template you like.

4. Back in your Blogger account, go to the "Edit HTML" page.

5. Delete the code for your template and replace it with the new template code. I do this by right-clicking in the template area, clicking "Select all" and then hitting control-v to paste the new stuff over the old stuff.

6. Click Preview. If everything looks good, click Save Changes. This is when Blogger will allow you to choose to keep your widgets or delete them. (I highly recommend keeping them because it is much easier to delete them from the new template than to recreate them.) All done!

Things you should do after installation:

1. Save all the images in the new template and upload them to your own Photobucket or Image Shack account so that if anything goes sideways, you will have copies of the pictures to replace them.

2. Replace the links to the images in the pictures with the links to your Photobucket or Image Shack account. This way you have control over the images and will always know they are safe!

3. Leave the link to Made by Madeline in either the sidebar or the footer (please!).

If you have trouble installing it, email me and I can install for you for a small fee.

[Updated 2.9.10]

2005-11-13T15:10:00.000-08:00

To add a button to your navigation bar, go to Layout, then Edit HTML. Scroll down until you see

. It's about 3/4 of the way down the page. You'll see each of the main buttons on the scroll bar, then, where applicable, the drop down menu items are just belzow them. Each of the

items is a button in the navigation bar. To add a button, just copy what I did, but change the URL in the quotation marks and change the name of the link.

To add an item in a drop down menu, it's a little more complicated, but still easy! For example, if you wanted to add a category called "green" to the "style guides" drop down menu, you would scroll down until you saw this:

style guides

Then you would add another

to the list, before the that is the second to last line. So, it would look something like this:

style guides

It looks scary, but I swear it is easy after the first time!

To delete a drop down menu item, just delete everything between and including the

and the

tags. If you want to get rid of the drop down entirely, just delete everything between and including the

and that is underneath the button. Make sure the navigation bar button still has its ending