Own HTML in Blogger Blog Static Page

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='http://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.

This is Sagar Devkota Co-Founder of Time and Update. I write about Online Earning, Blogging, Web Hosting, Domain Registration, local technical news and some time about Cryptography. I also write about Git, Database, Java, Android, Linux (ubuntu). Studying Bachelor of Software Engineering.

3 Comments

  1. Howdy! This post couldn’t be written any better!
    Reading this post reminds me of my old room mate!

    He always kept talking about this. I will forward this post to
    him. Pretty sure he will have a good read. Thanks for sharing!

Leave a Reply

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