Check out the below HTML5 template diagram, which gives you a brief idea about this Blog HTML5 Template.

If you are new to HTML5, Please do follow the below links to build more understanding and after that you will able to

Blogger template design tutorial

Blogger HTML 5 Layout Design.html

<!DOCTYPE html> <html> <head> <meta charset = "utf-8" > <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" > <title> HTML5 Template Design </title> <meta content = 'HTML5 Template Design' name = 'description' /> <meta content = 'width=device-width, initial-scale=1' name = 'viewport' /> <link rel = "stylesheet" href = "style.css" /> </head> <body> <div id = "main-container" > <header id = "header" > <img src = "http://1.bp.blogspot.com/-ZOdpphDQl-U/WWw49Og-H5I/AAAAAAAAA1I/Cub7AcvWjdI786uCnmgjIWM9R6teug_uwCK4BGAYYCw/s1600/3589758-designstyle-soccer-m%2B-%2BCopy.png" /> </header> <nav> <ul> <li> <a href = "http://www.skptricks.com" > HOME </a> </li> <li> <a href = "http://www.skptricks.com/p/php.html" > PHP </a> </li> <li> <a href = "http://www.skptricks.com/search/label/java" > JAVA </a> </li> <li> <a href = "http://www.skptricks.com/search/label/jquery" > JQUERY </a> </li> <li> <a href = "http://www.skptricks.com/search/label/AJAX" > AJAX </a> </li> <li> <a href = "http://www.skptricks.com/search/label/android" > ANDROID </a> </li> <li> <a href = "http://www.skptricks.com/p/selenium.html" > SELENIUM </a> </li> <li> <a href = "http://www.skptricks.com/search/label/MYSQL" > MYSQL </a> </li> <li> <a href = "http://www.skptricks.com/search/label/html5" > HTML </a> </li> <li> <a href = "http://www.skptricks.com/search/label/javascript" > JAVASCRIPT </a> </li> </ul> </nav> <section id = "main-body-container" > <section id = "main-article" > <article id = "article-post" > <h1> <a href = "#" > Twitter Like Expanding Textarea Box With Jquery </a> </h1> <section> In this tutorial, we are going to discuss how to create Twitter like Expanding Textbox with Jquery. It is very simple and easy to use. Here we have used focus and focusout function of Jquery. </section> </article> <article id = "article-post" > <h1> <a href = "#" > Facebook loading animation using CSS3 </a> </h1> <section> Today we are going to discuss Facebook loading animation using CSS3. If you observed that when you open Facebook in web application it shows a content loading placeholder like below screenshots.To display loading effect in webpage based application, you need some ideas on CSS3. Here we are using CSS3 Keyframes to create desire effect. </section> </article> <article id = "article-post" > <h1> <a href = "#" > Create Pagination in PHP, MYSQL, JQUERY and AJAX </a> </h1> <section> In this tutorial we are going to build AJAX Pagination with PHP using jQuery Pagination plugin. With the help of pagination concept we will load list of records/data from MySQL database. Here I am using AJAX to fetch records for each page from database with jQuery. </section> </article> <article id = "article-post" > <h1> <a href = "#" > Htaccess File Tutorial and Tips </a> </h1> <section> Today we are going to share some ideas about Htaccess. Basically Htaccess is a configuration file use on web servers running the Apache Web Server software and Using Htaccess you can easily configure and redirect Apache Web Server file system. </section> </article> <article id = "article-post" > <h1> <a href = "#" > JQuery Date Picker With Example </a> </h1> <section> In this tutorial we are going to discuss Jquery UI Datepicker. This is a smallest and powerful jQuery UI datepicker, which provide lots of functionalities and very easy to use and integrate in web based application. </section> </article> </section> <aside id = 'sidebar' > <a href = "http://www.skptricks.com/" ><img src = "welcome to skptricks theme.jpg" width = "90%" /> </a> </aside> </section> <footer id = "footer" > Copyright © <a style = " color : white ; " href = "http://www.skptricks.com" > www.skptricks.com </a> </footer> </div> </body> </html>

Style.css

* { margin : 0px ; padding : 0px } #main-container { width : 80 %; margin : 0px auto ; background : #FFF; } body { background : #e5e5e5; } #header { padding : 10px ; color : white ; } #header:after { content : "." ; display : block ; height : 0 ; clear : both ; visibility : hidden ; } nav { float : left ; background - color : #2e2e2e; margin - left : 10px ; min - width : 90 %; } nav ul { list - style : none ; height : 30px ; padding : 0px ; margin : 0px ; } nav ul li { float : left ; margin : 0px ; display : block ; padding : 12px ; text - align : center ; min - width : 80px ; font - size : 16px ; font - weight : 600 ; } nav ul li a { text - decoration : none ; color : white ; font - weight : bold ; color : white ; } nav ul li : hover { background - color : #3cc091; } #main-body-container { padding : 10px ; margin : 10px ; margin - top : 50px ; } #main-body-container:after { content : "." ; display : block ; height : 0 ; clear : both ; visibility : hidden ; } #article-post{ margin : 10px ; margin - top : 10px ; } #article-post h1, #article-post h1 a{ font - size : 24px ; text - decoration : none ; color : #0c97d2; } #main-article { float : left ; width : 60 %; min - height : 450px ; } #sidebar { float : right ; width : 38 %; min - height : 450px ; } #footer { background - color : black ; padding : 10px ; color : white ; }

Lets see the complete. Here we have tried our best to make this demo as simple as possible, so without wasting time, see the below source code.This Main page for HTML layout design including header, article, section, aside, footer tag etc.This is a stylesheet design for above HTML5 template design.