DIY Your Blog Design

Welcome!

This page is updated frequently with tips & tricks. Please consider subscribing to the blog to get FREE tips like these delivered as soon as they are posted. It’s free!

………………………………………………………………………………

Let’s start with the biggest part of blog design:

The Header.

I’m going to assume you know that a header is just an image you create. You can use all sorts of fun fonts, colors & graphics to give your header a unique and unforgettable look.

Ready to get started?

Today we are going to talk about being legal & fair use images and all of that boring but necessary stuff! Later I’ll delve into how to create the header without spending money on a graphics program!

First look at your blog:

  • do you sell anything?
  • Do you have advertisers?
  • Google Ads?
  • Do you receive free products to review?
  • Are there any links that go to another site that makes you money?

If you answered yes to any of those questions than any graphics/photos you are going to use (and in some cases fonts) need to be for commercial use. This makes it more expensive and harder to find the right images but it is far better to be on the up & up legally than do something illegal that could at best get your site taken down and at worst get you in legal hot water. (This article is referring to you making your own header. If you are making one for someone else & charging them-a blog designer-then you have very different/more complicated legalities for graphics & fonts that I won’t get into here)

The largest and most well known site to purchase commercial use graphics is iStockphotos. In most cases you can purchase the smallest size of a graphic because it will still be bigger than your finished header. You need a graphic to always be bigger than you need because if you try to make something larger than it originally is it will lose quality and become fuzzy-not a great look.

If you are looking for something a little cheaper (and can find it) try My Grafico- this site requires you to look at the specific designers TOU (Terms of Use) to comply legally. Some of these (and on other sites) TOU say that you can not (even if you don’t make money off your blog) use it on a web site/blog/online. Please make sure you read them carefully-you may have to credit the author with a link on your blog somewhere or anywhere the graphic is displayed (think business cards also).

The great thing about My Grafico is that if you don’t make money on your blog & the TOU say you can use it online sometimes the graphics are only $5! Sometimes even if you have to purchase the commercial use option it’s still only $15!

Another excellent site is us.fotolia.com

Ok so you found a graphic you loved, purchased the right license and are now thinking about fonts.

free fonts (search by title at dafont)

DaFont.com is a great place to start for free fonts. Make sure you check the TOU ;) I could list more and more font websites but really almost all the free fonts I’ve found other places end up there anyway! DaFont is great but you need to make sure that the font files you are downloading are in the public domain or are for commercial use. Some require you to donate to the creator in order to use them in a design. You must purchase/donate for each site you plan to use them on.

Below is a video to show how to put together a header using gimp (a free downloadable software with much of the same capabilities of photoshop).

I made a quick video to show you how to use a free image manipulation software to create your header.

 

 

I used the free downloadable image manipulation software Gimp to create this header.

Storefront image is from the Boutique Storefront kit from Babystar Designs on MyGrafico.com

Fonts used: RNS Camelia & Riddle

Colors: Black ( #000000) & pink (#f42467)

 
Creative Kristi  is not legal counsel or the ‘expert’ on all the legalities of graphic and font usage. Please read each and every Terms Of Use you come across for fonts or graphics/photos you plan to use. When in doubt consider it for personal use only. Creative Kristi can not be held liable or responsible for any damages/lawsuits that arise from failure to properly use/credit font makers/graphic designers/photographers.

………………………………………………………………………………

How to create a blog button with a grab code:

Upload your image you created (using the same techniques as making a header) to photobucket and replace the RED parts of the following code with your url & your image url. Then copy & paste the code into a sidebar text widget. MAKE SURE THE ” are straight and not the curvy kind. Copy & paste makes them go curvy sometimes!

<a href=”http://www.YOURBLOGURL.com” target=”_blank”><img src=”http://www.YOURIMAGEURL.com/blog-button.png” border=”0″ alt=”NAME OF BLOG (SPACES ARE OK HERE)“></a>
<textarea name=”1″ cols=”15″ rows=”3″>
<a href=”http://www.YOURBLOGURL.com” target=”_blank”><img src=”http://www.YOURIMAGEURL.com/blog-button.png” border=”0″ alt=”NAME OF BLOG (SPACES ARE OK HERE)“></a>
</textarea>

Add this code to a sidebar widget & you are all set!

………………………………………………………………………………

Break-down of some basic HTML:

<a href=”http://www.creativekristi.com”>Creative Kristi</a>

That means the words Creative Kristi will be linked to my blog url.

<img src=”http://www.photobucket.com/creativekristi/button.png”>

That means I’m displaying the image found at the url.
Put them together and you get a linked image:

<a href=”http://www.creativekristi.com”><img src=”http://www.photobucket.com/creativekristi/button.png”></a>

Need more HTML Help? Download the free HTML Cheat Sheet for bloggers!

Add a watermark to your photos:

(this video was made for a previous client, Brooke, and I designed her watermark for her but the same concept applies)

………………………………………………………………………………

Adding Custom Web-Safe Fonts to Post Titles:

Want to know how to add custom fonts to your wordpress site using either Genesis or Headway theme? Watch this video:

[quicktime]http://creativekristi.com/wp-content/images/How-To-Add-Fonts-In-Wordpress.mov[/quicktime]

Steps for adding a font to Headway theme on WordPress:

1. Visit google.com/webfonts and choose a font you like.

2. Click on “quick-use” on the font you like.

3. Copy the code that is in the “standard” tab on step 3 of the font page.

4. Visit your blog’s dashboard and click on Headway–>Configuration–>Scripts & Analytics.

5. Paste the code at the top of the “Header Scripts” section & save.

6. Go back to Google Webfonts and copy everything after “font-family” in step number 4 on the font page.

7. Back on your wordpress dashboard click on Appearance–>Custom Functions. Use this code (replacing the red parts with your font specifics):

headway_register_custom_font(‘FONT NAME‘, ‘FONT NAME, cursive’);

If your font has something other than ‘cursive’ in step four on Google webfonts then replace the word cursive with whatever that font has. Click save. It should now appear as a font-option in Headway Visual Editor.

Steps for adding a font to Genesis theme on WordPress:

1. Visit Google.com/Webfonts

2. Click on “quick-use” on the font you’d like to use.

3. Under step 3 on the font page click on the “Import” tab and copy the code that is there.

4. Go to your wordpress dashboard and click on Appearance–>Editor. Make sure you are on the style.css section & paste the code at the very top. Click Save.

5. Go back to the font page on Google WebFonts and copy the code in step 4.

6. Back in your style.css section of your blog find the portion you want to change the font for (Post title, widget, etc) in the code and paste the font-family code there. Save.

Blogger & WordPress.com have web safe fonts built in-on blogger it is free on wordpress.com you must upgrade with the $30 per year custom design upgrade.

………………………………………………………………………………

How to create cute rollover images for your blog:

Use these as ‘before & afters’ for a project you did (type the code in your html of your actual post) or as a navigation bar (like I have up there ^) Keep in mind that if someone views your site from a mobile phone or iPad they won’t be able to see the pop-up so either post the ‘before’ and ‘after’ photos separately also in your post or let them know it is a rollover image and to view it on a computer to see it.

You need to create two images. One that is viewed when the person comes to your site/post and the other they can see when their mouse ‘rolls over’ the image. I use Photoshop Elements but you can use Gimp very easily (for free too!) to create images.

Here is the code (change the RED parts only):

<img onmouseover=”this.src=’http://www.URL OF WHERE YOU UPLOADED YOUR FIRST IMAGE.jpg’” onmouseout=”this.src=’http://www.URL OF WHERE YOU UPLOADED THE SECOND IMAGE.jpg’” src=”http://www.URL OF WHERE YOU UPLOADED YOUR FIRST IMAGE.jpg” alt=”” />

Notice you have to put the first image url in twice. Also watch all those ‘ and ” in there. They all have to be there and be the straight up and down kind (not the curvy apostrophe kind)

Let me know how it works for you :)

………………………………………………………………………………

Other Sites To Help You Out:

  • Use FireFox as your web browser & FireBug as the plugin so you can edit CSS on the screen.
  • W3schools.com teaches CSS in a basic way
  • For color codes: http://www.computerhope.com/htmcolor.htm
  • If you need a favicon upload a 18px by 18px .png file to favicon.cc and download the .ico file you need :) (If you use Genesis get the Genesis Favicon plugin and then upload the favicon.ico file you got from favicon.cc and it will place it in the right spot for you. Just make sure the file name is favicon.ico)
  • Play around and have FUN!

Click here for the slideshow from the conference with my presenter’s notes attached as well. (Please send people to this page and don’t share just the pdf file link! Thank you!)

If you like what you just read please Subscribe so you don’t miss a thing!

Follow me on Twitter & Facebook for updates in between blog posts & also sneak peaks!!