Fonts

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

April 19, 2011 3 Comments

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.

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!

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

Freebies for more than Blog Design!

April 11, 2011 1 Comment

I’m a big fan of freebies! In fact, I used freebies to create my very first blog design and I still use them often. Along with blog designs, I like to use freebies on print material for church and even for home. I used the Milk Vector from VectorStock.com paired with Denne Milk Tea from DaFont.com and Beautiful ES from FontStock.net to create a cute and handy shopping list that I can print out, fill out and take with me to the grocery store.

You will be surprised by what you can create, even things outside of blog design, using freebies!

Filed Under: Fonts, Freebies, Fun, Vector

Layout Tips

March 5, 2011 2 Comments

“What’s black and white and read all over?”
Back in the ‘olden days,’ I sold newspaper ads. The paper I worked for spent lots of money training their advertising executives to learn about the effectiveness of ads.

Where to place them, how to make them look, and what can make them successful.

If you think about it, a blog is a lot like a newspaper- and we can use these principles to help your blog achieve the one thing we really want most: Keep YOUR Readers Reading Longer.

If you are a blog statistic junkie like me, you watch the little minute counter that tells you the average time people spend on your blog. My constant goal is to get them between 5 and 10 minutes. But it takes a lot of work to keep them there. So how can your design keep audiences reading? Read through these 3 easy blog design tips to find out how:

If your type is white, something ain’t right
While I love the sleek look a black background has, after I return to white background my eyes are spinning. Look at the big names in web pages and hosting – Yahoo, AOL, and MSN. Notice anything? Unless you have set your personal preferences otherwise, they all have a WHITE background.

Color should be used to accentuate the positives of your blog, for instance links, ads, and pictures. Black is best for the font color of your main messages (aka- your blog posts) and a Times New Roman-ish or Helvetica font is the easiest for people to read. Your blog isn’t there to frustrate people. So make it as easy as pie for them to enjoy.

Keep it clean “above the fold”
Look at your blog as you first log on to view it, just as it appears on the screen. This first screen shot of your blog is what I consider (to go back to my old timey newspaper terms) ABOVE THE FOLD. Just as most newspapers are folded in half, that first screen shot, before you scroll down, is the first thing people will see. Is it cluttered? Is it hard for people to look at? Are the colors clashing? Unless your blog is committed to something like Pop Art, your blog should be pleasing to the eyes. Not just your eyes. Sure, you LOVE the clip art hodge podge that comes onto the screen. But does it tell your story? Does your audience immediately connect to you from the graphics? If not, perhaps it’s time for an upgrade.

The top left corner of your blog is the sweet spot
If you have contests, giveaways, or important news (lots of my friends do fundraising)- the top left corner (under your header, respectively) is the place that a reader’s eyes naturally fall first. You want to keep the top left corner changing. Give them a reason to look there. It is my constant habit to move things around on the sides once a week. I want my readers to pay attention, and if they see something they hadn’t noticed before, chances are they will take a moment and check it out.

This principle is especially important if you wish to monetize your blog. Advertisers want their ads to stand out, and placement is key. If they require particular placement (such as your top left corner sweet spot), be sure to charge a premium rate.

All of these things add up to:
Readers reading longer!

Take the time to review your blog and tweek it if necessary.
It will make all the difference!

written by Charlie Hester of the Pixelista Team

Filed Under: Blog Tips, Custom Blog Designers, DIY, Fonts, Guest, Layout, Sidebar

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 }