LinkMagz Template Configuration Guide

Complete guide to configure the LinkMagz template after installing it on your blog.

Prerequisites

Make sure you already understand the basics of Blogger such as creating posts, static pages, and installing widgets. This guide focuses on template configuration, not a Blogger tutorial from scratch.

Settings Overview

Setting	Description
Settings Code	Configure template features
Navigation Menu	Menu below header
Footer Menu	Page menu in footer
Social Icons	Links to social media accounts
Product Posts	Product/service posts
Advertorial Posts	Ad/sponsor posts
TOC	Table of contents in posts
Logo	Replace text title with logo
Footer	Text at bottom of blog
Favicon	Small icon in browser tab
Customization	Change colors & appearance

---

Template Settings Code

LinkMagz template features can be customized using settings code.

How to Create & Install

1. Create settings code at LinkMagz Generator Tool
2. Copy the generated code
3. Open Layout in Blogger dashboard
4. Find the "Template Settings Code" widget → click Edit
5. Paste the code in the Content section
6. Click Save

Optional

Settings code is optional. If not installed, the template will use default settings.

---

Installing Navigation Menu

Navigation menu is located below the header.

1. Create menu code at Menu Generator Tool
2. Copy the generated code
3. Open Layout
4. Find the "Navigation Menu Code" widget → click Edit
5. Paste the code in the Content section
6. Click Save

---

Displaying Static Pages Menu

Footer menu uses Blogger's built-in widget (not HTML code).

1. Open Layout
2. Find the "Static Pages Menu" widget → click Edit
3. Select or enter the page URLs you want to display
4. Click Save

---

Installing Social Media Icons

1. Create icon code at Social Media Icon Generator Tool
2. Select platforms and enter profile URLs
3. Copy the generated code
4. Open Layout
5. Find the "Social Media Icons" widget → click Edit
6. Paste the code in the Content section
7. Click Save

---

How to Post Products and Services

Product/service posts are different from regular posts — you must use special HTML code.

Steps

1. Prepare product image URL

   • Upload image first
   • See guide: How to Upload Images

2. Create product HTML code at LinkMagz Posting Tool

3. Create a new post

   • Open Blogger dashboard → New post
   • Click HTML mode in editor (not Compose)
   • Paste the HTML code you created

4. Add label (required)

Post Type	Valid Labels
Product	Produk or Products
Service	Jasa or Services

5. Click Publish

Case-Sensitive

Label names must be exactly the same including uppercase/lowercase. Example: Produk not produk.

---

How to Post Advertorial

Posting advertorial/ads is the same as regular posts (without special HTML code).

Labels to Use

Valid Labels
Advertorial
Iklan
Sponsor

---

How to Enable TOC

TOC (Table of Contents) displays a table of contents in posts.

How to Install

1. Edit the post in HTML mode
2. Paste the following code at the desired location:

<div id="toc"><b class="toc"></b></div>

3. Click Update

TOC Requirements

The post must have <h2> or <h3> heading tags.

---

Replacing Title with Logo

1. Prepare a logo image file (PNG/JPG format)
2. Open Layout
3. Click Edit on the Header widget
4. Click Upload image → select logo file
5. In Placement, select "Instead of title and description"
6. Click Save

Tips for Creating Logo

✅ Correct	❌ Incorrect
Horizontal shape (landscape)	Square shape 1:1
Any size, proportional	Too large/small

---

Editing Footer Text

1. Open Layout
2. Find the "Footer Text" widget → click Edit
3. Enter desired text (example: "© 2025 Your Blog Name")
4. Click Save

---

Changing Favicon

Favicon is a small icon that appears in browser tabs.

1. Prepare a favicon image (square, maximum 100KB)
2. Open Settings in Blogger dashboard
3. Scroll to Basic section
4. Click Favicon → upload image
5. Click Save

Favicon Not Changing?

• In browser: Press Ctrl + Shift + R for hard refresh
• In Google: Takes a few days/weeks to update

---

Configuring Post Display

You can hide elements like labels, date, and comments.

1. Open Layout
2. Find the "Blog Posts" widget → click Edit
3. Uncheck the elements you want to hide
4. Click Save

---

Template Appearance Customization

There are 2 ways to change LinkMagz colors and appearance:

Method	Advantage	Disadvantage
Theme Designer	Easy, no code	Lost when template updates
Custom CSS Widget	Permanent during updates	Requires basic CSS knowledge

Method 1: Via Theme Designer

1. Open Theme → click Customize
2. Select Advanced
3. Change colors as desired
4. Click Save

---

Frequently Asked Questions (FAQ)

Widget Not Appearing / Display Error

1. Make sure the "Visible" option is checked in widget settings
2. If still error, try deleting the widget then reinstall

Comments Section Not Appearing

Solution	Steps
Solution 1	Settings → Comments → Comment Location → select "Embedded"
Solution 2	Layout → edit "Blog Posts" → check comments option
Solution 3	Edit post → check comments option in bottom right

Posts Not Appearing on Homepage

See the solution in this article.

Recommended Image Sizes

Image Type	Ratio	Example Size
Logo	Horizontal (landscape)	200 x 50 px
Regular post	16:9	800 x 450 px
Product / Service	1:1	800 x 800 px

Ratio Calculator

Use Calculate Aspect Ratio to calculate image sizes.

How to Add Download Button

Edit the post in HTML mode, then insert the following code:

<div style="text-align: center;">
<a class="buttonDownload" href="#">Download</a>
</div>

Replace the # with the download destination URL.

How to Maximize Loading Speed

Tips	Description
Disable Navbar	Layout → turn off Navbar widget
Compress images	Use Kraken.io
Limit widgets	Only install widgets that are really needed

How to Install Meta Description

Go to Settings → Search Description → Enable and fill in a short description of your blog (150-160 characters).

Do I Need to Install Meta Keywords?

No. Meta keywords no longer affect SEO. LinkMagz template already handles meta keywords automatically.

---

Advanced Feature: Blog Table of Contents

Create a static page that displays all posts by label.

How to Create

1. Open Pages → click New page
2. Fill in title (example: "Sitemap" or "Table of Contents")
3. Click HTML mode in editor
4. Paste the following code:

<div class="tabbed-toc" id="tabbed-toc"><span class="loading">Loading…</span></div>
<script>
var tabbedTOC = {
  blogUrl: "https://linkmagz.sugeng.id/", // Replace with your blog URL
  containerId: "tabbed-toc",
  activeTab: 1,
  showDates: true,
  showSummaries: false,
  numChars: 200,
  showThumbnails: true,
  thumbSize: 60,
  noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
  monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
  newTabLink: true,
  maxResults: 99999,
  preload: 0,
  sortAlphabetically: true,
  showNew: 7,
  newText: ' &ndash; <em style="color:red;">New!</em>'
};
</script>

5. Click Publish

Don't Forget

Replace https://linkmagz.sugeng.id/ with your blog address.