How to Complete VioMagz v2.9.0 Template Settings and Optimization

Below is a guide to how to install and manage the VioMag z premium template . Please read slowly and thoroughly so that the template is installed properly and correctly.
Installing Templates
The first thing that needs to be done is of course installing the template that you have purchased to your blog.

Following are the steps:
# 1. First, make sure you unzip the downloaded template file. In the .zip file there is a file with the extension .xml , now the file will be uploaded or installed to the blog.
# 2. Second, I recommend backing up the template to be replaced.
How:

Log in to "Blogger" > Enter the "Themes" menu
Click "Backup / Restore"
Click "Download theme"
# 3. Then you just upload the template file to the blog.
How:

• Log in to " Blogger" > Enter the "Themes" menu
• Click "Backup / Restore"
• Click "Choose File"
• Select the template file on Computer> Click "Upload"

# 4. The template has been successfully installed.

Editing the Navigation Menu

In the VioMagz template there are two navigation menus. The first Navigation menu is located to the right of the Header, and the second is located above the Footer.

To edit both navigation menus, you have to edit them through the Edit HTML menu.

Log in to "Blogger" > Go to the "Themes" menu > Click "Edit HTML" .

First Navigation Menu (Right Header)

Look for this code in the template code:

<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
 <li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->

Edit the text with a red background with the destination URL and green with the desired menu name .

• Deleting a Menu
  To delete a menu simply delete it from the code <li> to </ li> . For example, you want to delete the " SubMenu4 " menu , then delete the code:

  <li><a href='#'>SubMenu4</a></li>

• Add a menu
  To add a menu, copy this code:

  <li><a href='#'>NamaMenu</a></li>

  Paste the code above code:

  </ul>
  <!-- menu navigasi header end -->

• Adding Menu with SubMenu
  To add a menu with submenus, copy this code:

  <li><a href='#'>NamaMenu</a>
    <ul>
   <li><a href='#'>NamaSubMenu1</a></li>
   <li><a href='#'>NamaSubMenu2</a></li>
    </ul>
  </li>

  Paste the code above code:

  </ul>
  <!-- menu navigasi header end -->

• Don't forget to adjust the destination URL of the menu and the name of the menu .

Second Navigation Menu (Above Footer)
Search this code in the template code:

<!-- menu navigasi footer start -->
<ul>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->

Edit the text with a red background with the destination URL and the green one with the desired menu name . 
If it has been edited all, don't forget to click "Save theme"
To delete and add menus the same as the first menu, only the difference for the menu above the footer does not support the submenu.

Adding Social Media Keys
By default social media buttons are not installed when the new template is first uploaded. 
To install it please follow the steps below:

• Log in to "Blogger" > Enter the "Layout" menu
• Click "Add Gadgets" above the Footer
• Select the "HTML / JavaScript" gadget
• Next add the code below in the Content section:

  <!-- social media button start -->
  <ul class='nav-social'>
    <li><a class='fcb' href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
    </li>  
    <li><a class='igicon' href='https://www.instagram.com/' rel='nofollow'><i class='fa fa-instagram fa-2x'/></a>
    </li>
    <li><a class='gpl' href='https://plus.google.com/' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
    </li>
    <li><a class='twt' href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a> 
    </li>
    <li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a> 
    </li>
  </ul>
  <!-- social media button end -->

• Don't forget to click "Save"

Don't forget to change the URL marked green above with your friend's social media profile URL.

Adding a Featured Post Widget
To install the Featured Post widget it's very easy. 
How:

• Log in to "Blogger" > Enter the "Layout" menu
• Click "Add Gadgets" just above the Blog Posts
• Select the "Featured Posts" gadget
• After that, just choose which article you want to appear on the Featured Post
• If so, click "Save"

Modification of Display Templates
You can easily change the color, background, and font of this template via the Blogger Theme Designer menu. 
How:

• Log in to  "Blogger" > Enter the "Themes"  menu 
• Click the " OK " button
• After that click "Advanced"
• On the menu you can change the background and also the color of the template as desired.

Displaying the Subscription Box FeedBurner
This template has available the subscription box feature via email using Feedburner, but by default it is not displayed. 
To display it please follow the steps below:

• Log in to "Blogger" into the "Themes" menu > Click " Edit HTML "
• Search for this code:

  <b:include data='post' name='relatedpost'/>

• If you find it, add this code just below it:

  <b:include data='post' name='postsubscribebox'/>

• Next look for this code:

  https://feedburner.google.com/fb/a/mailverify?uri=BlogMasSugeng

  Replace the one I marked red with my friend's FeedBurner ID
• Search for this code again:

  <input name='uri' type='hidden' value='BlogMasSugeng'/>

  Replace the one I marked red with my friend's FeedBurner ID
• Finally click " Save theme "

Making Super Fast Loading Templates

Loading this template is actually quite fast without having to make any modifications.

But if you still feel less, you can make it faster by making a few modifications.

In default, loading the VioMagz template is actually quite fast without having to sacrifice the display to be too simple. But if you are really crazy about speed and don't mind sacrificing the look, below I write a guide on how to make VioMagz template super fast.

 

Disabling Navbar

The first thing you can do is disable the Navbar in the template. Disabling the Navbar does not affect the appearance of the template. The Navbar in VioMagz's template has actually been hidden using CSS, but the Navbar is still active even though it's not visible.

To deactivate it, please follow the steps below:

• Log in to Blogger > Enter the "Layout" menu
• Click edit on the Navbar widget section (located above the Header)
• Then select "Off"
• Click "Save"
• Finished

Eliminating Thumbnails Posts on Homepage
The third way starts to slightly change the appearance of the template, namely by removing the thumbnail post on the homepage. 
The way is as follows:

• Login to Blogger > Enter the "Themes" menu
• Click the "Edit HTML" button
• Search and delete this code in the template:

  <b:include data='post' name='postthumbnail'/>

• Next look for this CSS code:

  .info-1, .info-2, h2.post-title, .post-snippet {
   margin-left: 275px;
  }

• Delete and replace with this:

  .info-1, .info-2, h2.post-title, .post-snippet {
   margin-left: 0px !important;
  }

• If so, click "Save theme"

Removing Numbered Page Navigation
Features The Numbered Page Navigation feature or navigation of numbered pages on the VioMagz template depends on JavaScript. 
JavaScript is actually not good for blog loading speed, so to load the template faster, you can eliminate this feature. 
Following are the steps:

• Login to Blogger > Enter the "Themes" menu
• Click the "Edit HTML" button
• Search and delete this code in the template:

  <script>
  //<![CDATA[
  if(typeof firstText=="undefined")firstText="First";
  ...
  ...
  ... sampai dengan ....
  ...
  ...
  "+perPage+"#PageNo="+noPage}location.href=pAddress}
  //]]>
  </script>

• If so, click "Save theme"

Remove Thumbnails on Popular Posts Widgets
If you install the Popular Posts Widget, please set it so that it doesn't display the Thumbnail in the title.

Reducing the Number of 
Last Installed Widgets as much as possible not to install too many Widgets. 
The more widgets installed, the heavier the loading template.

Source:  Guide VioMagz V.1.9 Template Settings