How to Add a Free Blog Background to your Blog using any of the Template Designer “Simple” Themes

July 26, 2011 2 Comments

I have noticed that there are a lot of people out there still using the Minima theme for their blog, simply because the free blog background codes don’t work well with the new Template Designer Themes.  I will be working on tutorials for all the different themes.  In this first tutorial, I will show you how to add a background to all 7 of the “Simple” Themes.

Step #1: Select the Simple Theme that you would like to use.

Default Blue Simple Theme

Step #2: Find a Free Blog Background that you like and copy the code (right click > Copy, or ctrl + C on your keyboard).  I picked a background from Shabby Blogs.

Shabby Blogs Free Background Code Screenshot

Step #3: Go to your Blogger Dashboard and click on “Add a Gadget” (it doesn’t matter where, I just usually pick one of the bottom ones).

Add a Gadget

Step #4: Select the “HTML/JavaScript” Gadget.

HTML/JavaScript Gadget

 

Step #5: Paste (right click > Paste or ctrl V on your keyboard) the free background code in the text area and click on Save.

Free Background Code in the HTML/JavaScript text Field

 

This is what it will look like now:

Screenshot of Simple theme with a Free Blog Background before changes

 

Step#6: Go to your Template Designer and click on the Advanced tab, and then the Backgrounds tab.  No change your Outer Background, Main Background, and Header Background to Transparent.

Screenshot of Template Designer Background Colors

 

Step #7: Go to your Adjust Widths tab, and change the width size to fit within your new blog background.

Adjust Widths

If you are using the Blue, Orange, Grey, or White version of the Simple Template, then you are finished here, if you are using the other versions (that use images), continue on to the next steps.

Simple Template with a Free Blog Background

 

If you are using one of the other themes, you blog might look something like this.

Simple Template with a Free Blog Background

Step #8: Go to your Background Tab and click on “Remove image“

Background Tab of Template Designer

 

You can either stop at this point, or if you still have a header image, like below, then move on to the next step.

Screenshot of the Header Image in the Simple theme

 

To get rid of that gradient image, add this code to your Advanced > Add CSS :

 

Add CSS to Remove Header image

 

Finally, if you have a line going through the width of the page, underneath the Header/Menu Bar (the green Simple template does that).  Then go to the Advanced Tab, and Accents, and change the “Separator Line Color” to Transparent.

Line Seperator Color

 

There you have it, you can use any of the simple themes with a Free Blog Background!

Add a Free Blog Background to a Simple Theme Template

Filed Under: 2 Column Template, 3 Column Template, Background, Blog Tips, Custom Blog Design, Custom Blog Design Tutorial, DIY, Easy, Easy Tutorials, Featured, Free Blog Background, Guide, Headers, Layout, Minima, New Blogger Questions, New Blogger Template Tutorials, No Software, Templates, Tutorials, Uncategorized Tagged With: , , , , ,

How to Get a Cute Non-Web Font for your Blog.

January 3, 2011 17 Comments

Part 1: Get Set up

First thing you will want to do, is to sign up for a free webfonts.fonts.com account.

Once you have an account, you need to go to your “Project” tab, and where it says “Current Project”, select “Create Project”

Now you need to add the Project Details, make sure you click “Add” next to your Publish Domain, then Click “Save Project“

Next Click on “Choose fonts“.

Here, you can browse through the different kind of fonts available.  **Quick Tip: If you click on “Show free”, you won’t have to scroll through all the ones that say “Upgrade”

Once you have found one(or more) that you like, Click on “Add to Project“.

Now we are going to “Work on style sheet“.  We have to add a “Selector”, the Selector that you need to add will be different, depending on the Template that you are using, so I have listed below what Selector to add for the different templates.

Minima:   .post h3
Simple:   h3.post-title
Picture Window:   h3.post-title
Awesome Inc:   h3.post-title a
Watermark:   h3.post-title
Ethereal:   h3.post-title a
Travel:   h3.post-title a

**In this sample, I am using the “Awesome Inc.” Template, so I am going to use the h3.post-title a

After you type it in, click “Add selector“.  Then you need to click on the pink drop-down menu, and select the font that you want (if you only picked one, then it will be the only one that has shown up)

 Once you have selected your font, you need to click on “Save changes and update style sheet“.

Now, go to your “Publish” tab, and Click on the tab that says “Option 2: Advanced (JavaScript)“.  It should like this:  **if you only picked one font, than there will only be one font-family listed

Now Copy the Text in the First box and go to your Edit HTML page on you blog, and paste it directly after you <head>  **it is right close to the top


Go to your Template Designer.

 and click on Advanced, and Add CSS.  (for the Minima Template, you can add the code here, or in you Edit HTML page)

Now we need to tell the template which fonts you want where, so below I have a list of different fonts that you can change.  In my tutorial, I am going to change the Post Title, and the Sidebar/Gadget Title. So for my example,  I need to copy the 2 lines below that work for the Awesome Inc.

Minima Template:
     Post Title:    .post h3 { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    #header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    #header .description { FONT FAMILY HERE }

Simple Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }
Picture Window Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }
Awesome Inc. Template:
     Post Title:    h3.post-title a { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }
Watermark Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }
Ethereal Template:
     Post Title:    h3.post-title { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }
Travel Template:
     Post Title:    h3.post-title a { FONT FAMILY HERE }
     Sidebar/Gadget Title:    h2 { FONT FAMILY HERE }
     Post and Sidebar/Gadget Main Text:    body { FONT FAMILY HERE }
     Header/Title of Blog:    .Header h1 { FONT FAMILY HERE }
     Header Description/Blog Title Description:    .Header .description { FONT FAMILY HERE }

Paste the ones you want into your Add CSS page, like so…

Then, you need to go back to your Web Fonts account, and Copy the fonts that you want to use.  Make sure to copy the WHOLE line.

Now go back to your Add CSS page, and paste the fonts into the place where it says FONT FAMILY HERE.  Now it should look something like this:

Now just Click on Apply to Blog and you’re done!  Now I have a Cute font for my Post Titles, and a different one for my Sidebar Titles.

Filed Under: Custom Blog Design, Custom Blog Design Tutorial, DIY, Easy, Easy Tutorials, Fonts, Intermediate Tutorials, Links, Minima, New Blogger Template Tutorials, Posting, Sidebar Titles, Tutorials

Making a Custom Header using Picnik. SO EASY and FREE!

December 30, 2010 15 Comments

Step #1: Making the Header
I found this really cool website called Picnik it is so easy to use, and the best part is that it is FREE and NO registration required!!  I will show you how I made this header, so that you can make one that is 100% Custom for you!

First, head over to Picnik, and click on Get Started!

Second, I am going to click on Make a Collage.

Then select a layout.

I selected this one and used the Proportions slider to change the height a bit.

Down at the bottom, you can upload your images.

I am going to upload from my Computer.  After you upload, drag the photo on to your layout.

I wanted a big spot for my Header title, so I am going to leave the left picture empty.  and I am going to change the color to a maroon color that matches my background that I made earlier.

After you get the right color, I have used the Roundedness slider to make the image have rounded edges.

Now just Click on Done in the top right-hand corner.

Now I want to work on the text, so I am going to the Text link at the top.

My title is going to be “Messes with the Reynolds”, but I don’t want to type the whole thing in just one box, because I want to lay it out cute, so I am first going to just type “Messes” and click Add.

Then pick a cute font.  The little circles on the 4 corners allow you to size the word, and the circle on the top allows you to rotate it.

So after I added a few more Text Boxes, and played with the fonts, this is what I came up with.

Now I would like to add a little embellishment, so I am going to click on Stickers at the top.

I found a cute little family drawing that worked perfectly and just dragged and dropped it on to my Header.

Then I went back to the top and clicked on Frames.

There, I picked Rounded Edges, and adjusted it to match my image.

Now if your background is any other color than white, you will want to select Transparent Corners!

If your header looks the way you want it, just go back to the top and click on the Tab that says: Save & Share.

These are the settings that I used to save my photo.  I did 1000px wide, so that it would fit just perfect on my wide 2 column template, and I picked png, so that the corners would be transparent, not white.  (JPEG files will not allow you to save transparent).

Now my saved Header looks like this!!  So cute!

Now, you can add your header image as you normally would here:

 When you upload, make sure that you select Instead of title and description, and do NOT select Shrink to Fit.  Then Click Save.

If you are using the Minima Template, follow these next steps to get rid of the border around your header, and center it (if you are using the new 2010 Templates, stop here):

Go to your Edit HTML page, and find your #header-wrapper, and change the border to 0px.  So your #header-wrapper should now look like this.

Now go down to your #header, and change the 5px to 0px.  Also change the 1px to 0px on your border.  So now it should look like this.

Now you’re Done!

Filed Under: Custom Blog Design, Custom Blog Design Tutorial, Easy Tutorials, Headers, Intermediate Tutorials, Minima, New Blogger Template Tutorials, Tutorials

EASY DIY Custom Blog Design Part 3: Wide 2 Column Template

December 15, 2010 6 Comments
This is a Series of Tutorials, so if you need to start at the beginning, CLICK HERE.
In this part of the tutorial, I am going to show you how to make a wide 2 column template with nice white space. 

This tutorial uses the Minima Template (if you started at the beginning, I already had you do this).

First, you will need to head over to your Edit HTML page and scroll down to #header-wrapper { and change 660px to 1000px (or change it to what ever width you would like, in my example I am doing 1000px).
Next do the same thing on your #outer-wrapper {
Now I need to adjust the #main-wrapper { I changed my width to 640px.
Then adjust the  #sidebar-wrapper { I changed mine to 300px.
If you like your sidebar on the right, you can stop here, but if you would like to change it to the left, I will show you how to do that now.
Go to your #main-wrapper { and change $startSide to $endside, and go to your #sidebar-wrapper { and change $endSide to $startSide.  Now it should look like this!
Now Save your Template, and you are set!
Filed Under: 2 Column Template, 3 Column Template, Custom Blog Design, Custom Blog Design Tutorial, DIY, Easy, Easy Tutorials, Minima, Templates, Tutorials

The Easy Way to Make a Seamless Pattern in Adobe Illustrator and Install it in Blogger.

December 2, 2010 2 Comments

I used to make all of my blog backgrounds about 1600px X 1000px, which is all good….  but I hated it when I would look at my designs on my dad’s 30in monitor and I would see all that nasty white space on the sides of my beautiful designs.

Hopefully with this simple tutorial, I can get you hooked on seamless patterns as backgrounds.  Not only are they simple to make, and oh so lovely, the go on forever and ever, no nasty white space.  Oh, and don’t let me forget, they are smaller in file size, therefore, they will show up quicker when you are loading your page.

So on to the tutorial!  This is going to be the first of 2 tutorials, and this one is the UBER EASY way to do it.  We are going to take a dingbat font (this is “Davys” that I found at fontsquirrel.com) and make that into our seamless pattern.

First, go to Type and Glyphs.

Then find your font, and find a dingbat that you like, for the way that we are going to make this seamless pattern, a semi square font usually works the best, but just experiment with it :)  This is the one I chose:

Now go ahead and change your font to Outlines, by doing a Right-Click and Create Outlines.

Now I need to make a box with my Rectangle Tool.  When you drag your mouse to make the box, if you hold the Shift key, it will stay exactly square.  My box has no Stroke or Fill Color.

Then you need go Window and Align, to get your Align box.

Now select both your box, and your Dingbat and click on the Horizontal Align Center.  That will Align your box and your dingbat exactly center.

Then you need to click on the Vertical Align Center.  That will make it all centered now.  Now if you need to resize your box any (it should be slightly larger than your dingbat, as shown below), then use the corner to size while you hold down the SHIFT and ALT.  That will keep your box centered on the dingbat.

Now, select both the box and the Dingbat, and Drag it onto your Swatches Palette.  Then it will show up like this:

Now, make a box, and use the new swatch you make to preview your seamless pattern.

Now of course I CAN’T just leave this black and white, so I am going to go back to the box and the dingbat that I made, and change the box pink, and the dingbat a darker pink, then just drag it on to the Swatches Palette, just like I did before, and Voila!  Now it is cuter :)

Now if you want to use this as a blog background….  You need to save it like this:

First you are going to go back to the box and the dingbat that you dragged on to your layer palette, and you are going to find out what size your box is, by clicking on it, and using your Info palette. (if you don’t know where your info palette is, go to Window, and Info).

Mine is 156px X 156px, so I am going to make a new document that is just that, 156 X 156.  Then I am going to copy and paste it onto the new document and put it exactly centered, like so:

Then, just to make sure that I don’t have any sliver of white around my box, I am going to take just the pink box that is behind the dingbat, and I am going to size it up, by holding the corner and holding shift and alt.  Then it will look like this on your document:

Now I am going to do a File, Save for Web, and save it as a PNG.

Now just upload it to Photobucket and go to your “Edit Html” page in blogger. Paste this code where I have shown below:

background:url(your “direct link” code here) ;


Now you have a nice seamless pattern background, and NO nasty white space, even on a 30 inch monitor :)

Filed Under: Advanced Tutorials, Background, Creative, Custom Blog Design, Custom Blog Design Tutorial, Easy, Easy Tutorials, Illustrator Tutorials, Intermediate Tutorials, Minima, Seamless Patterns, Tutorials
« Older Posts

To the Top