Getting Started

Good to know

Before jumping into Theme Installation guide, it's good to know about basic settings of Blogger such as how to customize or edit HTML. You may need to open these settings multiple times while customizing a blog with custom theme such as Plus UI.

Theme Designer

From Theme Designer page, we can edit basic things such as color/background and length. Default themes additionally allow us to add custom CSS or change font faces. Our theme doesn't allow adding custom CSS and changing font faces through this page due to some limitations.

Steps for navigating to Theme Designer:

1. Go to Blogger Dashboard.
2. Navigate to Theme and click on Customize button.

   Tips!
   Alternatively, you can navigate to Layout and click on Theme Designer link.

   You are now on Theme Designer page.
3. The page should have 3 menus namely Background, Advanced and Gadgets in the left and a preview of the blog home page in the right.
4. By clicking on Advanced tab, you can select the component you wish to edit from the dropdown menu.

Edit HTML

This feature gives full control of theme modification, allowing us to modify the Theme XML code. This XML code can be considered as the source code because it contains settings and contents as valid Blogger theme markup which is rendered to HTML when a webpage is visited. This XML code generally contains Blogger theme tags, HTML tags, comments and text contents including CSS and JS.

You can also install a theme by overwriting the existing XML code with the new theme's XML code. Keep in mind, this method resets the previous theme's settings and widgets with new theme's default settings and widgets respectively.

Steps for navigating to Theme XML Editor:

1. Go to Blogger Dashboard.
2. Click icon next to the Customize button.
3. Click Edit HTML, you will be redirected to the editing page.

How to directly jump to a widget with specific ID?

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

Download Files

Make sure you have downloaded all the required files from Gumroad after purchasing. If you have not yet downloaded them, follow these steps:

Via Email receipt:

1. Pull up your email receipt. Click the View content button to go to the product's download page.
2. If you have not received an email receipt, please check your spam folder. If you still can't locate it, please contact us.
3. Before being redirected to the download page, you might be asked for your email address. Simply enter the email you used at checkout, and you should be able to access the download page.

Via Gumroad account:

1. Alternatively, you can create a Gumroad account using the email address you previously bought your product(s) with.
2. With a Gumroad account, you will be able to access your purchases at any time from your Library.

Download the .ZIP file of latest version and extract it.

Theme Installation

There are two ways of installing the theme, we recommend you to use second method if you are installing a specific version of theme for the first time.

Upload XML

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

1. In Theme menu, click 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 Override XML method to install the theme cleanly.

Override XML

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

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

Copying the .XML code

1. Open the .XML file from extacted folder in any Text Editor application.
2. Copy all the theme code that appears, press ⌘ + A › ⌘ + C for quick commands.

Overriding the previous theme code

1. Go to Blogger HTML Editor.
2. Replace all code in the previous theme, right click › Select All (⌘ + A).
3. Press ⌘ + 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.

Related Posts