skip to main | skip to sidebar

Template by eblogtemplates.comI 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..
    And Page elements content (HTML/JavaScript).. Cause you'll need it!
  • Look for a template that inspires you
    you can try 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
    Sometimes it shows Ads with dimensions that aren't suitable to the place holder.. Create your Ad units and get Ad code and place it yourself in HTML/JavaScript widgets.
  • 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 -->
    <h1 ondblclick=';none&quot;'
    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
I hope I encouraged you to start changing your template..


Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]
More Tech Tips! | Technology tips on web development


Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS