SeoSpeed Installation Guide for Blogger

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. SeoSpeed reads your blog’s language to translate its interface and set the page direction automatically: English runs left to right, Arabic flips the whole site to right to left.
3. Prepare your logo as a PNG or WebP with a transparent background, and a site icon of at least 32×32.
4. Have your Firebase details ready only if you’ll use sign-in, ratings and protected downloads (optional — see section 7).

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 SeoSpeed XML file you received after your purchase and upload it.
4. When Blogger asks to remove widgets the new theme doesn’t use, accept — that’s expected.
5. Open your site: the design appears immediately, and you set everything up from Layout and the Theme Designer.

Layout is SeoSpeed’s everyday control panel: it’s where you set up the logo, menus, zones, 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. It’s there for identification only and can’t be edited.
• Sections locked to a single gadget (such as Site Logo and Main Posts) 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 Link List or HTML gadgets written as key / value pairs — the key in the item’s text field, the value in its link field — or as a single code line.
• The zones (Top Full Zone, Top Posts Zone, Bottom Posts Zone, Bottom Full Zone) are rows of up to four equal cells each, for post blocks and ads; use the eye icon to hide a gadget.

4Site Logo: your logo

Click Edit on the 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.

5Pages Menu and Categories Menu

Pages Menu: the top pages bar

A Link List shown in the top bar. Add your static pages: About, Contact, Privacy, Terms, Sitemap and FAQs. AdSense looks for these pages when it reviews your site, so don’t skip them.

Categories Menu: the main menu (three levels)

The main navigation, usually label links such as /search/label/Label-Name. It supports three levels and a highlighted item, using markers at the start of the title; visitors never see them:

Home  =>  /
Templates  =>  /search/label/Templates
_Blogger Templates  =>  /search/label/Blogger-Templates
_WP Templates  =>  /search/label/WP-Templates
Tools  =>  /search/label/Tools
_AI Tools  =>  /search/label/AITools
Technology  =>  /search/label/Technology

6Share Tools, Language Icons and Subscribe

Share Tools & Social Media: your profiles

Add the full URL of each profile, starting with https://. The template recognizes the network from the link and shows its icon automatically — in the header (Share Tools) and the footer (Social Media).

Language Icons: the language bar

A Link List next to the header tools. The text is the language name (with a flag if you like), and the link is the address of your site in that language. One language only? Delete the items and the bar disappears.

🇬🇧 English  =>  https://www.example.com/
🇸🇦 العربية  =>  https://ar.example.com/
🇫🇷 Français  =>  https://fr.example.com/

Subscribe: the follow button

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

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

7Login Tool and Newsletter settings

Login Tool - Firebase Keys

The Login Tool gadget gives visitors an account through Google or a magic email link, and it powers post ratings and protected downloads. Put each key’s name in the text field and its value in the link field, and use the eye icon as the on/off switch:

Leaving these empty simply keeps sign-in off; the rest of the site works normally. Data stays yours: sign-in and ratings in Firebase, protected downloads in Firestore, favorites in the visitor’s browser.

Download buttons in your posts

The download button is already built into the template. For a protected download (sign-in required), the ID is a document in the Firestore downloads collection whose url field holds the file link:

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

For an open download, or a members-only one with a direct link:

<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>

Newsletter Settings

The Newsletter Settings gadget connects the subscribe bar to your own Google Sheet. Put each key in the text field and its value in the link field:

8Bell Popup: the announcement

An HTML gadget holding the announcement card’s code — or any ad or share code you prefer. The eye icon turns it on or off. The default content is a simple promo card you edit freely:

<div class="sp-promo">
  <h3>Big announcement!</h3>
  <p class="sp-promo-tag">Write your announcement here — or replace it with any code.</p>
  <a class="sp-promo-btn" href="/p/offer.html">Learn more</a>
</div>

9Homepage zones and the sp-posts code

The home page is built from named zones. The main ones:

Most zones are filled with one code, sp-posts, placed in an HTML/JavaScript gadget. It fills itself from your blog:

<div class="sp-posts" data-type="label" data-label="Templates" data-style="grid" data-count="4" data-title="Unique Templates"></div>

<div class="sp-posts" data-type="recent" data-style="cards" data-count="6" data-title="Latest Articles"></div>
<div class="sp-posts" data-type="random" data-style="minis" data-count="4" data-title="Picked for you"></div>
<div class="sp-posts" data-type="comments" data-count="5" data-title="Latest comments"></div>

10Above / Below Article zones

On article pages, four open zones let you place gadgets and ads: Above Article 1 & 2 (before the post) and Below Article 1 & 2 (after it). The Below Article 1 zone also holds the featured-post gadget by default. Use these for an in-article ad, a latest-comments block or a related block.

11The sidebar

The template restyles Blogger gadgets inside the sidebar to match the design and turns the archive into a dropdown. Whether the sidebar shows on the home page, on posts, on static pages and on phones is set in the Theme Designer.

12The ad system in Layout

Ads are managed from three gadgets. In each item, leave the item name as it is and put the value in the link field:

A value of 0 means the slot is off and leaves no empty gap. The AdSense library loads only after the visitor’s first interaction, so it doesn’t slow page load. You can also place a custom ad as an HTML gadget in any zone.

13Redirect settings

The Redirect Settings gadget routes outbound links through a clear exit page. Put each key in the text field and its value in the link field:

14The footer and the contact form

The copyright line at the very bottom, and the Tooliqo logo beside it, are protected and can’t be removed or hidden.

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>

15How to open it and read its options

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

16Widths, colors and fonts

The three brand colors build the gradient used in headings, buttons, the ticker and accents. Change just these three and your whole site takes on a new identity.

17Header style, bars and tools

18Homepage, sidebar and basics

19Article features and ads

20Ready-made recipes

21Where to find it, and its golden rule

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

BUYER ZONE

22[1] Site verification

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='dmca-site-verification'/>

23[2] Default post image

The image shown for posts that have none. Replace YOUR CODE with a full URL, or leave it to keep the template’s built-in file-style image:

window.TLQ_USER.FALLBACK_IMAGE = 'YOUR CODE';   /* https://example.com/default-image.webp */

Use an image starting with https://; a 1200×630 WebP or JPG works well.

24[3] AdSense ID & [5] Auto Ads

Slot [3] holds your publisher ID — the ID only, not the long AdSense code:

window.TLQ_USER.ADSENSE_CLIENT = 'ca-pub-XXXXXXXXXXXXXXXX';

Slot [5] turns Auto Ads on or off. The template builds the code itself and loads the library after the first interaction.

25[4] Google Analytics

window.TLQ_USER.ANALYTICS_ID = 'G-XXXXXXXXXX';

Optional: left on YOUR CODE it doesn’t load, and a filled-in ID loads after the first interaction or when the browser is idle, so it doesn’t slow page load.

26[6]–[9] Config, CSS, JS, head code

For your own styles, put them between the style tags in slot [7]:

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

27Pre-launch checklist

• A backup of your old theme, saved with its date.
• The verification codes you need in [1], and your publisher ID in [3] or the AdSense gadget.
• Logo, menus and social links set up in Layout.
• The three brand colors match your identity, and each bar’s contrast is readable.
• Every home block 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.
• Firebase keys added only if you’re using sign-in, ratings or protected downloads.
• You’ve tested the site on desktop and on a phone, in light and dark mode, and run a PageSpeed check.

Tools and guides to finish your setup