How to Edit a Blogspot Template in Dreamweaver


Blogspot templates, also called Blogger templates, are single files containing the structure, style and functionality that control the look of your Google blog. They are similar to traditional HTML files in that they use HTML tags and stylesheets and support limited use of JavaScript. Where they differ is that a Blogspot template places all of this information into a single file, whereas a traditional template may use multiple files. Blogspot templates also make use of special Blogger tags to pull in blocks of text, links or other functions that you can set up in your Blogger account area. Editing these templates in Dreamweaver requires a basic knowledge of HTML, since you will not be able to use the visual editor to see the full layout.

  • Click "Open File" from Dreamweaver's launch screen and navigate to the location of your saved template file. Templates should be XML files. If you have downloaded a template as a ZIP file, you must unzip it first before it can be opened. The file will open in the code editor by default.

  • Get familiar with the way the template is structured. Below the HTML declaration and in text, the "skin" will begin with the "<b:skin>" Blogger tag. Below this are the variable definitions and CSS styles. All font and color styles are usually defined using variables instead of being listed in the CSS classes. Change the "default" and "value" settings where desired. Make sure your new values end with a semi-colon and are contained within quotes. For example, the following variable sets the background color to black:

    <Variable name="mainBgColor" description="Main Background Color"

           type="color" default="#ffffff" value="#000000">
  • Edit or add your CSS styles. Styles follow the traditional structure but are not contained within <style> tags. For example, to change the width of the right sidebar to 120 pixels, you would edit the following (or similar) style declaration:



    width: 120px;


    When you reach the end of the style, take care not to delete or modify the closing "skin" Blogger tag, which looks like this:


  • Edit the HTML portion of the document by adding, changing or removing HTML tags where desired. If you are creating new CSS styles, add the class or ID values to the HTML tags here. You also may add images by using the full URL path to where they will be stored; however, it may be easier to add visual elements using the template editor in your Blogger administration area once your edited template is activated.

  • Review the content areas of your HTML for blocks of Blogger tags. You may add, change or delete these lines to affect the structure and function of your blog. If moving them around, make sure to copy and paste the entire block of tags to retain their functionality. Blogger offers an excellent reference for what each Blogger tag does (see Resources).

  • Save the file by clicking "File > Save" and making sure the file type remains XML. Upload your newly edited template using your Blogger administration page, then activate it to view the results. Use the template editor for any small tweaks or changes if needed.

Related Searches


  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet



You May Also Like

Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!