Con---->Template<------ion!

Tuesday, April 20, 2010

We're going a little off the beaten path today.  But before we do, I need to help get the word out about an upcoming blogfest that promises to be a blast.  Roni Griffen over at Fiction Groupie is hosting a Let's Talk Blogfest set to go up May 18th.  Go sign up here.  Woo hoo!  I think it'll be fun, and I'm planning to participate.

Now, back to the business at hand.  Recently, Donna Hole (who publishes some wonderful stuff over at her place) asked that I cover lessons learned during my recent custom template designing adventure, and I suspect there are others out there who might benefit from a few pointers also.

If this is not your thing, here are a couple of my favorite older posts you might enjoy: "KA-POW! Understanding Conflict In Your Fiction" and "Life In Six Words or Less".

Now, let's be clear: today we'll discuss tips on how to build a custom template; in other words we'll cover how to take an existing template and add features--bells and whistles and other goodies--to make it unique and your very own.  At the end, you'll be able to turn something like this (the original template I began with):


....into the blog you are currently reading.  It isn't all that harrd, once you get the hang of it (If choosing one of the pre-set blogger templates is beyond your skill level, hit me up in the comments and I'll point you in the right direction).


STEP 1--Setup Test Blogger Account.  If you are planning to do more than change the picture at the top or a few colors, I'd recommend setting up a test Blogger account.  Simply log in and create another blog.  Then you can do all your testing and try out different ideas and your readers won't throw things at you because the header keeps showing up in the middle of your posts.

Be aware that if you use the same email address as your current blog to set up your account, this test blog will be visible to your readership (when they click your profile).  There are ways to make it invisible, but it's complicated, and I found it easier to set up a second account under a different email address so I didn't get them confused.  Again, if the changes you want to make to your template are minor, you can skip this step.

STEP 2--Find and upload a new template.  There are dozens of blogs and websites out there that have free templates, so it's simply a matter of shopping around until you find one you like.  Google "blogger templates free" and you'll have plenty to choose from.

Another strategy--the one I used--is to look around at the blogs you read until you find one that has a template you like.  If you like a particular template, chances are you'll like others from the same designer.  Most templates, like the one I initially used, give credit to the designer at the bottom of the template (at the bottom of this one you can see I used TNB), so you can Google the designer or click the link and go to their website. 

Once you find the template you like, download it to you desktop.  It will probably come in a ZIP file, and you'll have to unZIP it (let me know if you need help doing this).

Next, upload the template to your test blog.  NOTE: if you are using your original blogger site or you want to keep any content from you test site, be sure to download your full template prior to uploading the new one.  This way the old template is saved prior to making any changes.  You can do both of those things by going here:




When you upload the new template, Blogger may ask you if you want to keep your old widgets.  Generally, you'll want to click yes.

STEP 3: Tweak the template.  Here's where you make your money.  Most of these tweaks involve going into your html file and making changes.  In case you'd like to know more about html, here's a quick post written by Eric Trant covering the basics.  Eric must have read my mind by putting up this post recently.  Thanks Eric!

Html is relatively simple to understand and manipulate.  To accomplish certain changes, it really amounts to locating that section of code on a tutorial website and posting it into the right section of your html template.

Don't get discouraged by the amount of code.  The best advice is to click into the html pane and typing "ctrl + f" which brings up the find function.  Type in the word you want and it will take you directly to the spot in question.  Saves you from looking through line after line of code.

There are literally hundreds of tutorials out there, but the best I found were on this site: Blog Bulk.  These posts'll teach you how to add an icon to your post titles (like my little old fashioned microphone above), add a signature, customize block quotes, change the width or your blog--basically, the sky is the limit, and you can take it as far as you want.

Another trick is to design custom pictures and headers yourself.  In my case, I wanted my header picture and title words (the "Where Sky Meets Ground" block at the top) to be written in Coca Cola font, a font not supported by most browsers.  To get around this shortcoming,  I designed a custom picture in Powerpoint (any basic graphics editing program will do) and put the entire picture in as my header photo.  You can do that here:


Click the Edit link on the Header gadget, then upload your custom photo.  By clicking the radio button that says "instead of the title and description", Blogger will use your custom pic instead of the regular script.  Tweak size and color to blend it with the template background.

When looking for accents and other things that make your blog look more professional, there are many resources available, including this really awesome icon site, Iconfinder, where I found the little microphone and the compass on my sidebar headers (also a custom image I created myself)--they really do have an amazing variety.  Adding these images can set your blog apart from the rest, and also can make the experience more fun for the reader.

STEP FOUR--Move Your Template.  Once you've done all the tweaking you want on your test template, it's time to move it over.  Simply do the steps in reverse: 1) save the template on your current Blogger account to your desktop (so you have it as a backup in case you have a problem) 2) save your test template to your desktop 3) Open your actual Blogger account (not your test account) and 4) load up your new template.  If you're lucky, it will all go very smoothly--and you'll have a big beautiful new template for us to all wow over.

A few last notes.  A mistake I made was not checking out the flow and functionality of my new template completely, such as adding comments on the test blog and seeing how that worked, or clicking through posts and/or understanding how the sidebar behaves with longer content. 

I'd recommend trying all this out before you move the new template over.  A few unexpected fixes resulted in some late-night last-minute gymnastics--so take the time to check it out on the test blog first.

And don't be afraid to experiment!  If you save your template as you go, you can always reload it if you mess something up and don't know how to fix it.

That's about it.  Hit me up if you have questions, and as always, stay groovy and thanks for stopping by.

10 bolts from the blue:

SM Schmidt said...

Glad to see there are folks out there willing to get dirty with their code & remain unafraid!

Talli Roland said...

Great tips! Thanks for the tutorial.

Eric W. Trant said...

Excellent post! I'll link over from my blog, too, referencing this post.

I've poked around with customizing, but for now I'm happy with one of the stock-blogs.

- Eric

Voidwalker said...

I am still using my neophyte HTML skills from high school tech class to customize my blog. Some of that stuff just stays with me no matter how much else I try to replace it with lol.

-say no to frontpage ;P j/k

Niki said...

I got rid of the bright orange striped advertising along the top of my template by removing it in the code. Nice to do those little personal touches :o)

SonshineMusic i.e. Rebecca T. said...

I just bookmarked this post. Right now I'm happy with mine, but I can already tell I'm going to want to do some tweaking. Now I have everything all in one place to help me through it! Thanks!

Donna Hole said...

I wish I had a web cam now so you could see me doing a happy dance! Hmm, all that jiggly might give you the wrong impression. .

But this was awesome. And helpful. And I think I could follow the directions myself and not have to torture any of my sons into assistance - although I'm thinking they will find this very interesting.

You and Eric will both be on my next "flybys" post again. I have vacation in a month or so and I'll tinker with this then.

Thanks so much.

..........dhole

Star Child said...

Hi.

The last month or so I have customised my own blog, and it has been tricky in places. A steep learning curve!

This post could have been helpful a month ago, lol. I am sure it well help a lot of folks out. Thanks x

Jon Paul said...

Schmidty--Dirty, yes, but unafraid? I'm not so sure.

Talli, Eric--Thanks!

Voidwalker--I'm not a fan of frontpage either.

Niki--I agree.

Rebecca--Great! My original template lasted about four months, so that may provide you some guide.

Donna--AWESOME! You are very welcome. Isn't sharing our knowledge what it's all about?

Star Child--It is pretty steep at first, but conquerable IMHO.

Thank you, all you fine folks, for stopping by and taking the time to comment.

Postman said...

Thanks for sticking this up here, pal. I've been leaning toward a revamp lately (I hear my page takes a long time to load for the poor peasants out there without high-speed wireless). This should help immeasurably. And may I say, I'm diggin' your new digs. Great header, in particular.

Waddaya wanna say?

Note: Only a member of this blog may post a comment.

Related Posts with Thumbnails
 

©2010 by Jon Paul | by San Antonio Web Design