blog beautiful: 50 tips + fixes to make your blog glow (sample)

Welcome Lovely!First of all, thank you so much for downloading my book! I am so happy you’ve chosen me to guide you in beautifying your blog.

Here’s a few things you should know before we get started.

#1 THE STEPS ARE LOOSELY IN ORDER which means you can follow each step from 1 to 50 or you can skip around if you’d like. This is where the checklist comes in handy!

#2 ALL TUTORIALS ARE SPECIFICALLY WRITTEN FOR BLOGS ON BOTH BLOGGER AND SELF-HOSTED WORDPRESS PLATFORMS, however you should be able to translate the instructions to your own platform should you be using something else.

#3 SOME OF THE TIPS INVOLVE EDITING YOUR CSS (cascading style sheet). You can learn how to do that very easily here.

Are you ready to make

that blog of yours glow?

http://designyourownblog.com/edit-css

© Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved.3

#4 ALL EXAMPLE + STOCK IMAGES ARE LINKED TO

THEIR SOURCE. Just click on them.

#5 PLEASE PLEASE PLEASE BACKUP YOUR BLOG

BEFORE MAKING CHANGES!

I can’t wait to see your beautiful blog after you’ve

gone through the checklist! In fact, I’d love it if you

shared your progress with me! Here’s how you can

do that:

Send me a tweet that says something like this:

I just finished fix #1 from #BlogBeautiful! Come check

out my progress: http://your-blog-url-here.com

@marianney!

Or if you’re not on Twitter, leave me a similar

message on the Facebook page.

ABOUT THE AUTHOR

Who is Marianne Manthey?

I have a degree in multimedia and web design from the

University of Colorado at Denver and I've worked with

companies large and small for over 12 years on both

their brand design and online presence. I'm a design

geek, color palette aficionado and feminine-design

obsessive.

I now help women entrepreneurs on start-up budgets to

beautify their own blogs DIY-style on

DesignYourOwnBlog.com.

http://xomisse.com/blog/tutorial-backup-your-entire-blog-on-wordpress-or-blogger/

http://your-blog-url-here.com/

https://www.facebook.com/DesignYourOwnLovelyBlog

http://designyourownblog.com/


The #BlogBeautiful Checklist

YOUR GOALS

01 Be Clear on Who, Why and What

02 Consistency + Focus

03 Is Your Navigation Intuitive?

04 Your Opt-in!

OVERALL LOOK + FEEL

05 Use Visual Hierarchy + Contrast

06 Less is More

07 Use the Grid

08 Selecting the Right Colors

09 Pairing Fonts

10 Is Your Background Obnoxious?

11 Is Your Pages Too Wide?

HEADER

12 How’s Your Header?

13 A Memorable Tagline

SIDEBAR

14 Sidebar Left or Right?

15 Clean Up That Sidebar

16 The All-Important Sidebar Profile/About Me

17 Visually Separate Widgets + Gadgets

18 Showcase Your Highlights

19 Avoid Too Narrow Sidebars

POSTS

20 Show Post Excerpts on Blog Page?

21 Headlines that Capture Attention

22 Use Introductory Text

23 Make Your Blog Posts Scannable

24 Add Tweetable Quotes

25 Make Blog Posts Easy to Read

26 Make Your Links Easily Recognizable

27 Use Thinner Fonts for Your Body Copy

28 Preview Your Posts Before Publishing


The #BlogBeautiful Checklist

POST FOOTER

29 Include a Cute Post Signature

30 Ask Readers to Share Your Content

31 Add a Newsletter Sign Up

32 Show Related Content

COMMENTS

33 Encourage Comments by Making it Easy

34 Do Not Auto-Moderate Your Comments

35 Ask for Comments and Then REPLY to Comments!

IMAGES

36 Do Use Images

37 Take the Time to Search for Beautiful Stock Photos

38 Don't Limit Your Images to Just Photos

39 Make Your Images Pinnable and Easy to Pin

40 Size Post Photos Consistently

41 Use Image Captions

DETAILS

42 Create a Favicon

43 Try Thin Borders

44 Get Rid of Things That Scream Amateur

45 Ditch the Slider/Carousel

46 Include Social Media Icons

47 Include a Search Bar

OTHER

48 Don't Forget About Your Footer

49 Nurture Your About Page

50 Make Sure Your Blog is Mobile-Friendly

Chapter 1Your Goals

Key Tips

1. Be Clear on Who, Why and What

2. Consistency + Focus

3. Is Your Navigation Intuitive?

4. Your Opt-In!

7

01 // Be Clear on Who, Why and What

WHO

Who is your blog for? Who do you write for? Who is your target audience?

Hint: the wrong answer is "everyone." ;) No blog can serve everyone, and without a clear answer to these questions, your blog will most likely never go very far.

Are you writing for women or men? Adults or teens?

Parents or non-parents? Moms who work or moms who stay at home?

Here is what I wrote as an example:

I write for moms who blog and want to take their blogs to the next level by creating an income for their families while having the luxury of staying at home.

Now of course I have lots of readers who fall outside of that niche, but that's ok. It's actually more than ok, but when I write, that's who I picture in my mind and who I tailor my language to.

Before we do anything to your blog, it's important that you first identify your who, what and why.

© Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved.

http://www.shutterstock.com/pic.mhtml?id=107657180


WhyWhy do you write what you write?

Is it to solve a problem? To help someone? To make someone laugh?

Get clear on why you make the effort to blog.

After you've answered this question, ask yourself why again.

Then ask again and again until you've distilled it down to the core reason of why you blog.

Here are my answers:

Why do you blog? To help women beautify their blogs.

Why? Because I know some women are embarrassed by their blogs.

Why? Because they want to make a good impression.

Why? Because they want to show that they are smart and capable of creating a business from their blogs.

See how that works?

http://www.istockphoto.com/photo/beautiful-lady-3964398


WHATWhat is your blog about? What kind of problem(s) are you

solving for your readers? What makes you different or better

than others who are offering the same thing?

You may have heard before that you shouldn’t blog for other

people, you should blog for yourself.

You know, that’s all well and good if you’re just blogging for

your own pleasure. But if you want your blog to excel, it’s

important that your blog solve a real problem that your

readers have.

Think about what you can do to help them in a way that’s

different or better than anyone else.

Fix ItFill in the worksheet on the next 3

pages. You may also wish to

download this fabulous work sheet

on knowing who you are and what

you stand for by Julie Harris Designs.

It’s beautiful too!

http://www.istockphoto.com/photo/supergirl-11678217

http://www.julieharrisdesign.com/who-are-you


Worksheet

WHO

Who is your blog for? Who do you write for?

Who is your target audience? Brainstorm

here:

Fill in the blanks:

I write for

who


WHY

Why do you write what you write?

Why?

Why?

Why?

Why?

Why?


What

What is your blog about?

What kind(s) of problems are you solving for your readers?

What makes you better or different than others offering similar solutions?

Chapter 2Design 101:Overall Look + feel

Key Tips

5. Use Visual Hierarchy + Contrast

6. Less Is More

7. Use the Grid

8. Selecting the Right Colors

9. Pairing Fonts

10. Is Your Background Obnoxious?

11. Is Your Page Too Wide?


05 // Use Visual Hierarchy + Contrast

In Tip 1 we asked ourselves:

What is it that you want people to do when they land on

your blog?

Do you want them to leave a comment? Subscribe to your

newsletter? Buy a product? Or maybe you just want them to

keep reading the article.

Whatever it is, make it clear what action you want your

visitors to take. Don’t confuse them with too many

options. This goes with everything on your blog.

Too many options confuses people.

People are lazy by nature. They actually like being told

what to do first. Make it easy for them!

Make it easy for readers to distinguish elements on the page by creating visual hierarchy.


http://52weeksofux.com/post/443828775/visual-hierarchy


Guide your readers through each page by helping them

clearly understand what your goal is for that page.

Is your goal to get them to subscribe?

Great! Then make sure your opt-in forms stand out.

Is it to get them to keep reading?

Then be sure your subheadings stand out and invite them

to keep reading down the page.

Is it to buy a product?

Then there should be some calls-to-action spread around

the page with sidebar ads and mentions of the product

with a link to its landing page.

“Guide your readers

through each page by

helping them

understand your goal

for that page.”


Establish what’s important by making the most

important element stand out.

This element should be brighter, bolder or bigger than

anything else on the page.

After people see this element, their eyes will move

around to look for the next thing to rest their eyes on.

Make it obvious for them by making the next important

element slightly smaller or less bold.

Don't forget about the other end of the spectrum.

Less important items, like disclaimers, copyrights, etc.

should be the smallest items on the page.

Everything else should fall in between.

http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/


Fix it:Creating visual hierarchy can best be done through contrast: Contrast in size, color, light

vs. dark, etc. Create contrast with CSS too.

Another way to create hierarchy is to give breathing room to elements you want to stand

out. Surrounding a bright button with a lot of white space makes it stand out quite clearly:

See What I Mean?

http://katelynbrooke.com/2014/11/20/5-css-tricks-for-creating-hierarchy/

Chapter 4Your Sidebar

Key Tips

14 Sidebar Left or Right?

15 Clean Up That Sidebar

16 The All-Important Sidebar Profile/About Me

17 Visually Separate Widgets + Gadgets

18 Showcase Your Highlights

19 Avoid Sidebar Horizontal Scroll Bars



17 // Visually Separate Widgets + Gadgets

Another newbie mistake make is to not use sidebar headings at all or

to have sidebar headings that don’t stand out.

I want to know where your bio ends and your where favorite books

begin. Where your category links end and where your blog roll begins.

Take a step back and look at your sidebar objectively. Is there clear

delineation between elements? Is it obvious what each item is and

what it’s there for? Will a brand new visitor to your blog know what

each item is there to do?

Fix It:

There are several ways you can visually separate your sidebar

widgets:

If you’re jamming as many widgets/gadgets into your sidebar without clear visual separation,

people will miss most of what you have in there.

Don’t make me think! I want to

know where one widget ends and the

next one begins.


1. Use clear headings above widgets

to identify them. Remember,

people don’t want to have to think.

Make things painfully obvious for

them!

The headings should be designed

so that they stand out from the

content below it. Use larger fonts

or your accent font. Try a different

color. Use a ribbon or banner

background. Experiment!

Look here for some

downloadable images.

https://www.pinterest.com/marianney/blog-design-elements-+freebies/

http://dontmesswithmama.com/

http://www.lacarmella.co.uk/

https://www.pinterest.com/pin/41869471511052292/

http://www.hellomondayblog.com/

http://katelynbrooke.com/blog/


2. Use a single border (solid,

dotted or dashed) or divider

image between each widget.

Search for “borders” on Creative Market:

https://creativemarket.com/?u=marianney

http://blog.mrslilien.com/

http://crtv.mk/dqs8

http://crtv.mk/fref

http://www.livinginyellow.com/

http://courtneybowlden.com/blog/

http://annamariemoore.com/blog/


3. Use borders and/or backgrounds.

4. Don’t forget about white space.

Try not to crowd your widgets

together. Leave a little breathing

room between each one.

http://intentionalhospitality.com/blog/

http://www.hollymariedesigns.com/blog/

http://www.pinegateroad.com/

http://xomisse.com/blog

Chapter 5Your Posts

Key Tips

20 Show Post Excerpts on Blog Page

21 Headlines that Capture Attention

22 Use Introductory Text

23 Make Your Blog Posts Scannable

24 Add Tweetable Quotes

25 Make Blog Posts Easy to Read

26 Make Your Links Easily Recognizable

27 Use Thinner Fonts for Your Body Copy

28 Preview Your Posts Before Publishing



23 // Make Your Blog Posts Scannable

Fix it:• Add plenty of spacing between your paragraphs.

There should be a margin of at least one row of text below each paragraph.

Looking at a blog post with nothing but giant blocks of text can look intimidating or feel

tedious to read. That's why it's important to make your posts scannable.

Jelly beans toffee ice cream. Donut gingerbread donut

I love chupa chups gummi bears.

Chocolate bar lemon drops marzipan. Carrot cake

brownie tart applicake oat cake muffin. Carrot cake

candy canes muffin icing cake I love oat cake.

I love jelly beans macaroon. Gummi bears jelly-o candy

canes sweet roll bear claw. Jelly beans toffee ice cream.

Donut gingerbread donut I love chupa chups gummi

bears.

Jelly beans toffee ice cream. Donut gingerbread donut

I love chupa chups gummi bears.

Chocolate bar lemon drops marzipan. Carrot cake

brownie tart applicake oat cake muffin. Carrot cake

candy canes muffin icing cake I love oat cake.


canes sweet roll bear claw. Jelly beans toffee ice cream.

Donut gingerbread donut I love chupa chups gummi

bears.


• Your line heights should be about 1.5.

That means each line of text gets a row equal to 1 and a half the size of the font.

p {line-height: 1.5;font-size: 16px;margin-bottom: 16px;

}

I love jelly beans macaroon. Gummi bears jelly-o candy canes sweet roll bear claw. Jelly beans toffee ice cream. Donut gingerbread donut I love chupa chupsgummi bears.

I love jelly beans macaroon. Gummi bears jelly-o

candy canes sweet roll bear claw. Jelly beans toffee ice

cream. Donut gingerbread donut I love chupa chups

gummi bears.

Here’s an example style sheet for the last two points defining the <p> or paragraph tag.


• Use compelling subheadings to break the post into sections and draw the reader down your article.

• Make your paragraphs smaller. Cut them down to 2-4 sentences each.

Jelly beans toffee ice cream. Donut gingerbread donut I

love chupa chups gummi bears unerdwear.com dragée.

Tiramisu I love cupcake I love sugar plum unerdwear.com


canes sweet roll bear claw. Lollipop topping applicake

powder. Chocolate bar lemon drops marzipan. Carrot

cake brownie tart applicake oat cake muffin. Carrot cake

candy canes muffin icing cake I love oat cake wafer

applicake.

Cheesecake oat cake toffee jelly-o I love icing. Danish

gingerbread powder. Tart soufflé marshmallow I love

caramels chocolate bar ice cream oat cake. Carrot cake

pie gingerbread I love. Sweet jelly-o candy wafer

chocolate gingerbread candy halvah icing. Sweet

croissant danish dragée danish pie croissant sweet.

Jelly beans toffee ice cream. Donut gingerbread donut I

love chupa chups gummi bears unerdwear.com dragée.

Tiramisu I love cupcake I love sugar plum unerdwear.com

I love jelly beans macaroon.

Gummi bears jelly-o candy canes sweet roll bear claw.

Lollipop topping applicake powder. Chocolate bar lemon

drops marzipan.

Carrot cake brownie tart applicake oat cake. Carrot cake

candy canes muffin icing cake I love oat cake wafer

applicake. Cheesecake oat cake toffee jelly-o I love icing.

Danish gingerbread powder.

Tart soufflé marshmallow I love caramels chocolate bar ice

cream oat cake.

http://boostblogtraffic.com/subhead-blunders/


• Use bullets or numbered lists. Numbered lists in particular are very

powerful for drawing attention.

• Use bold and/or italics in most paragraphs to help skimmers catch the

important bits. DO NOT highlight text by making it a different color! People

automatically think these are links. Just keep the same color and make it

bold or italics. I try to highlight about one phrase per paragraph that is 2-3

sentences or more.

• Use block quotes or pull quotes. Semantics: Block quotes are quotes that

support the article, while pull quotes are lines pulled directly from the

article itself, but made to stand out. Magazine articles use pull quotes a lot.

Here is a showcase of cool looking block- and pull quotes.

Magazine articles use pull quotes a lot.

“

http://www.pinterest.com/marianney/blog-elements-block-quotes-+-pull-quotes/


• Use content boxes. A content box is a box used to visually offset text or

content within a section of text.* http://blogambitions.com/blockquotes-

content-boxes

* From How to make your blog content pop! on Blog Ambitions, where

you can learn more about content boxes and block quotes.

Here is a content block used to draw some

additional attention to the text.

http://blogambitions.com/blockquotes-content-boxes

http://blogambitions.com/blockquotes-content-boxes

Chapter 8Images

Key Tips

36 Do Use Images

37 Take the Time to Search for Beautiful Stock Photos

38 Don't Limit Your Images to Just Photos

39 Make Your Images Pinnable + Easy to Pin

40 Size Post Photos Consistently

41 Use Image Captions



41 // Use Image Captions

Yep! According to Drew Eric Whitman of Ca$hvertising, studies show

that up to twice as many people read captions as body copy.

If you think about it when you read an article on a blog or in a

magazine, don't you always read the image captions? It's like you just

can't NOT read them, right? So take advantage of these little things and

draw your readers' eyes down the page.

I just learned the concept of "deep captions" which is the use of 2-3

sentences in a caption. This apparently is long enough to intrigue

readers into reading more. Make sure that your captions contain

useful and intriguing descriptions.

Want to know a secret to getting people to read more of your content?

Add captions to your images.

Macarons are so pretty. You can’t help

but read this caption can you?

http://www.cashvertising.com/

http://www.shutterstock.com/pic.mhtml?id=67332373&src=id


FIX IT:

WordPress users:

Click on the image in Visual mode and click the

little pencil icon. There you will see the display

settings where you can enter in a Caption.

Blogger users:

Click an image in your post in edit mode. Then

click Add Caption underneath your photo.


Thank You For Reading This Preview!

Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow will be available for full download on December 30,

2014 for $29! You can pre-order it before the 30th for as low as $14 so hurry! Click below to learn more:

http://designyourownblog.com/blog-beautiful-ebook

blog beautiful: 50 tips + fixes to make your blog glow (sample)

Design

blog page

beautiful blog

blog posts scannable24

blog posts easy

design geek

web design

brand design

femininedesign obsessive