Wednesday, July 05, 2006

Works For Me Wednesday - Modifying A Blogger Template

Admittedly this is sort of a weird Works For Me Wednesday, because it all starts with the pattern on these pants:

See, I was cleaning out my closet yesterday, and when I saw these pants, I thought, "You know, that's sort of the look I've wanted to have on my blog."

Oh but you think I'm kidding.

Seriously, I've wanted to change the look for awhile, but I didn't have any inspiration. But when I saw the browns and the pinks and the greens, I knew I had found a starting point. And since Addie helped me so much the first time I tried to to swap out my banner, change my background, etc., I had a pretty good idea of what I needed to do...and it's really not as hard as you might think.

So, in the spirit of WFMW, here's how I changed my template just enough to make a big difference. Keep in mind that I'm talking specifically about Blogger, so if you use TypePad or WordPress or whatever, this explanation may not work for you.

First, I set up a new blog - a test blog - really simple if you're using something free like Blogger. This is a great place to save the info in your current template and start to work with it. The best thing is that I can tinker with the test blog to my heart's content and not one letter gets changed on my "real" blog. When I get the test blog like I want it, I copy and paste any code that has changed back over here.

Second, I made sure that I knew what I was after design-wise. Find your inspiration, whether it's in a photograph, a piece of clip art, or even a pair of pants. :-)

After I figured out what kind of look I wanted, I looked at some of the free or REALLY low-cost stock photography sites. I found my new pants-inspired background illustration on iStockPhoto, and I paid a WHOLE DOLLAR for it. Once I downloaded the file, I was able to start working with it (you can use Photoshop, Illustrator, etc.). You do have to have a little knowledge about how to do text boxes and that kind of thing - but you can easily find that out online. Or, if you're me, yell "DAVID!" and let your computer-savvy hubby help.

Next, I looked at my template code to see how many pixels my banner (the place with your blog name and tagline) needed to be. See where it says 692? That means my banner needs to be at least that many pixels wide. The height is pretty flexible. You can do all the editing - inserting type, playing around with fonts, tweaking the colors - after you have the correct size set up. And as for the background image - the stuff along the sides - I just make that about 300 pixels wider than my banner. It's a separate file from the banner, and I just sort of figured out how to make it work through trial and error.

The last step in the "design" process is to save everything as JPEG files, and I use PhotoBucket to host my images. Once you've uploaded to your photo host, the bulk of your work is done.

So on to to the template. The fun part. :-) And if you try this, remember: don't even THINK about messing with your template until you have made a back-up copy of your code. That's where all your links, sidebar stuff, and any modifications are, and you don't want to lose ANY of that. So select it all, copy, and paste it in a .txt file - then SAVE IT.

Once all the code was saved and sound, I just copied and pasted the URL of where my banner image is stored into my template (you'll see that info underneath your pics in Photobucket). That place in your template will look something like this, and all you have to change is the part between the quotation marks on the "img src" line.

Finally, I put the URL for my new background image in the place that looks like this, and again, all I had to change was what's in between the quotation marks on the "background" line. (And you don't have to change the background at all if you don't want to - I just happened to like a washed out version of my banner running down the sides.)

Here's the most important thing I've learned as a VERY amateur-ish template tinkerer: stick with the horse that brung ya. I'm still using my very first Blogger template - Son of Moto, I think it's called - all I've changed are two pieces of code (the banner and the background). But doing those things will give you a whole new look. Plus, I don't have to transfer all my link and sidebar info into another template. That works for me!

Now if all this talk of downloading and editing and template changing just exhausts you, try out one of the many free Blogger templates available. I found some adorable free ones at Zoot's Designs, and I came very close to using one of those...all the code is right there on her site (remember, if you set it up on a test blog first, you can copy and paste in your links from your real blog, then, when you're finished, copy and paste all your edited code back over to the place we normally visit).

Also, there are so many talented designers / bloggers who can create custom designs for a reasonable fee, like Jules, Susie, Karin and Becky, just to name a few.

And again, PLEASE remember: ALWAYS make a copy of the code you're currently using - NEVER start to manipulate the HTML in your current template without having a back-up.

I know this is an unusually long WFMW, but I figured I'd better write down this info while it's fresh on my mind - and hopefully it will help some of you, too. That ALWAYS works for me. :-)

Happy Blogging, everybody!

For more great WFMW ideas, visit Rocks In My Dryer.


Anonymous Anonymous said...

I didnt find thing that i need... :-(

11/24/2006 07:27:00 PM  
Anonymous Anonymous said...

Dark night, Doc!
[URL= ] alprazolam withdrawal [/URL]
[URL= ] drug addiction rehab treatment [/URL]
[URL= ] ca drug loc rehabilitation [/URL]
[URL= ] blog.usmchq cosite fioricet link online.html uk [/URL]
[URL= ] graduation gift for dental hygienist [/URL]
[URL= ] drug bust new jersey [/URL]
[URL= ] discount drug store [/URL]
[URL= ] drug online order [/URL]

You heard? celexa drug interaction lamisil cost medicine nuclear physics natural medicine knee pain

[LINK= ] drug abuse treatment center [/LINK]

12/01/2006 12:32:00 AM  
Anonymous Anonymous said...

[URL= ] soma restaurant [/URL]
[URL= ] blue cross coverage [/URL]
[URL= ] definition of drug abuse [/URL]
[URL= ] hormone testosterone therapy [/URL]
[URL= ] cialis information [/URL]
[URL= ] cialis com generic minuteviagra viagra [/URL]
[URL= ] dental implant california [/URL]
[URL= ] dental implant new jersey [/URL]

Is there room? health care coverage dental glencoe illinois implant prescription drug name hydrocodone free consultation

[LINK= ] ambien pharmacy [/LINK]

12/03/2006 02:11:00 AM  
Anonymous Anonymous said...

How little did you tell me of what passed at Pemberley and Lambton!
[URL= ] meth addiction [/URL]
[URL= ] celebrex heart attack orlando [/URL]
[URL= ] dental benefits [/URL]
[URL= ] boston university school of dental medicine [/URL]
[URL= ] natural ways to increase testosterone [/URL]
[URL= ] drug free hair loss treatment [/URL]
[URL= ] drug store in canada [/URL]
[URL= ] dental dog health [/URL]

With the woman and his child? addiction abuse dental laboratory product drug alcohol awareness training anxiety celexa depression medication

[LINK= ] drug herbal non prescription prescription [/LINK]

12/04/2006 03:46:00 PM  
Anonymous Anonymous said...

This must be the grossest falsehood!
[URL= ] 2005 fioricet january period summary [/URL]
[URL= ] picture of drug bust [/URL]
[URL= ] passing a hair follicle drug test [/URL]

Suppose they'd escaped, or been killed by one of the grens? drug for impotence levitra nerve pain medicine

[LINK= ] pharmacy tech [/LINK]

12/05/2006 06:20:00 AM  
Anonymous Anonymous said...

and to see dear Wickham too!
[URL= ] carisoprodol online soma [/URL]
[URL= ] prescription drug for depression [/URL]
[URL= ] average clonazepam dose [/URL]
[URL= ] vioxx studies [/URL]
[URL= ] dental office receptionist [/URL]
[URL= ] dental hygienist job search [/URL]
[URL= ] addiction carisoprodol [/URL]
[URL= ] dental guide medical school [/URL]

Lovely, isn't it? cialis effects generic side cigna dental insurance ppo medications interaction celebrex side effects interaction

[LINK= ] becker parkin dental supply [/LINK]

12/06/2006 09:11:00 AM  
Anonymous Anonymous said...

Shit !
[URL= ] anabolic steroid pill [/URL]
[URL= ] adipex diet link p pill.html [/URL]
[URL= ] clonazapam withdrawal [/URL]

Neither she nor Cyrus were wounded? california rehab teen drug mercury philippine store

[LINK= ] hydrocodone overdose [/LINK]

12/09/2006 10:12:00 PM  
Anonymous Anonymous said...

How languid their conversation the last evening of their being together!
[URL= ] lortab dose [/URL]
[URL= ] application employment pharmacy walgreens [/URL]
[URL= ] alcohol and drug abuse treatment center [/URL]
[URL= ] nursing drug guide for pda [/URL]
[URL= ] drug addiction substance abuse [/URL]
[URL= ] drug detox kit [/URL]
[URL= ] dental bridges colorado [/URL]
[URL= ] clonazepam used for [/URL]

Hide behind? ayurvedic herbal medicine in india coca drug puff sex drug effects lisinopril more side dental school university washington

[LINK= ] bad effects of drug [/LINK]

12/10/2006 11:54:00 PM  
Anonymous Anonymous said...

Poor little creatures!
[URL= ] love is the drug [/URL]
[URL= ] medicine hat ab canada [/URL]
[URL= ] dictionary drug home pharmaceutical [/URL]

Will the wolf cleave to the panther? buy carisoprodol cheap link carisoprodol watson

[LINK= ] doctor of dental surgery [/LINK]

12/12/2006 01:46:00 AM  
Anonymous Anonymous said...

What had Edward felt on being within four miles from Barton, on seeing her mother's servant, on hearing Lucy's message!
[URL= ] blue cross of california dental plan [/URL]
[URL= ] online pharmacy phentermine xenical meridia [/URL]
[URL= ] ambien effects medicine overdose side [/URL]

You hear anything? affordable dental insurance nj plan dog get medicine take

[LINK= ] court drug treatment [/LINK]

12/14/2006 03:19:00 AM  

Post a Comment

<< Home