I'm a big fan of Blogger, which is the platform that I use to publish this blog. It's free, easy to use and they push out regular updates to improve the software. But, it does have its weaknesses.
If you spend just a bit of time adjusting the color scheme and layout using the new Template Designer, you can give your blog a bit more personality.
There are also some html and css hacks that can introduce new functionality. For those of you that aren't familiar with these computer languages, you might want to look around at online tutorials to learn the basics such as how to format text.
Getting Ready
If you're ready to do some experimenting, make sure that you backup your template first. You can also go into the HTML section of your template and copy/paste the code to a Google Doc or other word processing document for safekeeping.
Most of the customizations that I do start by making slight changes or adding code to the HTML section. Here's how to get there:
- Log in to Blogger
- Click on 'Template'
- Click on 'Edit HTML'
- Click on 'Proceed'
Most of the code that you'll see in some of the samples I will link to just involves copying some code, searching for the correct location to put it in (CTRL + F) and pasting.
Use a Safety Net
In addition to backing up your HTML, you should always click on the "Preview" button before you click on the "Save Template" button. If you make a mistake, you can easily choose "Clear Edits."
When you have the code looking how you want it to, click "Close."
And with that introduction, here are a few simple code hacks to help you customize your Blogger blog.
Making Modifications to Code
Let's start with something simple.
You can remove that pesky border around inserted images. Change whatever values are in your template to match the bolded text below.
Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="0px"
Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="0px"
background: $(image.background.color);border: 0px solid $(image.border.color);
Here's a few more hacks:
- How to: Center justify your post titles
- How To: Create an archive on a separate page.
- How To: Create a custom search page.
- How To: Apply different formatting to static pages (eg: remove widgets)
On this one it took me some time to figure out how to find the widget id to specify things to remove. Check out this link.
Questions? I'd be happy to help. Leave a comment below.
No comments:
Post a Comment