Plus UI offers more than a new look for Blogger: it includes design controls, navigation options, pagination, comment settings, and optional tools such as Google Analytics, Firebase-powered counters, and a Progressive Web App feature. This condensed setup guide brings the essentials together so you can move from a fresh installation to a working blog without jumping between dozens of settings.
This guide is an independent quick reference for Plus UI, not a replacement for its full developer documentation. Options may differ between releases; check the version of your XML before changing a feature introduced in a later update.
1. Install Plus UI Safely
First, extract your downloaded template package and locate the compatible .xml file. The official guide describes two installation methods: Restore XML and Override XML.
Method A: Upload the XML file
- Open Blogger → Theme and select the correct blog.
- Use the dropdown beside Customize and select Backup to save your current XML.
- In the same dropdown, select Restore → Upload.
- Choose your Plus UI
.xmlfile and inspect your live site after installation.
Restoring an XML theme can retain or merge existing gadgets. If the resulting layout differs from the preview, inspect the Layout screen before changing code.
Method B: Clean install / Override XML
The Plus UI developer recommends a clean install for a first-time installation of a specific theme version. This procedure uses a temporary blank Blogger theme before applying the new XML, reducing the chance of older widgets being merged into the new layout.
- Make a theme backup and note your custom gadgets.
- Open the official installation instructions
https://plus-ui.fineshop.app/2024/10/installation.htmland obtain the precise blank-theme XML provided for clean installation. - Apply that blank theme in Blogger's HTML editor, following the developer's sequence.
- Replace it with the complete Plus UI XML code, save, and reconfigure the required widgets.
- Review your homepage, article pages, mobile appearance, and important site links.
Installation tip
Do not upload the ZIP archive directly. Also, the theme's XML editor is not the same as Blogger's post editor.
2. Understand Theme Designer, Layout, and Edit HTML
Most Plus UI changes happen in one of three places. Knowing which screen controls a setting saves time and helps prevent accidental edits.
| Where | What it controls |
|---|---|
| Theme → Customize | Appearance choices and many plugin switches through Advanced. |
| Layout | Editable gadgets, menus, translation entries, ad slots, and selected plugin text. |
| Theme → Edit HTML | XML variables and advanced settings such as certain metadata, integrations, and custom menu code. |
Within Customize → Advanced, Plus UI exposes named settings such as Style: Appearance and Plugin: Pagination. Some controls use a length value in pixels as an option selector; those values are configuration codes, not actual spacing.
3. Complete the Basic Site Setup
- In Blogger Settings, set your blog title, description, language, and search description.
- Review the blog identity and favicon. Plus UI documents an optional
meta.iconXML variable for a square PNG favicon; leaving its value blank uses the favicon from Blogger settings. - Check the blog's social-preview metadata and any configured image URLs in the theme variables.
- Open the homepage and a post page to verify that the displayed identity matches your settings.
For the favicon URL approach, the developer recommends a square image at least 512 × 512 pixels. If you do not need a custom multi-size favicon URL, use the documented Blogger-settings fallback instead.
4. Customize Colors, Appearance, and Default Mode
Visit Theme → Customize → Advanced → Style: Appearance. The developer documents settings for direction, default color mode, and theme schemes.
| Setting | Available selection |
|---|---|
| Direction | 1px Automatic, 2px Left-to-Right, 3px Right-to-Left |
| Default Mode | 1px Light, 2px Dark, 3px System |
| Theme Schemes | 1px Disabled, 2px Enabled |
If you use theme schemes, configure the preferred palette under the related color fields. Plus UI also includes additional appearance controls for interface elements such as the status-bar color and box design, depending on the version.
2px does not mean adding a two-pixel margin.5. Set Up Your Navigation Menu
Plus UI distinguishes between a more advanced navigation menu with dropdowns and a simpler Pages-based menu. Do not confuse Navigation Menu with Navigation Menu (Simple) when opening Layout.
- Open Blogger → Layout and locate the Navigation Menu HTML gadget when available.
- Save a copy of its current HTML before making changes.
- Use the developer's menu generator or edit the HTML according to the official menu guide.
- Update menu labels and destinations; save and test dropdowns on desktop and mobile.
For manual customization, the official instructions point to the items-mainMenu includable in the template XML. That route is useful for the default navigation, but should be approached carefully if you are unfamiliar with Blogger tags.
6. Choose a Comment System
Plus UI documents support for Blogger comments and Disqus, including configurations that offer more than one commenting option. Open Customize → Advanced → Plugin: Comments to inspect the available switches.
- Blogger comments: configure comments on static pages, popup style, expanded replies, and media parsing.
- Images and links: review whether commenters may insert images or links, especially when spam is a concern.
- Disqus: configure it only when you plan to use the service; follow the release-specific integration instructions.
Recommended approach
Begin with one comment platform and test a published post before enabling more advanced combinations.
7. Configure Post Pagination
Go to Customize → Advanced → Plugin: Pagination. Plus UI offers several pagination types:
| Type | Behavior |
|---|---|
| Default | Newest, Home, and Oldest navigation |
| Infinite | Load more posts without leaving the current list |
| Numbered | Page numbers on supported all-post and label pages |
| Auto | Attempts numbered pagination with an infinite-loading fallback |
The documented Blog Pagination Type values are 1px Default, 2px Infinite, 3px Numbered, and 4px Auto. Infinite loading also has Click, Scroll, and Click-then-Scroll modes. Test pagination on label and search pages, not only on the homepage.
8. Add Google AdSense or Internal Banners
Plus UI's AdSense guide describes both theme-level ad integration and ad gadgets. Several Layout ad slots use Link List entries for AMP and non-AMP code.
- Complete the relevant AdSense account and site setup independently of the template.
- Open Blogger → Layout and locate the intended ad slot, such as an above-post or in-post gadget if present.
- Edit the entry with Site Name
noampand enter the appropriate non-AMP ad unit code in Site URL. - Save and inspect the resulting ad position on the live page.
amp entry is for the documented AMP variant, where supported.These same reserved positions may be useful for an internal promotional banner, provided the current version and gadget renderer accept its markup.
9. Connect Google Analytics
Plus UI can load Google Analytics when a GA4 measurement ID is supplied in Blogger settings or in the template's analytics.accountNumber XML variable.
- Find your Google Analytics 4 Measurement ID, usually beginning with
G-. - Add it through the supported Blogger setting, or set the
analytics.accountNumbervariable following the official guide. - Do not add a second manual Google tag unless you have confirmed that the template is not already loading it.
- Verify the installation through the Analytics Realtime or DebugView tools.
The plugin documents Normal, Defer, Lazy, and Defer + Lazy loading. Delaying analytics can affect when a visit is recorded, so consider measurement needs rather than choosing solely for a speed score.
10. Configure the Google Translate Widget
In Blogger → Layout, find the Google Translate Link List gadget. Plus UI uses its entries to define the available languages and defaults.
| Site Name | Site URL | Purpose |
|---|---|---|
system | Button label or # | Add a browser-language choice |
default | page or system | Choose the starting language |
| Language code | Language name | Add a selectable language |
To exclude a section of content from translation, the developer documents the notranslate class. The original blog language comes from Blogger settings.
11. Consider Progressive Web App (PWA) Support
The built-in PWA feature is documented as stable from Plus UI v3.2.0. It allows supported app-like installation behavior without requiring users to download a separate app from an app store.
If you want PWA functionality, review the current version's enablement and icon configuration in the official PWA guide; test installation on a real compatible device before promoting it to visitors.
12. Set Up Firebase Only If Needed
Firebase is required for some data-driven features, notably the Realtime Views Counter. It is not a prerequisite for every Plus UI installation.
- Create a Firebase project and register a web application in the Firebase Console.
- Enable the service required by the selected plugin, such as Realtime Database for view counts.
- Read the developer's current Firebase configuration guide
https://plus-ui.fineshop.app/2024/10/firebase.htmland apply appropriate, restricted database rules for your own project. - Configure the theme's related Firebase values and test the feature on a post.
13. Enable Safelink Redirects
Safelink was added in Plus UI v3.2. It routes selected outgoing links through a configured intermediate page.
- Open Customize → Advanced → Plugin: Safelink (Experimental).
- Enable the feature using the documented control.
- Create at least one Safelink page and set its pathname in the appropriate XML variable, such as
safelink.page1. - Add
safeLto the class of an outgoing link that should use the redirect; test the whole journey.
For instance, a link might have the classes button safeL. A Safelink page setting should contain a relative pathname such as /p/safelink.html, not the full site URL.
14. Review Built-in Widgets and Plugins
Plus UI provides several additional features. Some are enabled by default, while others depend on the template version or external configuration.
| Feature | Where to start |
|---|---|
| Bookmark Posts | Layout → Bookmark Posts Link List |
| Live Search | Customize → Advanced → Plugin: Live Search |
| Cookie Consent | Layout → Cookie Consent Link List |
| Realtime Views Counter | Set up Firebase, then configure Plugin: Views Counter |
The bookmark feature stores saved posts in the visitor's browser. Live Search is documented as available from v3.1 and stable from v3.2. Only enable features that serve a purpose on your site, and avoid duplicating functionality with extra scripts.
15. Use Plus UI's Post Tabs and Split Post
For unusually long posts, Plus UI offers two distinct presentation patterns:
- Tabs Post: places content into switchable tabs, useful for alternate languages or a separate download panel. The official documentation states a maximum of five tabs.
- Split Post: divides an article into multiple pages using a
postSplitwrapper and<!--nextpage-->separators.
Both require the structure documented for the relevant template version. Use HTML View in the Blogger editor for specialized markup, and avoid converting to Compose View afterward if it changes the code.
16. Helpful Plus UI Resources
The developer also provides an SVG icon library and a thumbnail-generation resource. When matching the theme's visual language, start with the official icon collection instead of mixing unrelated icon families.
For exact snippets, new version-specific settings, and more advanced customization, use the Plus UI resources https://plus-ui.fineshop.app/2024/10/resources.html and UI components reference https://plus-ui.fineshop.app/2024/10/components.html.
Frequently Asked Questions
Should I use Restore XML or a clean installation?
Restore XML is quicker, but previous gadgets can remain. The developer recommends the clean-install approach for a fresh setup of a specific version. Back up your theme and custom gadgets before attempting it.
Why do Plus UI settings use 1px, 2px, or 3px values?
Many controls in Theme Designer use length values as option selectors. Check the named setting's documentation to learn what each value means.
Do I need Firebase to use Plus UI?
No. Firebase is needed for particular features, such as the documented realtime view counter, rather than every part of the template.
Can I add Google Analytics without pasting its script?
Yes. Plus UI supports configuring a GA4 measurement ID through the documented settings or the analytics.accountNumber XML variable. Avoid duplicate tracking scripts.
Does the built-in PWA support offline pages and push notifications?
No. The developer explicitly lists offline pages and push notifications as limitations of its built-in PWA implementation.
How many tabs can a Plus UI post contain?
The Tabs Post guide documents up to five tabs. Use the developer's HTML structure for your installed version.
Why is my navigation different from the demo?
Menu behavior depends on whether you use the default HTML-based navigation, its Layout gadget, or the simpler Pages-based menu. Review the menu settings and existing gadgets before replacing code.
Can I enable every Plus UI plugin at once?
It is better to configure the essentials first and enable optional features individually. Some require additional services or are available only in certain Plus UI versions.
Final Setup Checklist
Plus UI is highly configurable, but the best setup is rarely the one with every feature switched on. Build a stable foundation first, then add only the enhancements your readers will actually use. If a feature behaves differently in your version, consult the corresponding official documentation https://plus-ui.fineshop.app/2024/10/installation.html before changing theme code.
