I had a recent experience with changing my blogger template.. Now it is time to share some tricks to simplify things with next one trying to change it.. cause you should do it especially if you are still working with those 800x600 built-in blogger templates.
To start editing your template: go to Layout > Edit HTML > check ''.
- Backup your original template..
- Look for a template that inspires you
you can try eblogtemplates.com or just google it.. you should know that most users are using 1024x768 screens or bigger..
- Try it first on a temporary blog..
It is easy to create another free blog on blogspot and try the new template on it first.. and when satisfied copy the full template back to your original blog
- Use Text Editor to simplify editing template code
It is better to edit template file in external Apps like EMEditor, Notepad++ instead of editing inside the browser text area. With syntax coloring and code folding.. your job will be much easier
- Use Ads blocker or comment Adsense code while you still editing
cause refershing pages frequently can get you banned [100 AdSense Tips]
- Change widget IDs in the new templates
New templates will come with some widgets your already have and some new.. You should set the Old widgets IDs in the new template by the their IDs in the old template.
If you get errors you might need to set the new widgets IDs with higher numbers [How to fix bx-XXXX Errors]
- Remove extra widgets
Templates authors might put their adsense code in the templates for demo purpose.. and other extra widgets.. remove it!
- Some parts are missing ?
You might find some parts missing.. specially the new Blogspot features like the inline comment form.. To fix it : [How to add a comment form beneath your blog posts].
Other missing parts... check your original template code for missing part.
- Don't depend on Blogger Monetize options
- You are not done yet
Add your special logo and customize colors of the template so it would stand out..
- Under construction message
finally, While you changing the template at your real blog you might want to give users an under construction message until you done. Cause you might get unexpected errors or un-comment those adsense codes we commented before. Code below will create a big black layer over your page.
<!-- place it right after <div id='outer-wrapper'> -->
<!-- Message will be removed by double-clicking it -->
style='margin:0; top:0; left:0; z-index:5; position:absolute; width:100%; height:1000%; padding:30px; background-color:black; color:white; text-align:center'>
Few design changes,<br/>please check back in 10 minutes