Perhaps one of the most common misunderstandings about Blogger is that it is necessary to know HTML, CSS or JavaScript to alter the look of your blog. The reality is that a good high-dollar Blogger template affords you a good amount of control over colors, fonts, layouts, menus, widgets, etc. and it's all accomplished via tools that are already integrated into Blogger's dashboard – without any code needed.
This guide is geared for novices. At the end of this article, you will be able to create your Blogger blog to look the way you want it to look, without using any other customization tools other than Blogger's own and your template's settings panel.
Key Takeaways
- Two dashboard tools handle most Blogger customization: the Theme Customizer ("look and feel" control panel) and the Layout Editor ("where things go" command center).
- Changing your color scheme only takes about 5 minutes.
- Use no more than 2 fonts (for headings and body text) — blogs don't look appealing with more than two.
- Keep your logo file under 50KB so it loads quickly.
- A Privacy Policy page in your menu is a must-have to receive AdSense approval.
- Keep your sidebar to a minimum — aim for 4–6 widgets maximum.
The Two Main Tools Explained
It's good to know where the customization is mainly occurring in Blogger before falling in:
Theme Customizer
If you log into your dashboard under Theme > Customize, you will find the Theme Customizer. This is where you can take control of the visual elements – colors, fonts, background and display settings for the template. You can consider this the "look and feel" control panel.
Layout Editor
The Layout Editor can be opened by clicking on Layout in your dashboard. It's where you have control over the layout of your blog, such as where widgets are displayed, sections on the page, and how content is organized. Consider this to be the "where things go" command center.
Both of these tools are used for most customization tasks, or the two are combined together.
1. Changing Colors
One of the most significant changes you can make to your blog to visually affect it is its color scheme, and it only takes about 5 minutes.
In Blogger, you can change the colors by following the below steps:
- In the left sidebar, click on Theme.
- Now click on Customize (not the drop down).
- Under Colors and Themes or Advanced (depending on the template), you'll find the color settings.
- There will also be background, text, link, headings, and more colors to choose from.
- Click on any of the colour swatches to launch the colour picker.
- Select the color from the palette, a hex number, or by dragging the sliders.
- Live preview of your changes can be seen on the right hand side.
- Save by clicking on Apply to Blog.
Hint: Changing one colour, such as the main accent colour of your template (button colour or header highlight), can give your blog a new look.
Depending on the template, there can be more color options in addition to the background, e.g. mega menu color or featured section color for templates such as Citron. These will show up in the same customizer panel by default.
2. Changing Fonts
The use of typography can make or break your blog's appearance of being more professional and easily read. You don't need to use any coding to change fonts.
To change fonts:
- In the Theme > Customize section of your dashboard, you'll see the customization options for your theme.
- Check for the Advanced section / Fonts tab. In most cases, there will be separate font controls for Body text, Headings, and Post titles.
- Select the font name to get the list of fonts that are available for use.
- Choose a different font and view it on your live blog.
- Use the slider to change the size of the font (if there is one).
- Save it by clicking on Apply to Blog.
For beginners, font combinations are:
- Headings: Playfair Display + Body: Lato — elegant and readable for personal and lifestyle blogs
- Headings: Roboto Slab + Body: Open Sans — clean and professional for tech and news blogs
- Headings: Montserrat + Body: Merriweather — modern and unique for niche authority blogs
Use no more than 2 fonts (for headings and body text). Blogs don't look appealing with more than two fonts.
3. Uploading Your Logo
Having a custom logo will certainly give your blog a professional look and help create your brand identity.
How to add a logo:
- To start, click on Layout in your Blogger dashboard.
- At the top of the layout find the 'Header' gadget.
- Click the pencil icon to edit the Header gadget.
- The Image option is located in the pop-up window.
- Add your logo image (best results with a transparent PNG).
- Decide to display the blog title along with the logo, or not display it and just show the logo.
- Save.
If you have a dark brand style, you can also upload a dark version of your logo (for templates where this is available, such as Citron). This way, your logo can be seen regardless of whether you have a light or dark background. See if this option is available in your template's documentation.
Logo tips:
- Use a PNG file with a transparent background
- Recommendation: headers should be 200-400 pixels wide, and 60-100 pixels tall for standard headers
- Make the file size small (less than 50KB) so that the file can be loaded quickly
4. Setting Up Your Menu of Navigation
Navigation menu is your visitors' way to locate various parts of your blog. When a menu is well organized, it will decrease bounce rate and make it easier for users to use.
To set up your menu:
- On the dashboard, click on Layout.
- Locate the navigation area (usually located at the top, and marked as Pages or a Link List gadget).
- Edit the gadget by clicking the Edit icon on the gadget. A list of links to be added, removed, or reordered will appear.
- Press Add Link to add a new menu item.
- Fill in Link Title (what it will look like) and URL (where it should link to).
- Repeat for each of the menu items.
- Drag to rearrange items.
- Save the gadget.
Here are some items that you should consider for your menu:
- Home
- Your main category / niche pages (Blogger's label urls: yourblog.com/search/label/CategoryName)
- About page
- Contact page
- Privacy Policy (must have to receive AdSense approval)
The menu gadget configuration will be the same for the templates that have a mega menu, but depending on how you build your list of links, the template will create a dropdown mega menu.
5. Editing Homepage Sections
Your blog's homepage is the face of your blog. With most high quality blogger templates, you will be able to set up what will show up in your homepage using gadgets in the Layout editor.
Popular sections in your home page that can be customized:
Featured Posts Section
This is typically created by a gadget in the Layout based on a particular label. To set it up:
- Make a label (such as "Featured") and label your best posts with it.
- Search for the Featured Posts gadget in Layout.
- Edit it and put your label name in it.
- That will automatically be imported into the featured display in the template.
Recent Posts / Latest Posts
Managed by the typical Blog Posts gadget in Layout. Modify it to determine the number of posts to show, whether to show thumbnails, or how the post excerpt is displayed.
Sidebar Posts
Premium templates may have an additional sidebar widget that displays a listing of the most popular or latest posts that have thumbnail pictures. To edit this gadget, go to Layout, and specify the number of posts or label to display.
6. Adding Widgets to Your Sidebar
The components of your sidebar and footer are called 'Widgets' (Blogger calls them 'Gadgets'). No coding is required for adding, removing or reordering them.
Sidebar widgets – how to manage:
- On the dashboard, click on Layout.
- Click on the Sidebar section.
- Add a gadget, or a new widget.
- Select one of the following options: Popular posts, Labels, Blog archive, Search box, HTML/JavaScript, etc.
- Click the pencil of an already existing gadget to edit it.
- Click the pencil icon and Remove button to remove a gadget.
- Move gadgets up or down by dragging them with their drag handle.
The suggested widgets that are available for most blogs:
- Search Box — allows visitors to easily locate information
- Popular Posts — displays popular posts with images of them
- Labels/Categories — assists visitors in surfing according to topic
- Blog Archive — lists your blog posts month by month
- About Me / HTML widget — a short bio containing a picture of yourself
- Subscribe form — for list building via e-mail
Keep sidebar to a minimum. If you are using a sidebar with 10+ widgets, then your page will be cluttered and slow. Aim for 4–6 maximum.
7. Customizing the Footer
You may have overlooked the footer but it's valuable real estate to link to important stuff.
How to customise the footer:
- Go to Layout.
- Scroll down to the Footer section.
- Add a Gadget to add widgets to your footer columns (about blurb, quick navigation links, social media links, contact information, copyright notice).
A lot of high quality templates have already been outfitted with footer gadget areas arranged in columns. Include widgets in each column to make a well-done, informative footer.
8. Shortcodes (Premium Templates Only)
If you are using a high quality template which supports shortcodes (such as Citron), then you can add styled content to your blog without coding. Shortcodes are easy-to-use text codes that you enter in the post editor, and they are turned into elements designed by the template.
In Citron, some typical cases are:
- Button shortcodes — generate call to action buttons in posts with style
- Table of Contents — automatically creates a linked table of contents of your post headings
- Content Pagination — break a long post into several pages with paging navigation
All of the shortcodes available for your template, and how to use them, will be listed in your template's documentation. These are particularly helpful for affiliate bloggers, tutorial writers, and those who publish long-form content.
Previewing Your Changes Before Publishing
While Blogger's customizer does show you a preview of your blog as you make changes, it's a good idea to get a preview of your entire blog in a different browser tab before announcing a redesign.
Prior to going live with changes, check:
- Open your blog on your cell phone and make sure it appears correctly on the mobile device
- Click on 3-5 different posts to ensure that the layout isn't broken on posts
- Click each menu item in the navigation menu
- Check that the grammar, spelling, and punctuation are correct
- Use your search bar to try and find things
9. What You CAN'T Change Without Coding (And What To Do)
Despite the awesome template, there are some modifications which need to go into the HTML:
- Making the adunit transparent or opaque, or even adding a border to it
- Custom sticky header behaviour
- Change the exact style (CSS) of a particular element
- Custom Cookie Notice that is added on top of the template's notice
For these scenarios:
- If you have documentation for your template, check if it involves the change
- Reach out to the template developer's support — they may have code snippets of common things one can customize
Only edit Blogger's Theme > Edit HTML if you feel comfortable doing so, and do not forget to backup first.
For most customization options, however – colors, fonts, logo, menus, widgets, homepage sections, etc. – you will never need to deal with the code.
Customize: What to Customize Where
| Homework Task | Location of Task |
|---|---|
| Change colours | Theme > Customize > Colors |
| Change fonts | Theme > Customize > Advanced |
| Upload Logo | Layout > Edit Header gadget |
| Add Menu Links | Layout > Navigation gadget > Edit |
| Add Sidebar widgets | Layout > Sidebar > Add a Gadget |
| Set featured posts | Layout > Featured Posts gadget > Edit |
| Edit footer | Layout > Footer > Add a Gadget |
| Shortcodes | Used in the interior of post editor (per template docs) |
| Dark mode | Theme > Customize (if template supports it) |
Final Thoughts
Blogger's customization features are far more potent than most newbies think. Once you have a quality, superior template in place, you're ready to create a well-structured blog with a professional appearance, without the need to know a single line of code.
By beginning with the basics — logo, color, font and menu — and then taking your time with widgets and home sections, you're on your way to a successful website. Every little thing adds up, and after a couple of hours of intensive customization, your blog could appear utterly different.
Most of all, make conscious decisions about the design. Select colors that align with your brand, fonts that are easy to read, and a layout that guides your readers to the information they are looking for. This combination of good design and quick loading speed is a recipe for keeping visitors coming back — and earning a Google boost in rankings.

All comments are reviewed by admins, please do not post any spam*