Viomagz Blogger Template Setting and Shortcodes are functions developed by our team to facilitate the insertion of buttons, alerts, contact form, code box and even sidebar alignment, these functions are very flexible and easy to set up, and even if you do not have experience with codes you will have no difficulty in adding them.
1. How to Install Premium Blogger Template?
This guide explains how to install a premium blogger template from sugeng.id to your blog. Follow the steps below carefully.
Before You Start
Make sure you have prepared:
- ✅ Template file (.zip) downloaded from sugeng.id
- ✅ Access to Blogger dashboard
- ✅ Application to extract zip files (Windows has built-in support)
First Time Installation
Use this method if you are installing the template for the first time (not updating).
Step 1: Extract Template File
- Find the .zip template file you downloaded
- Right-click on the file → select Extract All
- Open the extracted folder
- Inside the folder, there will be several .xml files — choose one according to your preferred color
Step 2: Copy Template Code
- Right-click on the selected .xml file
- Select Open with → Notepad (or VS Code if available)
- Press Ctrl + A to select all code
- Press Ctrl + C to copy
Step 3: Paste to Blogger
- Open blogger.com and login
- Select the blog where you want to install the template
- Click Theme menu in the left sidebar
- Click the ▼ (dropdown) button next to the "Customize" button
- Select Edit HTML
- Press Ctrl + A to select all old code
- Press Ctrl + V to replace with the new code
- Click the Save button (disk icon) in the top right corner
2. Template Settings Code
VioMagz template features can be customized using settings code.
- How to Create & Install
- Create settings code at VioMagz Generator Tool
- Copy the generated code
- Open Layout in Blogger dashboard
- Find the "Template Settings Code" widget → click Edit
- Paste the code in the Content section
- Click Save
3. Installing Navigation Menu
- Create menu code at Menu Generator Tool
- Copy the generated code
- Open Layout
- Find the "Navigation Menu Code" widget → click Edit
- Paste the code in the Content section
- Click Save
4. Displaying Static Pages Menu in Footer
This menu uses Blogger's built-in widget (not HTML code).
- Open Layout
- Find the "Static Pages Menu" widget → click Edit
- Select or enter the page URLs you want to display
- Click Save
5. Installing Social Media Icons
- Create icon code at Social Media Icon Generator Tool
- Select platforms and enter profile URLs
- Copy the generated code
- Open Layout
- Find the "Social Media Icons" widget → click Edit
- Paste the code in the Content section
- Click Save
6. Editing Template Settings Code
Some features of the template can be set via the “Template Settings Code” widget available in the layout.
To edit it, please go to the "Layout" menu > edit the widget "Code Settings template".
After that, my friend enter this code in the widget content section:
<script>var vioMagzSetting = {relatedPosts: true,Number ofRelatedPosts: 4,relatedPostsThumb: true,numberedPageNav: true,per Page: 8,readAlso: true,numberReadAlso: 3,TitleRead Also: "Read Also",};</script>
Here's an explanation of the code:
◼ RelatedPosts
Fill in true to enable the related posts to feature, or fill in false to disable it.
◼ Number of Related Posts
Number of posts that appear in related posts under posts Edit according to taste.
◼ Related PostsThumb
Fill in true to display related posts with thumbnails, or fill in false to display related posts without thumbnails.
◼ Numbered Page Nav
Fill true to enable numbered page navigation feature. or fill in false to disable it.
◼ Per Page Equate
number with the setting for the number of posts that appear on the homepage
◼ Read Also
Fill in true to enable the related posts to feature in the middle of the post, or fill in false to disable it.
◼ Number of Read Also
number of posts that appear in related posts in the middle of the post, edit according to taste.
◼ Title Read Also
Title-related posts in the middle of the post, edit according to taste.
7. Replacing Blog Title with Logo
First, make sure you have created a logo image. Free logo size, any size can.
Second, go to “Layout” > edit “Header” widget > Upload image > in the “Placement” section select “Besides title and description” > Save.
8. Editing Posts in Footer
Go to “Layout” > edit widget “Footer Text” > in the widget content section enter any text you want to appear in the footer > save.
9. Changing Favicon
Go to the “Settings” menu > “Basic” > “Favicon” > Upload your friend's favicon.
Notes:
◼ Make sure the favicon image is square and no more than 100KB in size.
◼ If the Favicon doesn't change in the browser, clear the browser cache first, then check again
◼ If the Favicon doesn't change on Google, please be patient, it may take some time and it won't change automatically.
◼ If the Favicon doesn't change in the browser, clear the browser cache first, then check again
◼ If the Favicon doesn't change on Google, please be patient, it may take some time and it won't change automatically.
10. Show/Hide Labels, Dates, Comments, Etc.
Go to “Layout” > edit the “Blog Posts” widget > check the ones you want to display, uncheck the ones you don't want to be displayed> Save.
11. Enabling LazyLoad on AdSense Ads
In the VioMagz template version 4.6.0 and above, you can activate the LazyLoad feature on AdSense ads.
How to activate it is quite easy, my friend only needs to edit a little AdSense ad code installed on the blog.
In every AdSense ad code there is generally a code like this at the top:
<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
Well my friend just need to edit the code to be like this:
<script>Defer.js('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', 'adsense', 3000);</script>
For Auto Ads
This LazyLoad feature can also be applied to auto ads.
The trick is to change the auto ads ad code to be like this:
<script>Defer.js('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890xxxxxx', 'adsense', 3000);</script>
Place the code above the </head> code or it can be in the "Custom JavaScript Footer" widget
Notes:
◼ Replace 1234567890xxxxxx with your AdSense account ID
◼ Don't put the code under the <head> code. If you put it there, the lazyload feature can't work.
12. How to Install the Download Button in Posts
Edit the post for which you want to have a download button in HTML mode.
Put this code in the post:
<div style="text-align: center;">
<a class="buttonDownload" href="#">Download</a>
</div>
Edit the RED hash mark with the destination URL.
13. How to Install Table of Contents on Static Pages
The table of contents code will only work if the RSS Feed setting on the blog is enabled.
Generated Table of Contents Click Here