Guide to Installing the "Read Rich" Template on 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. Read Rich 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. 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 9).

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 Read Rich 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 Read Rich’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. It’s there for identification only and can’t be edited.
• Sections locked to a single gadget (such as Logo and Main 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 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 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.

4Logo: your logo

Click Edit on the Header gadget in the Logo section, then type your blog name or upload your logo image. The template keeps the book icon and shows your name in your brand color, with a “Tooliqo Blogger Template” subtitle you can change from the gadget.

5Top Pages Menu and Welcome Strip

Top Pages Menu: the top bar

A Link List gadget shown 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 colors are set in the Theme Designer (Pages Bar group).

Welcome Strip: a greeting above the menu

An HTML gadget for a short welcome line, a notice or a promotion, shown site-wide above the menu. Edit the text, or clear it, from the gadget; its background color is welcome.bg in the Theme Designer.

6Categories Menu: three-level menu

The Categories Menu gadget is a Link List for your main navigation, usually label links such as /search/label/Label-Name. It supports three levels and a highlighted item, using markers you add at the start of the title; visitors never see them:

Home
Tools
+Web Tools
+AI Tools
Templates
*Blogger Templates
+WordPress Templates
Tutorials
Guides

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

7Main Menu and the mega panel

The Main Menu gadget feeds both the desktop menu bar and the mobile slide menu. Each item is a title and a link. One special link turns a menu item into a full-width mega panel of posts:

{mega} $label={recent}

Use $label={recent} for your latest posts, or a label name for a specific category. The categories icon, the Articles panel and the Most-Read panel all open in this mega area, with their titles hidden for a clean header.

8Social Links, Language Menu and panels

Social Links: your social profiles

Add the full URL of each profile, starting with https://. The template recognizes the network from the link and shows its icon directly in the pages bar: Facebook, X, YouTube, Instagram, WhatsApp, Telegram and more.

Language Menu: the language switcher

A Link List next to the follow button. The text is the language name (with a flag if you like), and the link is the address of your site in that language. If your site is one language only, delete the items and the switcher disappears.

🇬🇧 English   →  en   (or the full URL of your English site)
🇸🇦 العربية   →  ar
🇫🇷 Français  →  fr

Section Cards Panel and Most Read Panel

Two mega-menu panels: the Section Cards Panel (an HTML gadget holding the category-cards code — see section 12) and the Most Read Panel (a Popular Posts gadget). Both open from the header and carry no title.

9Login Tool: sign-in (Firebase)

The Login Tool gadget gives visitors an account through Google or a magic email link, and it powers post ratings and protected download buttons. It only works once you fill in the four keys from your own Firebase project; 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. You choose where data lives: 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 — no form or script to add. 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="Read-Rich-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>

10Bell Announcement and Search Band

Bell Announcement: the announcement bell

An HTML gadget in the header, 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 looks like this:

<div class="tq-ann">
  <h3>Big announcement!</h3>
  <p>Write your announcement here — or replace this whole content with any ad or share code.</p>
  <a class="tq-ann-btn" href="#">Learn more</a>
</div>

Search Band: the hero search text

The Search Band gadget sets the heading and subheading of the big search band under the menu. Put each key in the text field and its words in the link field:

11Homepage areas and the post blocks

The homepage is built from named bars in Layout. The main ones:

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

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

<i class='posts-from' data-type='overlay' data-number='3' data-label='Tutorials' data-title='Latest Tutorials'></i>
<i class='posts-from' data-type='timeline' data-number='6' data-label='Technology' data-title='Technology World'></i>
<i class='posts-from' data-type='ticker' data-number='10' data-title='Breaking'></i>
<i class='posts-from' data-type='random' data-number='4' data-title='Posts you might like'></i>

12Category cards and latest comments

Category cards

A colorful category-cards block for the home page (and the header’s Section Cards Panel). Each <ul> is a card with a title, a color and its links:

<div class="tq-cards" data-cols="4">
  <ul data-title="Blogging" data-color="#ffe1e6">
    <li><a href="/search/label/Templates">Blogger Templates</a></li>
    <li><a href="/search/label/Widgets">Widgets</a></li>
  </ul>
  <ul data-title="SEO" data-color="#e3f6ea">
    <li><a href="/search/label/OnPage">On-Page SEO</a></li>
  </ul>
</div>

A sidebar labels gadget can also take a skin by adding its name in brackets at the end of the gadget title: [cat-tiles], [cat-pills], [cat-rows], [cat-duo], [cat-numbered] or [cat-bars].

Latest comments

Show your most recent comments wherever you like — under articles or in the sidebar:

<i class="comments-from" data-number="5"></i>

13Post area and the featured post

The post area is a single open bar above the articles and a single one below them (sections “In Posts Above” and “In Posts Below”), for ad slots, a latest-comments block or any gadget you want on article pages. The featured post on the home page appears as a wide horizontal card — image on one side, title beside it — and needs no setup.

14The 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 homepage, on pages and on phones is set in the Theme Designer. The translate gadget keeps English available as an option.

15The ad system in Layout

Ads are managed from three gadgets. In each item, put the key in the text field and the value in the link field:

A value of # means the slot is off, and an off slot leaves no empty gap. Each slot accepts an AdSense unit or your own custom ad HTML, and the AdSense library only loads after the visitor’s first interaction, so it doesn’t slow page load. You can also add a custom ad as an HTML gadget in any home or post bar.

16Redirect page settings

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

17The 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 — that’s the trade for the licence.

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>

18Text codes you can use anywhere

Besides the <i class='posts-from'> tag, Read Rich understands short text codes you can type straight into a post or page — the template turns them into live blocks:

You can also turn any link into a button or framed card by setting the Article Link Style option in the Theme Designer (see section 20); it applies to links that sit alone on their own line.

19How 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.

20Theme Options: the feature switches

The first group, Theme Options, is where you turn whole features on and off and set a few counts.

21Widths, fonts and colors

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.

22Header and categories menu

23Pages bar, hero, footer, copyright

Four bars share the same pattern: a show/hide switch, a color source (1 custom below, or 2 your brand color), then the custom colors.

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 numbered slots, that gathers what’s specific to your site: verification codes, analytics, social IDs, default images and a few feature switches. Open Theme → Edit HTML, press Ctrl + F (Cmd + F on a Mac) and search for:

BUYER ZONE

It runs from BUYER ZONE - START to BUYER ZONE - END.

26[1] & [2] Verification codes

Ready-made tags. Put your code inside the content='' of only the tags you need, and leave the rest empty:

<!-- [1] -->
<meta content='YOUR CODE' name='google-site-verification'/>
<meta content='YOUR CODE' name='msvalidate.01'/>
<meta content='YOUR CODE' name='p:domain_verify'/>
<meta content='YOUR CODE' name='yandex-verification'/>

<!-- [2] -->
<meta content='YOUR CODE' name='facebook-domain-verification'/>
<meta content='YOUR CODE' name='norton-safeweb-site-verification'/>

27[3] Analytics

  analyticsId   : "",
  gtmId         : "",
  clarityId     : "",

All optional: anything left empty doesn’t load, and filled-in IDs load after the first interaction or when the browser is idle, so they don’t slow page load.

28[4] Social IDs

  fbAppId       : "",
  twitterSite   : "",

fbAppId is your Facebook app ID if you have one, and twitterSite is your X handle, like @username. Both optional.

29[5] Default images

  defaultImage  : "",
  authorImage   : "",
  logoAlt       : "",

30[6] Feature switches

  cleanMobileUrl : true,
  lazyComments   : true,
  backToTop      : true

Write true to turn one on and false to turn it off; don’t remove the comma at the end of a line.

31Pre-launch checklist

• A backup of your old theme, saved with its date.
• The verification codes you need in [1]/[2], and your publisher ID in 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 both light and dark mode, and tried the view switcher and voice search.

Tools and guides to finish your setup