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.
How To Setup Viomagz Blogger Template?
There are two methods that can be used to attach a template to a blog.
The first method is to copy the new template code and paste it into the blog manually via the Theme Menu > Edit HTML. This method is recommended if your blog changes to a different blog template. The reason is to avoid errors because the old template code is mixed with the new one.
The second method is by uploading the template file directly to the blog via the Themes > Restore Menu. This method is recommended if your blog installs the latest version of the same template.
Below I explain how to install the template using both methods:
a) Method of Installing Manual Template Code:
- The downloaded file must be unzipped first. Inside the .zip file, there is a file with the extension .xml, so we need to copy all the code in the file.
- Open the template file with .xml extension using a text editor program (eg. notepad) and copy all the code in it.
- I recommend doing a backup of the template to be replaced. Go to the “Themes” Menu > Click the Menu icon (three dots) > “Backup” > “ Download ”
- Once backed up, then you just put the code that has been copied to the blog via the HTML edit Menu.
- Go to the “Themes” Menu > Click the menu icon (three dots) > Click “Edit HTML” > Delete all the old template code > Paste/ Paste the new template code > Click the Save button.
b) Direct Upload Method:
- The downloaded file must be unzipped first. Inside the .zip file, there is a file with the extension .xml, so the file will be uploaded directly to the blog.
- Second, do a backup of the template that will be replaced. The method is the same as the first method.
- Next, you just need to upload the template file to your blog.
- Go to the “Themes” Menu > Click the menu icon (three dots) > Click “Recover” > Click “Upload” > Select the template file on your computer.
2. Adding a Navigation Menu (Header)
Go to the “Layout ” Menu > edit the widget “Navigation Menu Code” > then enter this code in the widget content section:
<li><a href=" # "> Sample Menu</a></li>
Replace the one marked RED with the destination URL, for example, if you want the menu to point to the label page, then fill it with the label URL.
Those marked with GREEN are also replaced as desired.
If you want to add another menu, just copy the code and paste it right below it.
Adding a menu with a submenu:
To add a menu accompanied by a submenu, use this code:
<li class="has-sub"><a href=" # "> Main Menu </a>
<ul>
<li><a href=" # "> Submenu One </a></li>
<li><a href=" # "> Submenu Two </a></li>
<li><a href=" # "> Submenu Three </a></li>
</ul>
</li>
Put the code just below the previous menu code.
Replace the ones marked RED with the destination URL, and the GREEN ones are replaced with the menu names as needed.
3. Displaying Static Page Menu (Footer)
Go to “Layout” > edit widget “Static Page Menu” > check the pages you want to display in the menu > click “ Save ”
4. Adding Social Media Icons
Go to “Layout” > edit widget “Social media icons” > enter this code in widget content section:
<a aria-label= "facebook-icon" href=" # "><span class= "social-icon facebook-icon" ><i></i></span></a>
Edit the GREEN marked with the name of the social media icon used and the yellow marked with the URL of your social media account.
If you want to install more than one social media icon, just copy the code and change the name of the social media icon.
Here are some names of social media icons available in the VioMagz template:
- facebook-icon
- youtube-icon
- twitter-icon
- instagram-icon
- linkedin-icon
- telegram-icon
- whatsapp-icon
- googlemaps-icon
- pinterest-icon
- tiktok-icon
- github-icon
- dribbble-icon
- behance-icon
Notes: Icon names must be all lowercase.
5. 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.
6. 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.
7. 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.
8. 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.
9. 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.
10. 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.
10. 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.
11. 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