VioMagZ Blogger template documentation

VioMagZ Blogger template documentation

A good template is a necessary element for the website. It provides professional looks and many more. We look at how the VioMagZ Blogger template fulfills every feature in a line.

You may be heard it before. Many also try to apply it. Most of them are failing to apply it because of the following:

1) A download option has a .rar file format. Generally, we can extract ZIP files. RAR is not supported on each device.

2) The most headache portion. It cannot be customized without basic HTML knowledge.

Here all things will be solved properly as follows:

1) Proper guide to extracting the RAR file.

2) Full guide to restoring it. HTML

3) Complete VioMagz Blogger template documentation. You have heard it right. All the HTML options will be fulfilled here. A detailed step-by-step guide will be provided here. All the guide images are provided here. You have no chance to leave any cells that affect your page. All you have to do to read it carefully.

Here we focus on Five things:

  1. Why VioMagZ is one of the best Blogger templates?
  2. The extensive features of the VioMagZ Blogger template.
  3. Extracting the VioMagZ Blogger template
  4. How to restore the theme in Blogger?
  5. Complete documentation of VioMagZ free blogger template

So come to the first point.

Why VioMagZ is one of the best Blogger templates?

It has multiple reasons. You will get a practical example. It will be enough to put two strong pieces of logic to prove it. The rest of the vast features will be discussed then. Take the first one:

1) Page speed:

For Blogger, there is a huge number of templates. Few look professional. Few are excellent SEO optimized. Few accept rich results etc. In one case they give up. This is the speed with all basic features. I applied a lot of templates on this site. They never give you good speed on Mobile. But see the below image. It is the final speed after setting up all the basic features. This is tested in Page Speed Insights.

Mobile speed of VioMagZ

Look at the performance. The homepage speed on mobile is 94. VioMagZ Blogger template is the only template where you can find this speed.

Now, look at this speed on the desktop.

Desktop speed of VioMagZ

The desktop speed is 99. It is near perfect. You can also look at the right picture. This picture contains all the necessary features.

Note: This speed is shown before applying AdSense to this site. The speed will be less depending on the number of Ads you want to apply to your site.

2) Less Javascript:

Here you can set up a menu, social plugins, and pages without Javascript. In Blogger template speed is affected by JavaScript files and its absence is the major cause of its high speed.

Now you may get it. Apart from that, there are several options here. Now you will be introduced to its extensive features.

The extensive features of the VioMagZ Blogger template

Let ready know its extensive features one by one.

1) 100% responsive:

It is displayed perfectly on Mobile, Desktop, tablets, etc.

2) SEO friendly:

It is designed to remind us about well SEO performance

(#) Also, check these issues you must have done in Blogger:

3) Mobile friendly:

It can easily pass the mobile-friendly test.

4) Rich results:

It can support reach results like Images, Video, etc.

5) AdSense friendly:

On one side you can get easy AdSense approval. Lots of bloggers used and get it. It is also designed for a good CPC (Cost per click) rate for the revenue.

6) Structure:

The structure of the VioMagZ Blogger template is good enough. You can check it in GT Metrix. Look at the below image:

VioMagZ GT Metrix grade

It has an “A” type GT Metrix grade. The performance is 99% and the structure is 94%. It also passes the Web Vitals.

7) Elements:

It has a vast of options in the Layout section. Some are mentioned:

1) Menu

2) Navigation bar

3) Blog Search

4) AdSense placements

5) Featured posts

6) Latest posts

7) Comments

8) Writer profile display

9) Social sharing button

10) Categories

11) Labels

12) Related posts

13) Popular posts

14) Sidebar Widget:

15) Sticky sidebar Widget:

16) Social plugin options

17) Pages

18) Your attribution of copyright.

It is not the end. You always add lots of things by clicking Add Gadget. Contact forms, Javascript, Listicles, Facebook page, Pinterest page, etc are some examples of it.

(#) also, check our beginner’s guide

Now, the next step is extracting the VioMagZ Blogger template.

Extracting the VioMagZ Blogger template

Do you want to see how your template will look? Click on the preview to see it.

Live Preview

Now you can download it from any good provider. Most indeed have them has a structural problem. It is better to buy it from authentic sources. For gathering experience with this template, you can download it from below source.

Note: The download file and No footer credit statement were taken from Their decision regarding this is considered final.

A screenshot is provided to support it.

psdly, VioMagZ, no footer credit
Screen credit –

You can visit their site to know more – VioMagZ 4.3.0 Blogger Template Premium Free by psdly, September 1, 2020.


Now you are going to set up this free template. Follow these step-by-step pictures.

1) Click on the above download button. You can see the below image after a few seconds.

rar file download

2) You can see it is a .rar file. Click on the download button.

You have now a downloaded RAR file. Try to extract it.

3) It is not supported by most devices.

You have to download any RAR app to open it.

Here RAR file will be used for that.

Download the RAR app from the Play Store.

RAR app

After opening it you can see the below picture.

RAR to download

4) Now you have to select this rar file. Here my file is located under the download folder. So the Download folder is opened. The below image is opened.

RAR to rar file

5) Select the rar file. You can get the next image.

RAR to vioMagZ

6) Click on VioMagZ 4.3.0. You will see the below interface

Click on upload

7) Select the XML file here. After that click on upload. You can see the upload button in the circle in the above image.

After clicking it, you will find the below image.

rar extraction
Click on ok

8) You can choose the destination path or remind the destination. Click on Ok.

Close the rar file. It has no need anymore.

9) Go to the download option from your file manager. You will see a folder. It indicates you extracted the file successfully.

VioMagZ folder

10) Click on VioMagZ 4.3.0 folder. You can find your XML file. Remind the location of it. You have to upload it to your Blogger account.

xml location

How to restore the theme in Blogger?

It is an easy process. Follow these steps:

1) Open your Blogger account.

Click on the triple bar located in the left corner.

Blogger menu

2) You will find many options. Click on Theme.

Click on Theme

You may want to re-establish your template later. Taking backup helps to do that.

Clicking down arrow beside customize

4) You get a few options. First, it is better to take back your existing file.

You may want to re-establish your template later. Taking backup helps to do that.

Click on back up. Locate this file where you can find it again.

5) After taking Back up come back here.

Click on Restore.

Click on restore

6) You can see an upload option. Click on it.

Click on upload

7) Choose the file manager as an action.

8) Find the XML find and select it to upload.

9) You will find a small message of upload successfully. It stays for a second.

You restore. your VioMagZ template.

(#) Also, read

Now it is time to edit it. You can do it by the VioMagZ documentation.

Complete VioMagZ Blogger template documentation

Are you ready to set up through documentation?

Follow these processes to do it.

1) Go to your blogger account > triple bar in the left corner. Click on it. You have a few options. Click on Layout.

Click on Layout

Take an overlook of the layout.

Full layout

You have to fill up all the basic things here. Otherwise, many issues will have emerged. Let’s do it one by one.

2) Click edit in Navbar

Click edit in Navbar

3)Select A navbar design as you wish.

Choose a navbar

4) Click on edit in the Header gadget.

Put Blog title and description.

Set an image. Select the image placement option. Click on save. It may appear like that in the search results.

Header display

The triple strips are a menu on mobile.

5) The next instruction is to set up the menu in HTML.

Indicate menu editing

6) For that go to blogger account > triple strips > Theme > Down arrow beside customizing> Edit HTML. Find the menu section here. You can search the menu navigation header on the desktop to find it.

Menu finding

Look at it. Here you have to put links by removing #. You can replace the name by removing Menu 1.

Here is an example:

HTML – <li><a href=’#’>Menu 1</a></li>

After editing –

<li><a href=’’>Home</a></li>

7) You can set up a submenu multiple times. Every time inset this code after </li> and before </ul>.

<li><a href=’#’>Menu 3</a>


<li><a href=’#’>SubMenu 1</a></li>

<li><a href=’#’>SubMenu 2</a></li>



Menu set up

For example:

<li><a href=’#’>Social plugin</a>


<li><a href=’’>Facebook page</a></li>

<li><a href=’’>Pinterest</a></li>

        <li><a href=’’>Instagram</a></li>



8) If you put any wrong code, then a warning will show. Check the full code properly to correct it.

HTML error showing

It is best to take it seriously and put all the code in the right format.

After completing the HTML Cody entry save it. On mobile click on vertical three dots to save it. On the computer click on the save icon for save.

9) See how this menu can appear in search results.

Menu display in homepage

10) Now click on add gadget of “Widget Di Bawah Header”

Add a gadget in header

11) Scroll down and click on HTML/Javascript.

Select html javascript

12) You can add Adsense here. Write AdSense in the title. You may see the content. Get your code from your AdSense account and put it here. Here is an example of AdSense code.

<script async src=”″


Paste AdSense code in content

Click on save. You can add here anything else too instead of AdSense. You can also remove it. Do what is best for you.

13) Now click on edit of Widget di Atas Post.

Edit featured post

14) Remove words from the title and write a featured post.

Edit other options as you wish.

You can remove the default option. Unselect use ent posts. Now select a post as a featured post and click on save.

Featured post set up

15) Click on an edit of Blog posts. Keep selecting the date header, Author name, Comment, Author profile, and Social sharing. Then click on save.

Main post set up

16) After the main posts below types of images can be shown.

Author profile display

17) Now go to Sidebar Widget.

Most of the gadgets will be removed here

The aim is to maintain the site speed. You can keep them as per your need. However, all options will be shown here.

18) Mengenai Saya: The same thing we find in the Author profile. This can be removed.

19) Label: Two levels are here. You can use it in your way. You can name the 1st level as categories.

Use and organize your second level.

Categories set up

20) Categories and labels are shown below. It is the real look on the homepage.

Label display

21) Cari Blog Ini: It is a search bar. We have it already on the home page. You can remove it.

22) AdSense: Get the code from your AdSense account and put it in.

23) Attribution: We have footer credit for it. it can be removed here.

24) Arsip Blog: Here, how many posts in a specific day, week or month are displayed? If you have a news website of the same type of niche then use it. Otherwise, it can be removed

25) Report abuse: you can keep it.

26) Popular posts: We will set up them in the text widget. You can remove it here.

Pages: We will set up pages in another area. You can remove it.

27) Go to Sidebar Widget (sticky). Click on add gadget.

Add a gadget (sticky sidebar)

28) Keep scrolling down. Click on a contact form.

Click on contact form

29) In the title you see the contact form is written. You can replace it. After that click on save.

30) Here I replaced the contact form title with a message to get an update. The below image is displayed on the homepage and individual page.

Contact form display

31) Click on the Popular post. Remove the title and write popular post.

Select the option as per wish in the range between 1-10. click on save.

Popular post set up

32) Now the social plugin will be set up. For that go to the blogger account > triple strips > Theme > Down arrow beside customize > Edit HTML

Find below types of social plugin options. You may search Instagram on the desktop to find it It is usually located closer to the end of this HTML code.

Find every social plugin option and replace the link. Take Instagram as an example. Here you can see the causal link.

Social code finding

33) Now the link is replaced.

Instagram code set up

Find Twitter, Linkedin, Facebook, and youtube. Replace the link there.

34) Now pages will be set up. You find the code of the page immediately after the social plugin. Find the below code or search menu navigasi footer on the desktop.

Page finding in HTML

35) Set up the following pages. Remove # and place the link.

<!– menu navigasi footer start –>


  <li><a href=’#’>Home</a></li>

  <li><a href=’#’>About</a></li>

  <li><a href=’#’>Contact Us</a></li>

  <li><a href=’#’>Terms</a></li>

  <li><a href=’#’>Privacy Policy</a></li>

  <li><a href=’#’>Disclaimer</a></li>


<!– menu navigasi footer end –>

Page set up in HTML

36) Now you set up all the pages. Social plug-ins and pages are displayed like these pages.

Page display

37) You can edit the advanced option too. For that, you have to click on theme designer.  s located on the topmost area of the layout. You can check it.

Our basic set-up is completed. With this set up you can get near 90 home page speed on mobile.

38) After editing the layout properly click on the Save button.

Save icon

39) You can see the final layout here. Though you can edit it to your need.

Final layout

40) Take its backup. To avail of the previous options, you can restore your VioMagZ free blogger template. The previous options will be displayed.

Finally, you can see the page design of VioMagZ 4.3.0.

Homepage display

All basic setup is completed. Take these bonuses too. That is adding and Facebook page and Pinterest profile.

41) To add a Facebook page visit the Developers Facebook page plugin.

Click on get the code. Copy the code.

In the layout section in the sidebar or sticky sidebar click on add a gadget. Then click on HTML javascript. Put a title like Facebook Page. Paste the code in the content area. Then click on save.

Facebook shortcode

42) You can find it like that on your pages.

Fb page display

43) For getting a Pinterest profile click on Add a gadget on the sidebar. Then click on HTML javascript. Give a title like Pinterest.

In the content, the section pastes it.

<script async defer src=”//”></script>

<a data-pin-do=”embedUser” data-pin-board-width=”400″ data-pin-scale-height=”240″ data-pin-scale-width=”80″ href=””></a>

Replace the https link with your Pinterest profile link. Click on save.

Pinterest shortcode

44) Your Pinterest profile will look like the one below.

Pinterest profile display

45) Ikan Atas/Tengah/Bawah article:

Ikan atas article

These all boxes are related to Ads on your pages. When you set up your ad code, you can enter this ad code in the comment section.

That is all about documentation. Now you do have not blank links in the template. Check your Homepage speed in page speed insights. Check structure in GT Matrix. Maintain the features and speed as per your need. The individual page speed will be relatively lower. You can remove the comment section to get good page speed on an individual page. That is at your discretion.


You have to know why VioMagZ is one of the best Blogger templates. Extensive features show how important it is. You have extracted the RAR file it properly. You have restored this template. Finally, you get the VioMagZ blogger template full documentation. It does not leave any blank links. If you face any difficulty along the way, reach out to us or comment here. We will be glad to solve it.

Leave a Comment