A lot of people have been asking me to spill my secrets about blog design.
The only problem is that I don’t have any.
I don’t speak HTML, much less write it. I don’t even know how to use Photoshop. (Though I played around with Illustrator for about 10 minutes until I created my new header, which a child could make.)
But I do know how to read. And I do know how to Google. And those two things can be a lethal design weapon.
Basically, I click on the “Edit HTML” tab in my Blogger dashboard.
Then, I read.
After a while, you start to figure things out. Each section is divided. If it says “Body”, it’s referring to the background. If it says “Header description,” it’s referring to the line where you give a little extra info about your blog. Everything underneath it is in relation to that section – margins, text size, color. (Color is anything that looks like this: #171717. This site and this site can help you find the code for more colors than those offered by Blogger. You can either insert them into the HTML or in the “Page Elements” tab of new Blogger.)
You can play around with all of these – just hit “preview” first to make sure it looks right before you publish your changes. Also, saving a copy of your template is a smart idea. Just copy and paste it into a Word document. Personally, I have a faux blog I use to test out my templates before I make the changes on this one. Also an option.
If you want to, say, add a margin to something but don’t see a place to do that, copy and paste similar HTML from other parts of your layout. Usually, this works. In fact, many of the changes I make come from seeing similar code in other parts of my template and duplicating it other places. (For example, I found some code that referenced a border and copy and pasted the following - border-bottom:1px solid #171717; - into my date header section so that I could get a line between the date and post titles.)
None of this helpful I’m sure – and there are way more detailed instructions you can find here, here and here. But I will try to get more specific about my patterned backgrounds, which seem to be what people really want.
To change my plain background to a pattern, I have to do the following:
1. Find a background that can tile – this means you must find an image where the edges will blend together. To do that, there must either be blank space on all sides of the image or the top and bottom of the image must connect together. This probably doesn’t make sense, but you’ll see what I mean if you pick the wrong one – it will be all choppy and disconnected. There’s a way you can make any image into a web tile, but, again, I’m not the person to talk to about that. (You can find some good web tiles here and here. I got creative this time and cropped the image of a book of scrapbook rub-ons to make it work.)
2. Save the image to your computer and then upload to an online photo account, like flickr or photobucket. This will create a URL address for the image that you can use in your layout.
3. Locate the place in your HTML template that says "body." (It should be towards the top.) Underneath that, locate the line that starts with “background.” Depending on your template it may already have a link to a Blogger URL with an image. Whatever it is, take out the line that starts with “background” and insert the following:
background:url(http://photobucketorflkrurl.jpg);
Except insert the URL link to your image, which you can copy and paste from the image hosting site you selected.
4. "Preview" the template to make sure it looks good.
5. For extra credit, you can make a label cloud like the one I have. Find actually helpful instructions here. (Or to hide your Blogger navbar, go here.)
No matter your level of tech-savvyness, if you play around enough, you’ll figure it out. I promise. (It took me a few hours initially to figure it all out.)
And never, never ask yourself again why I don’t blog about topics like web design. Because, as boring as my posts about marriage and Miss Dub may be, this one takes the cake.
Oooh, I have a great recipe for a low-fat German chocolate cake. Maybe I’ll post it tomorrow.
Yeah, that feels better.
The only problem is that I don’t have any.
I don’t speak HTML, much less write it. I don’t even know how to use Photoshop. (Though I played around with Illustrator for about 10 minutes until I created my new header, which a child could make.)
But I do know how to read. And I do know how to Google. And those two things can be a lethal design weapon.
Basically, I click on the “Edit HTML” tab in my Blogger dashboard.
Then, I read.
After a while, you start to figure things out. Each section is divided. If it says “Body”, it’s referring to the background. If it says “Header description,” it’s referring to the line where you give a little extra info about your blog. Everything underneath it is in relation to that section – margins, text size, color. (Color is anything that looks like this: #171717. This site and this site can help you find the code for more colors than those offered by Blogger. You can either insert them into the HTML or in the “Page Elements” tab of new Blogger.)
You can play around with all of these – just hit “preview” first to make sure it looks right before you publish your changes. Also, saving a copy of your template is a smart idea. Just copy and paste it into a Word document. Personally, I have a faux blog I use to test out my templates before I make the changes on this one. Also an option.
If you want to, say, add a margin to something but don’t see a place to do that, copy and paste similar HTML from other parts of your layout. Usually, this works. In fact, many of the changes I make come from seeing similar code in other parts of my template and duplicating it other places. (For example, I found some code that referenced a border and copy and pasted the following - border-bottom:1px solid #171717; - into my date header section so that I could get a line between the date and post titles.)
None of this helpful I’m sure – and there are way more detailed instructions you can find here, here and here. But I will try to get more specific about my patterned backgrounds, which seem to be what people really want.
To change my plain background to a pattern, I have to do the following:
1. Find a background that can tile – this means you must find an image where the edges will blend together. To do that, there must either be blank space on all sides of the image or the top and bottom of the image must connect together. This probably doesn’t make sense, but you’ll see what I mean if you pick the wrong one – it will be all choppy and disconnected. There’s a way you can make any image into a web tile, but, again, I’m not the person to talk to about that. (You can find some good web tiles here and here. I got creative this time and cropped the image of a book of scrapbook rub-ons to make it work.)
2. Save the image to your computer and then upload to an online photo account, like flickr or photobucket. This will create a URL address for the image that you can use in your layout.
3. Locate the place in your HTML template that says "body." (It should be towards the top.) Underneath that, locate the line that starts with “background.” Depending on your template it may already have a link to a Blogger URL with an image. Whatever it is, take out the line that starts with “background” and insert the following:
background:url(http://photobucketorflkrurl.jpg);
Except insert the URL link to your image, which you can copy and paste from the image hosting site you selected.
4. "Preview" the template to make sure it looks good.
5. For extra credit, you can make a label cloud like the one I have. Find actually helpful instructions here. (Or to hide your Blogger navbar, go here.)
No matter your level of tech-savvyness, if you play around enough, you’ll figure it out. I promise. (It took me a few hours initially to figure it all out.)
And never, never ask yourself again why I don’t blog about topics like web design. Because, as boring as my posts about marriage and Miss Dub may be, this one takes the cake.
Oooh, I have a great recipe for a low-fat German chocolate cake. Maybe I’ll post it tomorrow.
Yeah, that feels better.
9 comments:
A) I owe you an Illustrator lesson. It's like throwing someone that can't swim into a pool.
Two. That cake recipe rocks.... share on sista!
I love GC cake, so do share!
If I had all the time in the world I would love to sit and play at my computer all day, as it is I do it too much! So like, right now, since both my chitlins are magically asleep at the same time, I need to click the X and get the heck off!
Ciao!
You have opened up a whole new world for me...
Me too...this may be dangerous. I've spent the last two hours working on my blog. Now I've got to get back to my life.
Thank you. I now no longer covet other people's stylish blogs. I'm going to just be happy with my simple (easy) standard one.
ooh, i'm so glad you blogged about this. i've been telling justin that after a year and a half, it's time for a change, and this has given me the motivation i need. cheers to mrs. dub!
Thanks for the help!
Yes, I need that cake recipe as well.
AND, thank you for explaining HTML in plain language. My husband speaks programmer, and when he tries to explain it to me, I just don't get it!
In one post, you are revolutionizing the blogging world for women! And it is so much cuter!
that's funny.. this picture was taken about 3 months ago where I work... rubberball.com. good job, mike.
Post a Comment