Time and Update

Own HTML in Blogger Blog Static Page

Sagar Devkota

Hello all today I am here guiding you about how to create a page with your own html code in blogger. You can have full control over that html codes. You can use Java-script, CSS what ever you need. I will guide through some basic to create your own blogger static blogger template. Remember for now Here I did not expect of post pages and other. about that will post on future posts. First step is to make it a blank Template so Create a Empty Template for Blogger. So first add the template on your blog. Own HTML in Blogger Blog Static Page

Now remember <b:section class=’main’ id=’main’ showaddelement=’yes’/> is the essential for every Blogger Template. Now you can add your HTML codes. in between<body> to </body>.

Add CSS inside <style> and </style> or from external site as <link href=’Link goes here’ rel=’stylesheet’/>

Insert java-script as or from external source <script src=’links goes here’/>

if you need to insert some blogger widget add this code <b:section class=’main’ id=’main2′ showaddelement=’yes’> and </b:section> to the exact line in html code and you can see add widget options from layout option. Every time you need to add widget remember ID should not be common.

We will add simple html code and a widget. You can Use Css to customize it. Make a better blog.

Here is a Preview

Layout Preview

Code Preview:

<?xml version="1.0" encoding="UTF-8" ?>
<html 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[
 /* 
 body { 
 font: $(body.font); 
 color: $(body.text.color); 
 background: $(body.background); 
 padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); 
 $(body.background.override) margin: 0; 
 padding: 0; 
 }
 
 ]]></b:skin>
 </head>
 <body>
 <b:section class='main' id='main' showaddelement='yes'/>
 Empty template by <a href='https://timeandupdate.com'>Time and Update</a>
<b:section class='main' id='main2' showaddelement='yes'>
 
<!-- Add Widget From Layout Page in Section main2 -->
 
</b:section>
 </body>
</html>

In above Code we add A simple html code and a widget too. Following this process you can create your blog as a static one page website. Own HTML in blogger Blog Static Page. Create your blog with your own code dont forget to comment your website link.