VioMagz Template Configuration Guide

Complete guide to configure the VioMagz 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 in header
Footer Menu	Page menu in footer
Social Icons	Links to social media accounts
Logo	Replace text title with logo
Footer	Text at bottom of blog
Favicon	Small icon in browser tab
Post Display	Labels, date, comments

---

Template Settings Code

VioMagz template features can be customized using settings code.

How to Create & Install

1. Create settings code at VioMagz 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

---

Installing Navigation Menu

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

This 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

---

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 show or hide elements like labels, date, and comments.

1. Open Layout
2. Find the "Blog Posts" widget → click Edit
3. Check the elements you want to display
4. Uncheck the elements you want to hide
5. 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 (make sure not disabled)

Posts Not Appearing on Homepage

Number of posts not matching settings? 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. VioMagz 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://viomagz.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://viomagz.sugeng.id/ with your blog address.