Home » Blogger » How to Add HTML5 Templates in Blogger

How to Add HTML5 Templates in Blogger

How to Add HTML5 Templates in Blogger
We see around amazing templates on all niches. Magazine, Business, Entertainment, Technology and Portfolio are the most commonly found templates on the internet. Every platform has different types of templates and themes but the most attractive ones I feel are WordPress and HTML5. Most of the bloggers avoid starting blogging using WordPress and rather prefer Blogger because it’s free and there are no problems for hosting services.
But Blogger isn’t that efficient. The features provided by WordPress are very much better than that of Blogger. Talking about themes and templates, WordPress platform has got variety of themes which provide certain good features than that of Blogger templates. Next we come to the HTML5 templates. These templates are also similar to those of WordPress and are better than Blogger templates.
A Blogger would prefer to use HTML5 templates but most of us know that HTML5 templates cannot be added to Blogger. They are wrong! One day I was searching some templates and saw amazing HTML5 templates. I searched on how to add HTML5 templates in Blogger.
There were only a few results and from that I tried to add an HTML5 template to Blogger. I was successful but somewhere the features were not visible. I looked up at the code and then found an easier way to add HTML5 templates in Blogger platform. 
How to Add HTML5 Templates in Blogger

Why HTML5 templates cannot be added to Blogger?

In your Blogger template, you will see that the CSS is also included.  This file is called an XML file. So you can’t directly upload an HTML5 template as your Blogger templates. Also if you try to copy the whole HTML5 code and then remove the Blogger template code and paste it there, it won’t work coz it will show an error “data.post.body NOT FOUND” or some other error. So it’s better to follow the given steps to add a HTML5 template to Blogger.

How to add HTML5 template in Blogger.

1. First of all, open the index.html of the template Notepad. I prefer to use Notepad++ because it is meant for coding work.
2. Upload all the images of the template to Dropbox. I recommend you to use Dropbox as we will be doing some changes in the link later and using other service may cause problems.
3. Now if you have downloaded a custom template then just replace the text of the template to your desired text.
4. If you are familiar with HTML code, then you will see that the image resources are of your PC’s directory. So now select the image which you upload to Dropbox and replace with the current one. Now replace the (www. to dl.) in the image source. For example (“www.dropbox.com/1234  to dl.dropbox.com/1234 ”).
How to Add HTML5 Templates in Blogger
5. So by replacing all the images in this way, your templates get ready. But there is one more thing that you need to know.
6. Once you have done with index.html, open style.css. In that als
o search for such image sources and replace them using the same way. One simple trick of doing it is that check the images in the template file. If you have replaced them all then no need to search and waste your time. If you don’t find the image source then check the other CSS files.
7. If you have done with the CSS files, upload them to Dropbox. Upload all other files also except the index.html file. Now replace the sources of style.css and other Java script files in index.html using the same “dl.dropbox” way. Save the file now.
8. Now open your Blogger. Go to the template section. Scroll down and you will find a Menu “Revert to Classic Templates”. Select it and you will see blank box with the heading “Edit template HTML”. Add the contents of index.html by copying it and pasting it to the blank box. Turn off the Navbar. Hit save and check. If something is missing then again check that you have linked your files correctly. If it’s right then you are done.
How to Add HTML5 Templates in Blogger

Some Common Problems and Errors you may face

Images not loading – Sometimes you may not see some of the images not loading. Make sure that you have changed the links to the Dropbox links and also changing it to “dl.dropbox”. If that’s not the problem then check all the CSS files and make sure you have changed their links. Do not forget to link the CSS files to index.html.
Interlinking May cause problems – In many templates the CSS files are interlinked. For example: the stylesheet.css may have it’s link in the style.css file.
Do not avoid the Java Scripts – I have found some image source links and other links in the Java Script files. So do not avoid them, just have look at these files also.
Social Icons not Working – This is a common problem and it arises because of the same linking problems. If you are provided with a custom font file, then upload it to Dropbox cause in the Java Script the icons would be written as letters.
Contact Form not Working – The contact form doesn’t works on sending the message. This is because of the “contact.php” file. Check whether the file link source is correct in the index.html.
So just give it a try for fun and also to broaden your knowledge in HTML and CSS. I made many templates by using this technique and it really works. To prove I have given the link of my portfolio. 
An Example of HTML5 template in Blogger – Click HERE

Disadvantages of HTML5 templates in Blogger

You cannot post articles in it. It’s just like a one page template.
Most of the templates are not responsive. To make them responsive, you need to have a good knowledge of HTML and CSS.
If you have any problems or queries you c
an comment below or contact us.

About the author

Ahfaz Ahmed

Ahfaz Ahmed is a young entrepreneur who loves to write on various topics related to Graphic and Web Design. He has worked on many blogs and also works as a Freelancer. Apart from blogging, he is also a graphic designer and a web developer.

Add Comment

Click here to post a comment

Your email address will not be published. Required fields are marked *


Guide To Infographics