August 9, 2012

You need blogging tips?

A few people have asked me for blogging design tips -- such a compliment! -- so I've finally decided to share my knowledge here. Why waste such brilliance, eh?

Okay, brilliance is a big word, but this is how I do it...

How did you learn to customize your blog?

Google. Google knows everything. And other bloggers often post tips and tricks, which I study closely.

Where did you get your template/background?

I use Blogger templates -- currently using the Watermark template -- and then customize using Blogger's step-by-step Designer. For my current template, I deleted the background image and changed the background color. I know Blogger doesn't provide endless options, but it's good enough for me.

Your header is lovely. How did you do that?

Well, thank you. Here are the steps I take for creating a header:
  1. I start by designing a header in Microsoft Publisher. I use an 8-1/2 x 14 page in landscape view to make sure my header will be wide enough. You can also use Adobe Photoshop, if you have it. (I can't afford Adobe yet, so I use Publisher.)
    • Tip: If you use a photograph for your header, make sure it is originally large enough that it won't appear pixelated or blurry.
  2. When you're finished designing, save your header as a JPG file for square or rectangular designs or PNG for oddly shaped designs without sharp corners.
    • Note: If your header is oddly shaped, you will want the background to be transparent so your blog background will tightly surround the shape. You cannot save a transparent background in JPG format -- PNG is a good option for transparent backgrounds.
    • Note: You cannot make the background transparent in Publisher. You will have to use your online photo storage/editing account to do this, which is described in the next step.
  3. Open your Photobucket account online and upload your finished image/graphic. You can also use Flickr or other similar photo storage sites.
  4. In Photobucket, click ADJUSTMENT and then RESIZE. Make the necessary adjustments -- this is also your last chance to make the background transparent -- and SAVE.
    • Note: To know how many pixels wide your header should be, go to your Blogger Layout page and click EDIT on the header. If you already have an image on your header, remove it to see the suggested image width for your template.
  5. Now you can view a thumbnail of your graphic in your Photobucket Album and, while doing this, scroll the mouse over the thumbnail to see a dropdown menu. Copy the DIRECT LINK code from the menu and paste it in in the "From the Web" box in your Blogger Layout Header and SAVE.
  6. To make sure your header is always centered on the page, go to your Blogger Template Designer, click ADVANCED, and scroll down to ADD CSS. Then add this code and SAVE:

    .Header {text-align: center;}
 And the button on your sidebar?
  1. Create, edit, and save your button the same way you did for your header.
    • Tip: Try to create your button approximately the size that you'll want it to appear on your blog. If you make it too large oringally and then resize it much smaller, it can become blurry.
  2. When you're ready to resize it in Photobucket, remember that the average blog button is between 150-200 pixels wide. Some are smaller or larger, but most are within that range.
  3. Now open Blogger Layout and click ADD A GADGET and then choose HTML/JAVA SCRIPT. In the HTML box, paste this code, change the highlighted lines as necessary and SAVE:

    <center><a border="0" href="put your blog URL here" target="_blank"><img src="put your image direct link here></center>
  4. To create the code box below your button, ADD A GADGET again and choose HTML/JAVA SCRIPT, then paste this code into the box, change the highlighted lines for your blog, and SAVE:

    <center><textarea rows="4" cols="20"><center><a border="0" href="put your blog URL here" target="_blank"><img src="put your direct link here></center>
    • Note: I found all of these codes by searching on Google. If you have any trouble with them, I suggest searching for other codes online.
And everything else?

My best advice is: Don't overcomplicate things. It's easier than it looks, but it is always time-consuming and sometimes frustrating. Just breathe. It is worth the effort.

Some of my favorite FREE STUFF websites when designing are:

What are some simple tips and tricks you've learned about blogging?

No comments:

Post a Comment

Thank you for stopping by and commenting here. You are appreciated.

Related Posts Plugin for WordPress, Blogger...