Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow (sample)

33,210 views

Published on

Take Your Blog from Ugly to Lovely!
Tired of having blog shame?
No time, money or skills for a full redesign?
Want some quick fixes you can do today to fix up your blog?
This is the Guide + Checklist That Will Help You Love Your Blog Again!

No Idea Where to Start or What to Do Next?
Do you stare at your blog knowing something's wrong, but can't quite put a finger on what it is?
Do you worry that the first impression your blog is giving is turning people away?
Do you want to fix up your blog's appearance but don't have the time or money?
YES?
Then you need my new checklist and fixes guide so you can feel better about how you present yourself and your business to the world!

Learn more here: http://designyourownblog.com/blog-beautiful-ebook

Published in: Design
  • Be the first to comment

Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow (sample)

  1. 1. WelcomeLovely! 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. Areyou readytomake thatblogof yoursglow?
  2. 2. © 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 WhoisMarianneManthey? 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.
  3. 3. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 4 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
  4. 4. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 5 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
  5. 5. Chapter1Your Goals Key Tips 1. Be Clear on Who, Why and What 2. Consistency + Focus 3. Is Your Navigation Intuitive? 4. Your Opt-In!
  6. 6. 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.
  7. 7. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 8 Why Why 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?
  8. 8. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 9 WHAT What 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 It Fill 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!
  9. 9. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 10 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
  10. 10. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 11 WHY Why do you write what you write? Why? Why? Why? Why? Why?
  11. 11. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 12 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?
  12. 12. Chapter2Design 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? © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 13
  13. 13. 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. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 14
  14. 14. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 15 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. “Guideyourreaders througheachpageby helpingthem understandyourgoal forthatpage.”
  15. 15. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 16 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.
  16. 16. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 17 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?
  17. 17. Chapter4Your 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 © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 18
  18. 18. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 19 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’tmakeme think!Iwantto knowwhereone widgetendsandthe nextonebegins.
  19. 19. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 20 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.
  20. 20. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 21 2. Use a single border (solid, dotted or dashed) or divider image between each widget. Search for “borders” on Creative Market:
  21. 21. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 22 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.
  22. 22. Chapter5Your 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 © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 23
  23. 23. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 24 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. 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.
  24. 24. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 25 • 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 chups gummi 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.
  25. 25. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 26 • 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 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 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.
  26. 26. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 27 • 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. “
  27. 27. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 28 • 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 makeyour 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.
  28. 28. Chapter8Images 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 © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 29
  29. 29. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 30 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?
  30. 30. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 31 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.
  31. 31. © Copyright 2014 - DesignYourOwnBlog.com - All Rights Reserved. 32 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:

×