How to Install a Makin’ Cute Blogs Free Blog Background

November 14, 2011 Leave a Comment

Makin’ Cute Blogs has decided to ramp up the Free Blog Backgrounds!  The Best Part: My backgrounds don’t have a button displaying in the top corner of your blog!  You get to choose where you want to display the button in your sidebar or footer.  Or, you will now have the option to purchase a background and have no button or credit required at all!

All of the Backgrounds are located here in my shop.  It is really simple and easy to install any of my blog backgrounds.  Just follow these steps:

Download Your File: Select your free blog background from my shop, and click on “Free Download” (no sign up needed)Step 1: Go to your Dashboard and Select Template and CustomizeStep 2: In your Template Designer, Select Background and Your Background Image.Step 3: Select Upload Image and Choose File. This is where you upload your free blog background.Step 4: Change Your Background Settings as Follows: Center Alignment, Don't Tile, Uncheck Scroll with ImageStep 5: Go to Adjust Widths, and adjust your sizes to fit your new background.Color Changing Backgrounds Only: Go to Advanced and Backgrounds and Change Your ColorDon't Forget! To save your changes, make sure to select Apply to Blog

Give Credit (required): Go to your Layout Page and Add a Gadget (anywhere you would like)Select HTML/JavaScriptCopy a Button Code Below (pick the one that you like).My Free Blog Background was provided by Makin Cute Blogs

<center><a href="http://makincuteblogs.com/"><img title="Makin Cute Blogs: Free Blog Backgrounds" src="http://makincuteblogs.com/wp-content/uploads/2011/11/MCB-BackgroundButton-1.png" alt="My Free Blog Background was provided by Makin Cute Blogs" width="150" height="200" /></a></center>




My Free Blog Background was provided by Makin Cute Blogs

<center><a href="http://makincuteblogs.com/"><img title="Makin Cute Blogs: Free Blog Backgrounds" src="http://makincuteblogs.com/wp-content/uploads/2011/11/MCB-BackgroundButton-2.png" alt="My Free Blog Background was provided by Makin Cute Blogs" width="500" height="50" /></a></center>




My Free Blog Background was provided by Makin Cute Blogs

<center><a href="http://makincuteblogs.com/"><img title="Makin Cute Blogs: Free Blog Backgrounds" src="http://makincuteblogs.com/wp-content/uploads/2011/11/MCB-BackgroundButton-3.png" alt="My Free Blog Background was provided by Makin Cute Blogs" width="125" height="175" /></a></center>




Paste it in your HTML/JavaScript content area, like seen below. Then Save.

Congrats! Now you have a cute background!

Filed Under: 2 Column Template, 3 Column Template, 30 Minute Makeover, Blog Tips, Commercial Use, Creative, Custom Blog Design, Custom Blog Design Tutorial, Design Tips, DIY, DIY Blog Design, Easy, Easy Tutorials, Free Blog Background, Free for Personal Use, Freebie Alert, Freebies, Templates, Tutorials

How to Remove Shadows from the Simple Theme in Blogger.

October 15, 2011 6 Comments

I have found that the Simple Theme is a really great theme to work with when designing blogs, but I always need to get rid of the pesky shadows to have a nice clean slate for designing.

Get Rid of these Shadows in the Simple Theme of Blogger: Post Background Shadow, Header Text Shadow, Post Image Shadow, Sidebar Image Shadow

 

All you have to do, is go to your Dashboard, and select “Template” and “Customize“…

Select Template and Customize

 

That brings you to your Template Designer, where you will need to go to your “Advanced” tab and click on “Add CSS“.

Advanced and Add CSS

 

Here are the codes that you need to paste in that section.

To get rid of the Header Text Shadow, paste this:

.Header h1 { text-shadow:none; }

 

To get rid of the Post Area Background Shadow, paste this:

.content-outer { -webkit-box-shadow:none; box-shadow:none; }

 

To get rid of you Post Image, Sidebar Image, & Profile Image Shadows, paste this:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { -webkit-box-shadow:none; box-shadow:none; }

 

That’s It :)  Super Simple!

Filed Under: Blog Tips, Custom Blog Design, Custom Blog Design Tutorial, DIY, Easy, Easy Tutorials, Headers, New Blogger Questions, New Blogger Template Tutorials, Sidebar, Simple, Templates, Tutorials Tagged With: , , , , , ,

Dawn by Design

September 27, 2011 2 Comments

So I was going through some of the new requests submitted, and someone asked for a tutorial on how to add a post divider using the new templates.  So I did a little digging looking for a tutorial and I came across Dawn by Design’s Blogwear Tutorials.  The tutorials that she had were great, so I went ahead and just listed some of them on my Blogger Tutorial Page.

Dawn by Design | Digital Goodness for Scrappers & Bloggers
Here is a list of the tutorials that I added to my directory:
Adding a blog header in Blogger (tutorial by Dawn by Design)
Adding a post divider image in Blogger – New Templates (Tutorial by Dawn by Design)
Customizing template colors in Blogger (tutorial by Dawn by Design)

Filed Under: Creative, Custom Blog Design, Digital Scrapbooking, DIY, Easy, Easy Tutorials, Headers, Intermediate Tutorials, Links, Linky Love, New Blogger Questions, New Blogger Template Tutorials, Post Dividers, Sidebar, Sidebar Titles, Templates, Tutorials

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: , , , , ,

30 Minute FREE Blog Makeover! Did I meantion that it is SUPER EASY!!!

April 19, 2011 3 Comments

30 Minute Makeover: Easy Free Blog Design

Make this blog in 30 Minutes or less, with NO design software!  This is how I did it:

1. I started with the Blogger’s Pink Watermark Theme.

Blogger Watermark Template (Pink)

2. I installed Shabby Blog’s Mod Men {W}.  Use the instructions from her website (When you click on “Get the Code”).

This is what it should look like now….

3. To fix this, you need to go to your Template Designer and your Background page, and click on “Remove image“.

Then click on your Advanced page and “Backgrounds“.  Then Change the color of the Background and the Footer to Transparent.

4. Next I got rid of the drop shadow on the top and bottom of the Navigation Bar, and as well as behind the Post Section, by copying and pasting the following code in the “Add CSS” page of the “Advanced” tab: (seen below)

.tabs-inner .PageList, .tabs-inner .Labels {
box-shadow: 0 0 0px rgba(0, 0, 0, 0);
}
.post-outer {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

5. Next, I customized the Tabs Background, Tabs Text, Links, Date Header, Post and Gadgets.  All located on your Advanced page.  There, I change colors, fonts, and font sizes.

6. Next, I downloaded this free Header image from the Background Fairy.

7. Then go to pixlr.com and Open the file, and use the Type Tool on the left to add your text.

8.  Finally upload your header, and center it if needed.  Here is a tutorial that shows you how to center your blog.  This was the code I added to center mine:  (I also added a margin to the top and bottom just to give it some nice white space)

.header-outer {
margin-left:100px;
margin-bottom: 40px;
margin-top: 40px;
}

There you have it!!  Super Cute!

30 Minute Makeover: Easy Free Blog Design

I have been working on a couple boards on my Pinterest, with my Favorite Free Backgrounds and Free Headers, Check it out HERE :)

Filed Under: 2 Column Template, 3 Column Template, Blog Design Ideas, Blog Tips, Creative, Custom Blog Design, Custom Blog Design Tutorial, Design Tips, DIY, Easy, Easy Tutorials, Fonts, Free Blog Background, Headers, Menu Bar, Nav Bar, New Blogger Template Tutorials, No Software, pixlr, Shabby, Templates, Tutorials
« Older Posts

To the Top