2013-09-29



Demo 2

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. 



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  //////////////////////////////////////////////////
----------------------------------------------- */
          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;
          }
]]></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'>© <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 the
.If you are having problem in adding code use HTML Encoder. 

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

You can remove this code from
 

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. The above CSS adjusts videos.

Image: FrinMash

Show more