Pixonic Blogger Template: Complete Setup Guide

This guide explains how to customize Pixonic Blogger Template on Google Blogger, from header navigation and homepage sections to sidebar gadgets, post settings, and footer links. Work through one section at a time and check the public blog after saving each change.

Layout features covered for Pixonic: a featured-post area, manually configured category cards. Configure these in the sections supplied by this template rather than adding gadgets from a different theme.

Before you start: back up and prepare your blog

1. Select the correct blog in Blogger. Open Theme, use the menu beside Customize, and choose Backup to download the current theme.
2. Save the contents of important HTML/JavaScript and Link List gadgets separately. A theme change can affect your gadget arrangement.
3. If you are installing the theme for the first time, extract the downloaded package and use its Blogger theme XML file in the Theme restore/upload option. Keep any existing custom code before replacing the theme.
4. Publish a few sample posts with images and labels. Feed-based homepage sections need published content to display.
5. Open the blog in another tab. After each gadget edit, save it and reload that tab to confirm the result.

For the backup workflow, see Blogger’s theme and content backup instructions. A theme backup and a content backup serve different purposes.

Add your header logo and optional dark logo

1. Open Layout and edit Header Logo.
2. Replace the sample image with your own logo. Use a clear, compressed image sized for the header instead of a large photograph.
3. Check the title and caption fields before saving. Keep the blog name accurate even when you display an image logo.
4. For the optional dark-logo setting, upload the alternate image, copy its direct image URL, and paste it into the gadget’s link field shown in the reference. Test the logo on both light and dark backgrounds.
5. Save the gadget and check the header at desktop and phone widths.

Build your navigation menu

Add main links and dropdowns

1. In Layout, edit Header Menu. Add the visible link text and its destination URL.
2. Place each parent link before its children. Prefix a first-level dropdown title with one underscore; use two underscores for a child inside that dropdown.
3. Arrange the entries in the intended menu order, save the list, and test every destination.
4. Open the mobile menu and make sure long labels and nested links remain easy to tap.

Features
_Getting Started
__Installation
_Contact

The underscores control the menu hierarchy; they are not part of the destination URL. Keep related links together under the correct parent.

Add icons to menu links

Use the icon format that matches the icon library loaded by your installed theme. The reference contains examples from different icon libraries, so keep the markup consistent with the version you use.

<span class="material-symbols-rounded">toggle_on</span> Features

Create a mega menu

Edit a top-level menu item and put one of these theme shortcodes in its URL field. Choose recent posts, random posts, or posts carrying a particular label.

megamenu/recent
megamenu/random
megamenu/Your Label

Configure the featured posts area

1. Open the Featured Posts section in Layout and edit its HTML/JavaScript or Popular Posts gadget.
2. For the HTML/JavaScript option, set the title and enter one of the examples below in the content field.
3. For the Popular Posts option, set the time range, post count, and image options in the Blogger gadget.
4. Save and check the section on the homepage. If the grid is incomplete, confirm enough eligible posts exist.

featured/recent
featured/random
featured/Your Label

Use the gadget type already supplied for this area. The HTML/JavaScript option selects a feed; Popular Posts uses Blogger’s popularity selection.

Create the custom category cards

1. Open Layout > Custom Categories Section and edit one of its image gadgets.
2. Enter the category title, replace the sample image, and set its destination to the relevant label archive or landing page.
3. Update the caption if that field is used by your version. Choose short labels that remain readable on small screens.
4. Repeat for the remaining cards, save their order, and check that each card opens the correct category.

These are manually configured category cards. Give each one its own useful destination rather than sending every card to the homepage.

Arrange the homepage content blocks

In Layout, find the Content Blocks Section area and edit or add its HTML/JavaScript gadgets. Each gadget defines one content section: its title labels the section and its content selects the layout and post feed.

1. Choose one of the supported layout examples below. Keep the shortcode structure exactly as shown.
2. Replace the final recent segment with random or an exact post label when that feed is wanted.
3. Change a numeric result count only for layouts whose documented shortcode already includes a number.
4. Save one block and check its result before configuring the next.

Supported layout examples

Grid

6/grid/recent

Set the main post list and article details

Open Layout > Main Recent Posts / Blog Posts. Choose how many posts appear on the main page and review the visible post details. Save the gadget and inspect both a homepage listing and a complete article.

Hide the main-list title when needed

The supplied reference uses this marker in the Read More / Post page link text field to hide the theme’s main-list title. Use it only when that is the intended layout.

(hide)

Choose Blogger or Disqus comments

In Blog Posts > Comment Format, enter one of these settings. For Disqus, replace the shortname with the one belonging to your own site.

#type=(blogger)

#type=(disqus) #shortname=(Your Shortname)

Review labels, author text, and dates

1. Edit Labels Prefix to change the text before your post labels, or turn the labels display off.
2. Use Author Format to change the author prefix and its display switch to show or hide the author name.
3. Choose the published-date format and use its switch if you want to hide the date.
4. For native Blogger comments, the reference shows supported image/video URLs pasted into comments. Test a supported link before relying on that display.

Show relevant related posts

Edit the Related Posts HTML/JavaScript gadget in Layout. Give the section a useful title and choose the selection method below. The first number is the requested post count; default asks the theme to match the current article.

3/related/default
3/related/recent
3/related/random
3/related/Your Label

Save and open a published article to check the result. If there are too few related items, add consistent labels to your posts and confirm enough eligible articles are public.

Add advertising to posts and pages

Edit Layout > Ad Code for Posts/Pages and paste the ad code supplied by your provider. Review the gadget’s display options for automatic article placements.

Place or hide an ad in an individual article

Insert (ads) at the paragraph break where you want a manual placement. To suppress the theme’s ads for a particular post, use (hideAds) in that post.

(ads)

(hideAds)

Create post, download, product, and custom cards

The theme’s card markup goes in the text field of a Blogger link. Create or edit a link in a post or page, enter a card shortcode as its text, and set the destination separately. Use your real file, product, or article URL.

1. Choose the card type that fits the destination.
2. Replace the example title, information, and button text with accurate details.
3. Set the link destination and choose whether it should open in a new window.
4. Save and preview the card, then test its button.

Post card

(getCard) #type=(post) #title=(You might like)

The supplied post-card example uses a placeholder such as # or / in the link field so the theme can handle its post selection. Preview the result in your installed version.

Download card

(getCard) #type=(download) #title=(Pixonic Template ZIP) #info=(File details) #button=(Download)

Product card

(getCard) #type=(product) #title=(Pixonic Premium Template) #info=(Current price) #button=(View product)

Custom card

(getCard) #type=(custom) #title=(Useful resource) #info=(Resource details) #button=(Open) #icon=(download)

Replace descriptive placeholders such as File details and Current price before publishing. Use the icon identifier format supported by your theme version.

Split a long article into pages

To use the theme’s content pagination, insert the following marker between sections of a Blogger post. Repeat it at each intended page break, then preview every page and the navigation buttons.

(nextPage)

Keep complete paragraphs, images, and cards together. Add page breaks only where they make a long guide easier to follow, and test that readers can reach the final section.

Set your author biography and social links

1. Open Blogger Settings > Edit Profile and review your display name, photo, and introduction.
2. Write a short biography describing your experience or the subject of the blog.
3. Where the theme reads social links from the introduction, add your profile links using the format below.
4. Return to Layout > Blog Posts and enable Show Author Profile if you want the biography box visible.

Write a short introduction about yourself.
<a href="https://www.facebook.com/YOUR-PAGE">facebook</a>
<a href="https://www.instagram.com/YOUR-PROFILE/">instagram</a>
<a href="https://www.youtube.com/@YOUR-CHANNEL">youtube</a>
<a href="https://example.com/">external-link</a>

Replace every sample URL and account name with your own information. The visible anchor text supplies the icon identifier, so use a supported lowercase name. Save the profile and inspect the biography on a public article.

Review the legacy Facebook integration options

A Facebook Page embed and an article comment system are separate features. If a Page widget is currently available for your account, generate fresh embed code for your own Page and use an HTML/JavaScript gadget. Avoid copying the old SDK URL or demonstration Page from a screenshot.

Review Meta’s Page plugin documentation before using this optional integration. If your theme loads the SDK automatically, avoid adding another copy.

Add sidebar social links

Edit Layout > Social Widget or the supplied social Link List. Add each network as an item with its supported lowercase identifier and your full profile URL. Keep only the accounts you actively maintain, arrange their order, and test the icons after saving.

Common identifiers shown in the references include facebook, instagram, youtube, pinterest, linkedin, telegram, github, rss, and whatsapp. Use only identifiers supported by your installed theme; older and newer versions can differ.

Connect the email subscription box

1. Create a hosted signup form with your email service and copy its public subscription URL.
2. Open Layout > Follow by Email and replace the demonstration subscription URL with your own.
3. Keep the theme’s subscription marker in its text/content field. Add title and caption settings only when you want to override the defaults.
4. Save and perform a real test signup using your own form. Confirm that the subscriber reaches the right list and receives any confirmation required by your service.

(sibForm) #title=(Follow by Email) #caption=(Get new posts in your inbox)

Choose the sidebar posts feed

Edit Sidebar Posts or the supplied Most Loved / Most Recent gadget in Layout. Set its visible title and enter one feed shortcode in its content field.

3/sidebar/recent
3/sidebar/random
3/sidebar/Your Label

The first number requests the post count. Use recent, random, or an exact label to select the articles. Save and check that the sidebar remains useful beside both short and long posts.

Display recent comments in the sidebar

Open Layout > Comments Section and edit its HTML/JavaScript gadget. The supplied screenshot uses the following format; adjust the number if you want a different count.

4/comments/show

Save and check a page containing the sidebar. If nothing appears, confirm that there are published comments and that the blog feed is enabled. This widget is separate from the comment system shown underneath an article.

Set your footer social links

Edit the social Link List in the Footer Section. Replace the sample accounts with your own profile URLs and use the supported lowercase network identifiers as names. Remove unused entries, save, and verify that the footer icons have working destinations.

Build the footer page menu

Open Layout > Footer Menu / Footer Pages. Add useful pages such as About, Contact, and the policy pages relevant to your blog. Use each page’s actual URL, arrange the list, and save. Test the links from a phone as well as a desktop browser.

Update the footer copyright

Edit Layout > Footer Copyright and replace editable sample site details with your blog’s name and link. Keep any required developer credit in place for the edition you use. The supplied reference reserves credit removal or replacement for editions that permit it.

Configure the cookie notice

Edit Layout > Cookies Consent. Write a clear notice, set the link to your own relevant policy page, and adjust the button label and reminder period using the documented settings.

#buttons=(Accepted!) #days=(20)

The days value controls how long the notice remembers the choice. Check the notice in a fresh browser session. This display option does not by itself configure how all third-party scripts respond to a visitor’s choice.

Adjust layout options and dark mode

Open Theme > Customize and find the layout variables supplied by the template. The reference documents boxed mode, sticky header, sticky sidebar, and native dark mode, with 1 and 0 used to enable or disable the corresponding options.

1. Change one option at a time and apply the setting.
2. For a sticky header or sidebar, check a long page to confirm it does not cover links or the footer.
3. Check logo contrast, text readability, and buttons in both light and dark modes.
4. Preview the mobile layout before finalizing the settings.

Review Load More and pagination variables

Open Layout > Json Variables. Keep the existing variable names and code structure shown by your installed theme. Adjust the values used for the Load More post count and pagination, then save the gadget.

Start by saving a copy of the existing content. Change a single value, reload the homepage, and use Load More until you reach the last results page. If pagination fails, restore the previous values before making another change. Do not replace this gadget with unrelated JSON.

Set the feed mode required by this template

Open Blogger Settings > Site feed > Allow blog feed. The supplied Pixonic reference specifies Short for this template generation. Save that setting, then retest the mega menu, homepage feeds, sidebar posts, and recent comments.

See Blogger’s settings reference for the platform’s feed controls. The appropriate Full or Short choice depends on the theme’s feed implementation.

Customize colors, fonts, and background

Open Theme > Customize and review Background, Colors, and Advanced. Adjust the available font, menu, widget, and footer options so they work together.

1. Choose a small set of colors and use a clear accent for links and buttons.
2. Select readable body and heading fonts. Avoid very small text or low-contrast combinations.
3. Check the homepage, a label archive, and a full article after applying your changes.
4. Review image crops and long titles on mobile. Use the preview to correct spacing before applying more changes.

Make the finished blog easier to find and use

1. Write a clear blog title and a concise description of its topic. Confirm that Blogger’s search-engine visibility setting matches your publishing intent.
2. Give each article a descriptive title and a useful introduction. Use headings to organize long content rather than repeating keywords.
3. Choose readable, relevant post URLs and link related articles where those links help readers.
4. Use descriptive image filenames before uploading, and add alt text that explains the image’s purpose. Compress large images while keeping screenshots readable.
5. Use consistent post labels so navigation and label-fed sections lead to relevant content. Remove empty demonstration categories.
6. Verify page titles, social previews, and the mobile reading experience on the actual blog. A theme configuration alone does not guarantee search rankings.

Quick fixes for common setup problems

A homepage or sidebar section is empty

Confirm that the gadget is enabled, the shortcode uses a layout supported by this template, and the feed mode matches the guide. Check for published posts with the exact label used in the shortcode. Switch temporarily to the documented recent-post example to separate a label issue from a gadget issue.

A shortcode appears as plain text

Check its location first. Feed shortcodes belong in the designated HTML/JavaScript gadget, menu shortcodes belong in the menu URL field, and article markers belong in a Blogger post. Remove accidental formatting or added spaces inside the shortcode and test it again.

A dropdown or mega menu does not work

Review the Link List order, underscore prefixes, and parent links. Put the mega-menu shortcode on a top-level item. Save the gadget, reload the blog, and test both mouse and touch navigation.

An icon, ad, or subscription box is missing

Check the relevant dependency: the icon format must match the theme library, ad markers need a configured ad gadget, and the subscription box needs your working form URL. Third-party display can also depend on the provider and browser settings.

Changes do not appear on the public blog

Save both the gadget and any layout changes required by Blogger. Reload the public page in a fresh tab and confirm that you edited the correct blog. If a change broke the page, restore the previous gadget content or theme backup before continuing.

Final launch checklist

1. Your logo and navigation show correctly at desktop and mobile widths.
2. All demonstration URLs, social accounts, and subscription links have been replaced.
3. Every configured homepage section has the expected published posts or category destination.
4. A full article shows the intended author details, related posts, comments, and ad placements.
5. The footer links work, required credits remain, and the cookie notice points to the right page.
6. The feed is enabled, pagination works, and a fresh backup is saved after the completed setup.