VioMagz Blogger Template Setting Guide

 

LIST OF CONTENTS

1 Installing the Template 

2 Adding a Navigation Menu (Header) 

3 Displaying Static Page Menu (Footer) 

4 Adding Social Media Icons 

5 Editing the Template Setup Code 

6 Replacing Blog Title with Logo 

7 Editing Posts in Footer 

8 Changing Favicon 

9 Show/Hide Labels, Dates, Comments, Etc. 

10 Enabling LazyLoad on AdSense Ads 

11 Frequently Asked Questions 

Below is a guide on how to install and set up the latest version of the VioMagz template.

1. Installing Templates

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:

Method of Installing Manual Template Code:

#1. 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.   

#2. Open the template file with .xml extension using a text editor program ( eg notepad ) and copy all the code in it.  

#3. I recommend doing a backup of the template to be replaced.

Go to the “Themes” menu > Click the menu icon (three dots) > “Backup” > “ Download ”      

#4. 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 .     

Direct Upload Method:

#1. 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.   

#2. Second, do a backup of the template that will be replaced. The method is the same as the first method.

#3. 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 ofRelatedPosts

Number of posts that appear in related posts under posts Edit according to taste.

* relatedPostsThumb

Fill in true to display related posts with thumbnails, or fill in false to display related posts without thumbnails.    

* numberedPageNav

Fill true to enable numbered page navigation feature. or fill in false to disable it.    

* perPage Equate

number with the setting for the number of posts that appear on the homepage

* readAlso

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. 

11. (FAQ)

The widget does not appear / Displays Error

First, make sure to check the option " Visible " in the widget settings

If it still doesn't appear or it looks like an error, try removing the widget first and then reinstalling it.

Related Posts Image Not Appearing

The solution can be read here 

There's a post that doesn't appear on the homepage

The solution can be read here 

What is the Recommended Logo Image Size?

The recommended logo image size or resolution for the VioMagz template is 300x50px.

What is the recommended post image size?

It is recommended to use post images with an aspect ratio of 16:9.

For example, if the width of the image is 800px then the height is 450px.

To calculate the aspect ratio, you can use this tool: https://calculateaspecratio.com/ 

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.

How to Maximize Loading Speed

Make sure the Navbar widget is disabled via the Layout menu

Compress every image used on the blog, be it a logo image, post image, or profile picture. For how to compress images, you can use the online tool https://kraken.io/web-interface 

Limit the number of widgets installed on the blog. Just install the widgets that are really needed

How to Place Ads in the Middle of Articles

First login to “ Blogger ” > “ Layout ”

At the bottom of the blog post, there are 4 widgets for installing ad code. The widgets are:

Article Top Ads

Central Ads Article 1

Middle Ads Article 2

Article Bottom Ads

Click edit on the widgets and paste the ad code.

How to Set Ad Locations in the Middle of Articles as You Want

The ad widget in the middle of the article automatically shows the ad in the middle of the post.

The ad in the middle of the first article appears in the first 20% of the post, while the second ad appears right in the middle of the article.

You can also set the location where the ads will appear as you wish in each post. The method is as follows:

For ads in the middle of the first article copy this code:

<br id="ad1"/>

After copying, edit the post using HTML mode, after that put the code above in the location you want, for example at the end of the first paragraph. Later the ad will appear according to the location of the code.

For the second ad the same way, quite a change ad1 be ads2.   

How to Install Meta Description

The meta description installation guide can be read here. 

How to Install Meta Keywords

Meta keywords actually have no effect on SEO.

But in this template, it is still installed and has been set automatically, so there is no need to install it manually.

How to Install Table of Contents on Static Pages

Please create a new static page. In the page editor select HTML mode, then put this code:

<div class="tabbed-toc" id="tabbed-toc"><span class="loading">Loading…</span></div><script>/*!

 * Blogger Tabbed Style Table of Content Widget by Taufik Nurrohman

 * Free for change but keep the original attribution.

 * URL: https://plus.google.com/108949996304093815163/about

 */

var tabbedTOC={blogUrl:" https://MONITORINGOIL.COM/ ",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize: 60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQm["January,""July["January,""June[" ,"August","September","October","November","December"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' – <em style="color:red;">New!</em>'};

!function(a,b){var c=(new Date).getTime(),d={blogUrl:"http://dte-feed.blogspot.com",containerId:"tabbed-toc",activeTab:1 ,showDates:!1,showSummaries:!1,numChars:200,showThumbnails:!1,thumbSize:40,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjbIm4UAAQLOAAAQIm4U. February","March","April","May","June","July","August","September","October","November","December"],newTabLink:!0,maxResults :99999,preload:0,sort Alphabetically:!0,showNew:!1,newText:' – <em style="color:red;">New!</em>'};if("undefined"==typeof tabbedTOC)tabbedTOC=d;else for(var e in d)d[e]="undefined" !=typeof tabbedTOC[e]?tabbedTOC[e]:d[e];a["clickTabs_"+c]=function(a){for(var b=document.getElementById(d.containerId),c=b. getElementsByTagName("ol"),e=b.getElementsByTagName("ul")[0],f=e.getElementsByTagName("a"),g=0,h=c.length;h>g;++g) c[g].style.display="none",c[parseInt(a,10)].style.display="block";for(var i=0,j=f.length;j>i;++ i)f[i].className="",f[parseInt(a,10)].className="active-tab"},a["showTabs_"+c]=function(e){for(var f= parseInt(e.feed.openSearch$totalResults.$t,10),g=d,h=e.feed.entry,i=e.feed.category,j="",l=0;l<(g. showNew===!0?5:g.showNew)&&l!==h.length;++l)h[l].title.$t=h[l].title.$t+(g.showNew!= =!1?g.newText:"");h=g.sortAlphabetically?h.sort(function(a,b){return a.title.$t.localeCompare(b.title.$t)}):h ,i=g.sortAlphabetically?i.sort(function(a,b){return a.term.localeCompare(b.term)}):i,j='<span class="toc-line"></span ><ul class="toc-tabs">';for(var m=0,n=i.le ngth;n>m;++m)j+='<li class="toc-tab-item-'+m+'"><a onclick="clickTabs_'+c+"("+m+');return false; " onmousedown="return false;" href="javascript:;">'+i[m].term+"</a></li>";j+="</ul>",j+='<div class="toc-content">' ;for(var o=0,n=i.length;n>o;++o){j+='<ol class="panel" data-category="'+i[o].term+'"', j+=o!=g.activeTab-1?' style="display:none;"':"",j+=">";for(var p=0;f>p&&p!==h.length;++p){for(var q,r=h[ p],s=r.published.$t,t=g.monthNames,u=r.title.$t,v=("summary"in r&&g.showSummaries===!0?r.summary.$t. replace(/<br *\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0, g.numChars)+"…":""),w=("media$thumbnail"in r&&g.showThumbnails===!0?'<img class="thumbnail" style="width:'+g.thumbSize+ "px;height:"+g.thumbSize+'px;" alt="" src="'+r.media$thumbnail.url.replace(/\/s\d(\-c)?\//," /s"+g.thumbSize+"-c/")+'"/>':'<img class="thumbnail" style="width:'+g.thumbSize+"px;height:"+g.thumbSize+'px ;" alt="" src="'+g.noThumb.replace(/\/s\d(\-c)?\//,"/s"+g.thumbSize+"-c/")+'" />'),x=r.category||[],y=g.showDates?'<time datetime="'+s+'" title="'+s+'">'+s.substring(8,10 )+" "+t[parseInt(s.substring(5,7),10)-1]+" "+s.substring(0,4)+"</time>":"",z=0, A=r.link.length;A>z;++z)if("alternate"===r.link[z].rel){q=r.link[z].href;break}for(var B=0,C=x.length;C>B;++B){var D=g.newTabLink?' target="_blank"':"";x[B].term===i[o].term&&(j+='<li title="'+x[B].term+'"',j+=g. showSummaries?' class="bold"':"",j+='><a href="'+q+'"'+D+">"+u+y+"</a>",j+=g.showSummaries? '<span class="summary">'+w+v+'<span style="display:block;clear:both;"></span></span>':"",j+="</li> ")}}j+="</ol>"}j+="</div>",j+='<div style="clear:both;"></div>',b.getElementById(g.containerId) .innerHTML=j,a["clickTabs_"+c](g.activeTab-1)};var f=b.getElementsByTagName("head")[0],g=b.createElement("script");g. src=d.blogUrl.replace(/\/+$|[\?&#].*$/g,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+ d.maxResults+"&orderby=published&callback=showTabs_"+c,"onload"!==d.preload?a.setTimeout(function(){f.appendChild(g)},d.preload):a.onload=function( ){f.appendChild(g)}}(window,document);</script>

Replace the one marked RED with your URL blog's address.