How to Install the Blog Plus Blogger Template Step by Step

1Before you start: prepare your blog

1. Back up your current theme: in your Blogger dashboard, open Theme, click the arrow next to Customize, then choose Backup. Save the file with today’s date in its name.
2. Set your blog language: under Settings → Basic → Blog Language. The template reads your blog’s language to translate its interface and set the page direction automatically: pick English and everything runs left to right; pick Arabic and the whole site flips to right to left.
3. Have your blog ID ready for license activation: you’ll find it in your Blogger dashboard URL, right after blogger.com/blog/posts/.
4. Prepare your logo as a PNG or WebP file with a transparent background, a site icon of at least 32×32, and, if you want one, a 180×180 icon for Apple devices.

2Upload the template file to Blogger

1. Open your Blogger dashboard and go to Theme.
2. Click the arrow next to the Customize button and choose Restore.
3. Select the template’s XML file you received after your purchase and upload it.
4. Open your site. You’ll see the activation screen, and that’s normal: the template is waiting for the license token you’ll add in the User Zone (Part 3, in the license section).

Layout is Blog Plus’s everyday control panel: it’s where you set up the logo, menus, bars, ads, homepage and footer without touching any code. Open it from Blogger dashboard → Layout; we’ll walk through it from the top of the page to the bottom.

3General rules before you start

• The version bar at the top of Layout shows the template name and version (Tooliqo: Blog-Plus / V9.1.8). It’s there for identification only and can’t be edited.
• Sections locked to a single gadget (such as Site Logo and Sections Menu) don’t accept new gadgets; that’s deliberate, to protect the template’s structure. Sections that show Add a Gadget are yours to use.
• Settings gadgets are written as key: value, one line per key. A line that starts with # is a comment the template ignores.
• The eye icon next to a gadget shows or hides it. Some gadgets use it as their on/off switch; we’ll point them out as we go.

4Site Logo: your logo

Click Edit on the Blog-Plus Template (Header) gadget in the Site Logo section, then type your blog name or upload your logo image. The template loads the logo early, so it appears quickly and doesn’t cause layout shift.

5Links Menu: the top pages bar

A Link List gadget displayed in the colored bar at the top of the site. Add your static pages here: About, Contact, Privacy Policy, Terms and FAQ. AdSense looks for these pages when it reviews your site, so don’t skip them.

The bar’s background and text colors are set in the Theme Designer: pagesBarBg and pagesBarText.

6Sections Menu: the main menu and its submenus

The main menu under the logo. Each item has a title and a link, usually a label link such as /search/label/Label-Name. The menu supports three levels and a highlighted item, using markers you add at the start of the title; visitors never see them:

*Home
Tools
Technology
Templates
*Blog-Plus
+Explanation File
++Template Explanation
++Template Installation
+Licensing File

On desktop, submenus open on hover; on phones, they open inside the side menu.

7Social Links, Follow Us and languages

Social Links: your social profiles

Add the full URL of each profile, starting with https://. The template recognizes the network from the link and adds its icon automatically: Facebook, X, YouTube, Instagram, WhatsApp, Telegram, TikTok, LinkedIn and more. Any network it doesn’t recognize gets a generic icon.

Follow Us (link): the follow button

An HTML gadget holding a single link: your blog’s Blogger follow link. Replace the placeholder with your blog ID:

https://www.blogger.com/followers/follow/YOUR-BLOG-ID

Languages: the language switcher

A Link List shown next to the follow button. The title is the language name, and the link is the address of your site in that language. If your site is in one language only, delete the items and the switcher disappears.

8Login Tool: sign-in (Firebase)

This gadget gives your visitors an account through Google or a magic email link, and it powers post ratings and locked download buttons. It only works once you fill in the four keys from your own Firebase project, and the eye icon is its on/off switch:

apiKey: #
authDomain: #
projectId: #
appId: #

The value # means “empty”. Once your Firebase project is set up, copy the values from your web app’s settings and paste them in place of the # signs.

Protected file links aren’t written in the template but in the downloads collection in Firestore; you then call them from a post with a button like this:

<a class="tq-btn" data-tq-file="Blog-Plus-Free" style="cursor:pointer">Download the file</a>

Here Blog-Plus-Free is the document ID in the downloads collection, and that document holds a url field with the file’s link. For an open download, or a members-only one with a direct link, use:

<a class="tlq-cta-btn" data-tq-file="https://example.com/file.zip">Download</a>
<a class="tlq-cta-btn" data-tq-lock="1" data-tq-file="https://example.com/file.zip">Download (members)</a>

9Bell Announcement: the announcement bell

A bell icon in the header that opens a short announcement card with two buttons. The eye icon turns the gadget on or off, and the value text: # also hides the bell:

title: Blog Plus - Now Free
text: The premium blogging template, free for everyone.
link: /2026/09/free-blog-plus.html
button: Get it free
icon: fa-solid fa-download
link2: /p/templates.html
button2: See all templates
icon2: fa-solid fa-grip
style: gradient
badge: fa-solid fa-gift

Icons use Font Awesome names such as fa-solid fa-rocket or fa-brands fa-whatsapp. The red dot on the bell comes back every time you change the title or the text.

10News Ticker Bar: the breaking news ticker

A scrolling bar that shows the titles of your latest posts, configured with a single line:

<div class='tlq-ticker' id='tlq-ticker' data-show='on' data-max='10' data-speed='55'></div>

11Post tools: ratings, comments, Google and redirects

Article Rating: post ratings

enabled: true
title: Rate this article
thanks: Thanks for rating!

enabled: false hides the whole rating box. Ratings need the sign-in gadget turned on to save votes, and the star color comes from the Theme Designer (rateStar).

Comment Form Message: the comments message

Free text shown above the comment form, such as an invitation for readers to share their opinion. Write it in your own language.

Follow on Google bar: following on Google

enabled: true
url: https://www.google.com/preferences/source
title:
subtitle:
button:
where: post

Leave title, subtitle and button empty and the template writes them in your blog’s language. where accepts post (inside posts), home (on the homepage) or both.

External Links Redirect: redirecting outbound links

enabled: true
page: /p/redirect.html
protect: true
in_post: true
new_tab: true
delay: 5

12The hero area: slider, text, buttons and media

The hero is the first thing visitors see on the homepage. It’s made of five independent sections: Hero · Slider, Hero · Text, Hero · Buttons, Hero · Media and Hero · Custom Ad. Turn on what you need with the eye icon.

Hero · Slider: the slider

<i class='slider-from' data-type='hub' data-label='random' data-number='6' data-speed='5' data-show='on'></i>

<i class='slider-from' data-type='hub' data-label='recent' data-number='6' data-tiles='Technology,Tools,Tutorials,Templates' data-show='on'></i>

The hero’s size and render timing are set in the Theme Designer: sliderSize and heroDefer.

Hero · Text: the text

Off by default. Turn it on with the eye icon and write your headline and description. The grad class paints the text in your brand gradient:

<h2><span class="grad">Welcome to my blog</span></h2>
<p class="lead">A short description of what your blog offers.</p>

Hero · Buttons: the buttons

<a class="btn btn-primary btn-lg" href="#latest-articles"><i class="fa-solid fa-compass"></i> <span>Browse Articles</span></a>
<a class="btn btn-primary btn-lg" href="#HTML16"><i class="fa-solid fa-envelope-open-text"></i> <span>Subscribe</span></a>

The #latest-articles link scrolls down to your latest posts, and #HTML16 scrolls to the newsletter box.

Hero · Media and Hero · Custom Ad

Hero · Media holds an image or banner as wide as the hero (off by default), and Hero · Custom Ad holds your own ad code in the hero area.

13Homepage areas and the posts-from code

Most of these sections are built with a single code, posts-from, which you place in an HTML/JavaScript gadget:

<i class='posts-from' data-type='grid' data-number='4' data-label='Templates' data-title='Unique Templates'></i>

<i class='posts-from' data-type='mosaic' data-number='5' data-label='Tutorials' data-title='Latest Tutorials'></i>
<i class='posts-from' data-type='carousel' data-number='8' data-label='Technology' data-title='Technology World'></i>
<i class='posts-from' data-type='list' data-number='4' data-label='Tools' data-title='Latest Tools'></i>
<i class='posts-from' data-type='random' data-number='4' data-title='Posts you might like'></i>

Latest comments

<i class="latest-comments" data-number="3"></i>

Newsletter (Homepage Bars)

The Subscribe to our newsletter gadget is a form that sends email addresses to Google Forms. Create a form with an email field, then replace the action URL and the entry number with your form’s values:

<form action="https://docs.google.com/forms/d/e/YOUR_FORM_ID/formResponse" id="news-form" method="POST">
  <input type="email" name="entry.YOUR_FIELD_ID" required="required"/>
  <button type="submit">Subscribe now</button>
</form>

14The sidebar

The template restyles Blogger gadgets inside the sidebar so they match the design, and turns the archive into a dropdown. Whether the sidebar shows on the homepage, on pages and on phones is set in the Theme Designer (Part 2).

15The ad system in Layout

AdSense ads are managed from three Link List gadgets. In each item, leave the title as it is and put the value in the link field:

A value of 0 means the slot is off, and an off slot leaves no empty gap. The AdSense library only loads after the visitor’s first interaction, so it doesn’t slow down page load.

16The footer and the contact form

The credit line at the very bottom of the site is protected and can’t be removed; what you edit in the Site Credit gadget is only the editable sentence.

Showing the contact form on a page

Create a “Contact” page and, in the page’s HTML view, put this line where you want the form to appear:

<div class="tq-contactus"></div>

17Gadgets that work without showing in Layout

Some gadgets are deliberately hidden from the Layout editor to keep it uncluttered, and they work with their default values as soon as the template is installed:

To change one of these values, open Theme → Edit HTML, search for the value itself (for example scope: standalone), edit it and save. For the link buttons, shape accepts solid or outline, and scope accepts standalone (links that sit alone on their own line) or all (every link).

18How to open it and read its options

From your Blogger dashboard: Theme → Customize → Advanced. You’ll find a dropdown with fourteen groups, and every change shows up in the preview right away, before you save.

19Colors, font and width

The three brand colors are the template’s most important options: they build the gradient used in headings, buttons, underlines and view icons. Change just these three and your whole site takes on a new identity.

20The header, light and dark surfaces

21The homepage

22The sidebar

Label pages and the “Load more” page always display full width, with no sidebar, whatever these settings say.

23Posts, the author box and site icons

The author box fills itself from your Blogger profile: photo, name and bio. Update your profile and the box shows exactly what you want.

24Ready-made recipes

25Where to find it, and its golden rule

The User Zone is an open block at the top of the template file, split into ten numbered slots, that gathers everything specific to your site: the license, verification codes, AdSense, analytics and your own styles. Open Theme → Edit HTML, press Ctrl + F (Cmd + F on a Mac) and search for:

TOOLIQO USER ZONE

The zone starts with the line <!-- TOOLIQO USER ZONE --> and ends with <!-- END USER ZONE -->.

26[1] THEME LICENSE ACTIVATION: activating your license

1. Open the activation portal and sign in with the email you used to buy.
2. Enter your blog ID and copy the token the portal gives you.
3. In Edit HTML, search for THEME LICENSE ACTIVATION and replace the text between the quotes with your token:

window.TLQ_LICENSE_TOKEN = 'Paste your license token here';

Save the theme and refresh your site: the activation screen disappears. The token is permanent and tied to your blog and your email.

27[2] SITE VERIFICATION: verification codes

Six ready-made tags. Put your code in place of YOUR CODE only in the tags you need, and leave the rest as they are:

<meta content='YOUR CODE' name='google-site-verification'/>
<meta content='YOUR CODE' name='google-adsense-account'/>
<meta content='YOUR CODE' name='msvalidate.01'/>
<meta content='YOUR CODE' name='yandex-verification'/>
<meta content='YOUR CODE' name='p:domain_verify'/>
<meta content='YOUR CODE' name='dmca-site-verification'/>

28[3] DEFAULT IMAGES: fallback images

window.TLQ_USER.FALLBACK_IMAGE="YOUR CODE",window.TLQ_USER.SHARE_IMAGE="YOUR CODE"

Use a full URL starting with https://. Suggested size: 1200×630, in WebP or JPG, with no small text that might get cropped.

29[4] ADSENSE ID and [6] AUTO ADS

window.TLQ_USER.ADSENSE_CLIENT="YOUR CODE"

Enter only your publisher ID, in the form ca-pub-XXXXXXXXXXXXXXXX, not the long AdSense code. The template builds the code itself and loads the library after the visitor’s first interaction.

Auto ads are off by default. To turn them on, change !1 to true in slot [6]:

window.TLQ_USER.AUTO_ADS=true

30[5] ANALYTICS: analytics

window.TLQ_USER.ANALYTICS_ID="YOUR CODE",window.TLQ_USER.GTM_ID="YOUR CODE",window.TLQ_USER.CLARITY_ID="YOUR CODE"

All optional: anything left on YOUR CODE doesn’t load. Filled-in IDs load after the visitor’s first interaction or when the browser is idle, so they don’t slow down page load.

31[7] SOCIAL META: share cards

window.TLQ_USER.FB_APP_ID="YOUR CODE",window.TLQ_USER.TWITTER_SITE="YOUR CODE"

FB_APP_ID is your Facebook app ID if you have one, and TWITTER_SITE is your X handle, in the form @username. Both are optional.

32[8] FEATURE SWITCHES: feature switches

window.TLQ_USER.CLEAN_MOBILE_URL=!0,window.TLQ_USER.READING_BAR=!0,window.TLQ_USER.BACK_TO_TOP=!0

In the minified code, !0 means “on” and !1 means “off”; you can write true and false instead.

window.TLQ_USER.READING_BAR=false

33[9] CUSTOM CSS and [10] CUSTOM HEAD CODE

Put your own styles between the style tags in slot [9], instead of editing the template code directly:

<style>
.post-body{font-size:17px}
</style>

Slot [10] is disabled inside a comment and is meant for any extra code in the page head. Move what you need out of the comment, or add your own code after the comment’s last line:

<!-- [10] CUSTOM HEAD CODE
<meta content='YOUR CODE' name='custom-meta'/>
<link href='https://example.com/custom.css' rel='stylesheet'/>
-->

34Pre-launch checklist

• A backup of your old theme, saved with its date.
• Your license token in [1], and the activation screen is gone.
• The verification codes you need in [2], and your publisher ID in [4] or in the Layout gadget.
• Logo, menus and social links set up in Layout.
• The three brand colors match your identity, and the top bar’s contrast is readable.
• Every homepage section shows real posts, and the label names match.
• About, Contact and Privacy pages are published, plus the redirect page if you turned that gadget on.
• You’ve tested the site on desktop and on a phone, in both light and dark mode.

Tools and guides to finish your setup