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:
- Why VioMagZ is one of the best Blogger templates?
- The extensive features of the VioMagZ Blogger template.
- Extracting the VioMagZ Blogger template
- How to restore the theme in Blogger?
- 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.
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.
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:
- Fix alternate page with proper canonical tag
- Custom robots.txt for Blogger
- Create an AdSense account 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:
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
- How to start Blogging
- Select a niche to start blogging
- Create an account in Blogger
- Add a domain in blogger
- Write a good post (#)
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.
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 psdly.com. Their decision regarding this is considered final.
A screenshot is provided to support it.
 |
| Screen credit – psdly.com |
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.
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.
After opening it you can see the below picture.
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.
5) Select the rar file. You can get the next image.
6) Click on VioMagZ 4.3.0. You will see the below interface
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.
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.
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.
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.
2) You will find many options. Click on Theme.
You may want to re-establish your template later. Taking backup helps to do that.
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.
6) You can see an upload option. Click on it.
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.
Take an overlook of the 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
3)Select A navbar design as you wish.
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.
The triple strips are a menu on mobile.
5) The next instruction is to set up the menu in HTML.
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.
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=’https://www.bloggerguidepro.com/’>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>
<ul>
<li><a href=’#’>SubMenu 1</a></li>
<li><a href=’#’>SubMenu 2</a></li>
</ul>
</li>
For example:
<li><a href=’#’>Social plugin</a>
<ul>
<li><a href=’https://m.facebook.com/108026251895317/’>Facebook page</a></li>
<li><a href=’https://in.pinterest.com/mandalbishwajit2014/’>Pinterest</a></li>
<li><a href=’https://www.instagram.com/bloggerguidepro/’>Instagram</a></li>
</ul>
</li>
8) If you put any wrong code, then a warning will show. Check the full code properly to correct it.
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.
10) Now click on add gadget of “Widget Di Bawah Header”
11) Scroll down and click on 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=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1503613191669058″
crossorigin=”anonymous”></script>
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.
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.
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.
16) After the main posts below types of images can be shown.
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.
20) Categories and labels are shown below. It is the real look on the homepage.
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.
28) Keep scrolling down. Click on a 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.
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.
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.
33) Now the link is replaced.
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.
35) Set up the following pages. Remove # and place the link.
<!– menu navigasi footer start –>
<ul>
<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>
</ul>
<!– menu navigasi footer end –>
36) Now you set up all the pages. Social plug-ins and pages are displayed like these pages.
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.
39) You can see the final layout here. Though you can edit it to your need.
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.
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.
42) You can find it like that on your pages.
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=”//assets.pinterest.com/js/pinit.js”></script>
<a data-pin-do=”embedUser” data-pin-board-width=”400″ data-pin-scale-height=”240″ data-pin-scale-width=”80″ href=”https://www.pinterest.com/pinterest/”></a>
Replace the https link with your Pinterest profile link. Click on save.
44) Your Pinterest profile will look like the one below.
45) Ikan Atas/Tengah/Bawah 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.
Conclusion
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.