Getting Started

An initial guide and introduction before using the theme.

Preparation

For the initial stage we want you to know some basic settings for Blogger such as how to customize or edit HTML, this will be needed when you use Blogger custom themes.

Blogger Theme Editor

Is a page where you can customize themes without editing the HTML, what you can edit includes the color/background, length and adding new CSS code, in built-in Blogger themes you can also change the font types. It's should be noted that AMP doesn't support this feature but some themes use CSS variables that put the color/background, length in one place which makes it easier for you to customize.

1. First, on Blogger dashboard, go to Theme › Customize.
2. You will be redirected to a new page with 3 menus on the left.
3. Ylick on Advanced tab, in the dropdown menu select which component you want to customize.

Edit HTML

This feature is intended for advanced modification, which means you should at least have some understanding of HTML, CSS or javascript. This may be a bit difficult for those of you who are not familiar with coding, but as there are many tutorials and guides on the internet, everything can be learned gradually.

You can also install the theme through this feature by overwriting all HTML code of the previous theme, this method will reset all default settings of the previous theme including existing widgets, follow the steps below access the Blogger HTML Editor:

1. In Blogger dashboard, click on Theme.
2. Click icon next to the Customize button.
3. Click Edit HTML, you will be redirected to the editing page.

How to jump directly to a specific widget

To improve the editing process, Blogger provides a feature to jump directly to a specific widget, you can press icon then the widget ID will be displayed, select the widget you want to edit.

Mobile settings

Basically this feature is used to determine the appearance of the blog when accessed via mobile, the mobile version is marked with ?m=1 at the end of the url and cannot be removed. Most custom themes already support responsive even some premium themes already support Adaptive Layout, therefore mobile settings are no longer needed, we recommend choosing a desktop theme on mobile display.

1. In Blogger dashboard, click on Theme.
2. Click icon next to the Customize button.
3. Click Mobile Settings, in the option 'Want to display Desktop or Mobile theme on mobile devices?' select Desktop,
4. Click Save.

---

Installation guide

The easiest way to install a Blogger theme is by uploading the .XML file directly:

1. In Theme menu, click the icon next to the Customize button.
2. Click Restore.
3. Select the .XML file that you want to upload, click Upload then check for changes to your blog by clicking View Blog or refreshing your blog page directly.

This method will retain the widgets in the previous theme, the final appearance may be different from the theme demo, use the manual method to install the theme cleanly.

Manual installation (alternative)

The most recommended way to install a custom theme is to directly overwrite the HTML code of the previous theme, but as mentioned earlier, this method will reset all the widgets in the previous theme and replace them with built-in widgets from the new theme.

It is highly recommended to back up the previous theme first before using this method.

Copying the .XML code

Via Google Drive:

1. In Google Drive, open the folder of the theme you purchased.
2. Right-click on the theme you want to install.
3. Select Open with › Text Editor.
4. Wait until a new tab opens and loads perfectly, copy all the theme code that appears, press Ctrl+A › Ctrl+C for quick commands.

Via Notepad:

1. Download the theme file you purchased through the provided Google Drive folder.
2. Right-click › Open with, select Notepad
3. Copy all the theme codes by pressing Ctrl+A › Ctrl+C

Overriding the previous theme code

1. Go to Blogger HTML Editor
2. Replace all code in the previous theme, right click › Select All (Ctrl+A).
3. Press Ctrl+V to paste all the .XML code that was copied before.
4. Save the theme by clicking icon on the top right of the HTML Editor.