We include many customization elements in our templates to make all our templates very flexible and customizable.
Because the methods used to customize the options are the same throughout the Blogger Template Designer, we will cover the basics and not go through every single option to spare you pages of reading. The basics will give you enough knowledge to work through each options section to customize your template.
View the video for customization directions or see below for Step-by-Step written directions.
- First, navigate to your Blogger Dashboard and to the Theme page.
- Click on the orange Customize button under the live image of your website.
- The Blogger Template Designer window will open.
- Click on the Background option at the top left corner of the screen.
- A section will open where you can remove the current background image, upload a new background image or use the default background and colors.
- To upload a new background image, click on the gray down arrow next to the picture of the current background image.
- From here you can select one of the Blogger provided backgrounds or upload your own image using the Upload image link at the top left corner of the Select background image box. Click this link to find the background image on your computer. You can upload a JPG, GIF, or PNG file up to 300k in size. For a full background, use an image 1800 x 1600 or greater.
- Use the Browse button to find your background file then click the Open button. When the file finishes uploading you will see a preview of your site on the screen.
- Click the Done button to accept your changes.
- To edit your background colors, navigate to the Advanced options by clicking on the Advanced link in the upper left hand corner of the Blogger Template Designer.
- A new, secondary menu will appear in the upper left hand corner of the Template Designer. Outer Background will be the first option in the new menu.
- To select an outer, Outer Background Color, enter a six-digit hex color (including #) in the text box or pick a color using the color-picker to the right. You may also choose from some suggested colors drawn from the general template colors below.
- To select a background color for the blog post area and sidebar, or Inner Background Color, enter a six-digit hex color (including #) in the text box or pick a color using the color-picker to the right. You may also choose from some suggested colors drawn from the general template colors below.
- To edit your header, navigate to the Advanced options by clicking on the Advanced link in the upper left hand corner of the Blogger Template Designer.
- Blog Header will be the second option on the Advanced menu.
- Here you will have several options: Header Font, Header Color and Image Logo Height (for uploaded logos)
- To edit the Header Font, use the scrolling menu to pick one of the many fonts included.
- You can also Bold or unbold the logo and also change the italics and the font size. This example has a logo font size of 70px. Using the dropdown menu, you can pick fro a variety of font sizes. Note that you can also just type in a font size if you don’t want to use one from the present list.
- Next you can change the Header Color by selecting (clicking on) one of the suggested colors or by typing in a hex color (a six digit color code beginning with a #) or by picking a color using a the color picker. Click on gray arrow next to the hex color box to open the color picker.
- You can also set your Tagline Font and Tagline Color.
- This is also where you can adjust the Image Logo Height when using an image logo. Adjusting the number slider will change the height of your image logo.
These 2 setting controls are the 2 basic control types available in Blogger. You may also see number adjusters like the Image Logo height adjuster. Knowing how to use the 2 types of settings you can now customize your blog. Please explore all the various section under the Advanced tab to see what options your theme offers.
Click the orange APPLY TO BLOG button in the upper right hand corner of the Blogger Template Designer window to save all your new changes.