Installing a Template in the New Blogger Interface

Basic instructions for loading one of our templates into Blogger using the new interface.

  1. Basic template upload:
    • From the Dashboard
    • Under ‘More Options’ select ‘Template’
    • In the top right click ‘Backup/Restore’
    • Where it says ‘Upload a template from a file on your hard drive’
      Select ‘Choose file’ and find the xml template on your computer
    • Then click ‘Upload’
  2. Adding HTML template features:
    • The following design features require copy and pasting of code into Blogger gadgets. The code is included in the download file.
      Slideshow, Menu & Social Banners
    • To avoid having code errors please open these files with notepad only (not word, wordpad, works or other editor). To locate notepad on your computer go to the start button > all programs > accessories > notepad.
  3. Slideshow
    • From Dashboard
    • Under ‘More Options’ select ‘Layout’
    • In the gadget named ‘Slideshow’ click ‘edit’
    • Find the slideshow code text file on your computer (included in download)
    • Copy and paste the code into the ‘Slideshow’ gadget & save
    • Come back and customize following the instructions inside the slideshow text file
  4. Menu
    • From Dashboard
    • Under ‘More Options’ select ‘Layout’
    • In the gadget named ‘Menu’ click ‘edit’
    • Find the menu code text file on your computer (included in download)
    • Copy and paste the code into the ‘menu’ gadget & save
    • Please read ‘Creating Pages’, ‘Categories & Labels’ & ‘Menu Links’ to complete menu
  5. Creating Pages
    • From Dashboard
    • Under ‘More Options’ select ‘Pages’
    • Click ‘New Page’
    • Click ‘Publish’
    • While in ‘Pages’ click each page title link to view
    • Copy and paste the urls (from your browser window) into Notepad… you’ll need these for the menu
      ~NOTE: In the sample template the following are pages; About Me, Contact, Pricing, What to wear, Policies & Press. These can be whatever you like. Categories are not pages – please read ‘Categories & Labels’ to create categories.
  6. Categories & Labels
    • From Dashboard
    • Under ‘More Options’ select ‘Posts’
    • Click the tag or label icon to add labels or add labels to individual posts by hovering over the post title and clicking ‘edit’
    • The labels added will be the categories for your blog
      ~NOTE: If you don’t have a set of labels that will work in place I suggest creating a mock post and adding all of the labels (categories) you’ll want (this post can be deleted later). In the sample blog the categories are engagement, wedding, maternity, newborn, children, family & lifestyle. These can be whatever you like.
    • Once labels are created – from Dashboard
    • Under ‘More Options’ select ‘Layout’
    • Click ‘Add a Gadget’ choose ‘Labels’
    • Click ‘View blog’ (top left screen)
    • While viewing your blog click each Label link to view
    • Copy and paste the urls (from your browser window) into Notepad
  7. Menu Links
    • Return to ‘Layout’
    • In the gadget named ‘Menu’ click ‘edit’
    • Open your Notepad text file that has saved links and copy and paste the urls being careful not to erase the ” ”
      For more help with links – HTML Links
  8. Social Banners
    • From Dashboard
    • Under ‘More Options’ select ‘Layout’
    • In the gadget named ‘Social Banners’ click ‘edit’
    • Find the menu code text file on your computer (included in download)
    • Copy and paste the code into the ‘social banners code’ gadget & save
    • Paste urls in the noted spaces… ie ‘YOURFACEBOOKLINKHERE’ being careful not to erase the quotes ‘ ‘
  9. Customizing misc: Using a new background image – newer templates (plain jane, element)
    • While in template designer click ‘background’ then dbl click the icon
    • When Blogger’s background choices popup there is also a choice to upload your own image
    • Find the background tiles on your computer and upload the image or your own image
  10. Customizing misc: Using a new background image – older templates (artisan, ciao, daybook, torn)
    • To add a new background image to the blog go to >Design tab and click the Edit HTML sub-tab. Scroll down the this code… body { background-image: url(‘http://yourimagehost.com/yourimagename.jpg’); To add your own image first upload that image to a photohost and copy the direct link. Carefully add your new link replacing our image link – background-image: url(‘YOURLINKHERE’);


    Additional Resources & Support

    For assistance please contact me at at Cinnamon Girl Studio.

    For basic Blogger tutorials please visit Blogger Help.