Convert Blogger Template Into a Blank HTML Page Using Code

Convert Blogger Template Into a Blank HTML Page Using Code

Today i am going to show you a trick on how to convert your Blogger template into a blank html template.

Its pretty easy as you only need to copy and past the code in your blogger template, and add anything as you wish. We have have created two template the first template is fully blank and the other with an About Me Google profile.

Please don't remove the Credit link from the template.

Convert Blogger Template Into a Blank HTML Page Using Code
Demo 1
Just copy the code shown below and paste it into your Blogger template.

Click on the link for Live Demo 1 and Live Demo 2.

Step to install blogger code:

1. Go to Blogger Dashboard.
2. Create a new blog to test the code.
3. Add a simple template to your blog which you have created.
4. Click on the Template & Edit HTML & and move on.
5. Replace the below code with Blogger code.
6. Blank Template has been installed on your Blog.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
    <b:if cond='data:blog.isMobile'> 
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
    <b:else/> 
      <meta content='width=1100' name='viewport'/> 
    </b:if> 
    <b:include data='blog' name='all-head-content'/> 
    <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[/*
-----------------------------------------------
/////////// HTML THEME////////////////////////////////////////////////////////////////////////////////////////
////////////////////////TEMPLATE CREATED BY : FRINTON MADTHA////////////////////////////////////////////////////////////
/////////////////////// DOWNLOAD FROM: www.FRINMASH.BLOGSPOT.com  //////////////////////////////////////////////////
----------------------------------------------- */

]]></b:skin>
  </head>
  <body>
<div style='border: 1px solid lightblue; padding: 10px;'>
<h3>About Frinton</h3>
<div class='widget-content'>
<a href='YOUR GOOGLE  PROFILE LINK'><img alt='My Photo' class='profile-img' height='90' src='YOUR GOOGLE  IMAGE' width='80'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='YOUR GOOGLE  PROFILE LINK' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);'>
YOUR NAME</a>
<br/>
  <div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/103188197674714680428'/> 
  </dt>
  </dl>
<a class='profile-link' href='YOUR GOOGLE  PROFILE LINK' rel='author'>View my complete profile</a>
  <br/>
  <br/>
<div class='fb-follow' data-href='https://www.facebook.com/YOUR NAME' data-show-faces='true' data-width='550'/>  
  <div class='clear'/></div></div>
    <br/>
    <br/>
<!--Start Please keep the Credits intact-->
<div style='margin-top:0px; '> 
<center>
  <p class='author'>&#169; <b>Frinton Madtha Productions</b> Collaboration with<a href='http://frinmash.blogspot.com/'> FrinMash </a></p></center></div>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<!-- End Please keep the Credits intact-->
  </body> 
</html>

You can add Facebook, Twitter and more social buttons in the template above temp code .If you are having problem in adding code use HTML Encoder.

We have also added a youtube video on the to show you can add more codes to the template.

Adding the below CSS code will make your blog videos responsive.

            video {
            max-width: 100%;
            height: auto;
          }

          iframe,
          embed,
          object {
            max-width: 100%;
          }

          .container {
            width: 70%;
            padding: 5%;
            margin:0px auto;
            background:#fff;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
          }

          .vendor {
            padding: 2%;
            background: #d1eed1;
            margin-bottom: 2em;
          }

          .unsupported {
            background: #fddfde;
          }

If you don't want to add show responsive videos delete, the above CSS adjusts video code.

Add the below code above the </body> tag of template if you want to show post.
<b:section class='main' id='main' showaddelement='yes'> 
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> 
</b:section>

Image: FrinMash
SHARE

About Frinton Madtha

    Disqus Comment
    Facebook Comment