Saturday, February 17, 2018

Skptricks CSS html html5 web development HTML5 Template Design for Blogger, Wordpress, Medium etc.

HTML5 Template Design for Blogger, Wordpress, Medium etc.

by Sumit Kumar Pradhan on February 17, 2018 February 17, 2018 in CSS, html, html5, web development

Today we will discuss how to create HTML5 Template Design for Blogger, Wordpress, Medium etc. we are making a HTML5 web template, using some of the new features of HTML5. In this tutorial, we are using a few of the tags introduced with this new version of HTML.

header - wraps your page header.
footer - wraps your page footer.
section - groups content into sections (e.g. main area, sidebar etc).
article - separates the individual articles from the rest of the page.
nav - contains your navigation menu

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 create website template:

Blogger template design tutorial

Lets see the complete example to create HTML5 Template Design for Blogger, Wordpress, Medium etc. Here we have tried our best to make this demo as simple as possible, so without wasting time, see the below source code.

Blogger HTML 5 Layout Design.html
This Main page for HTML layout design including header, article, section, aside, footer tag etc.

<!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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2z_2tUIL8VKG2a50thoFC3YrEdS9eslLs9fgnYzEgNLjJKkutYhdW6p3gyITnzEsKzwSnzj1zk18USNeQ38JCwmACziVN-e3vUfvrnJLh8ze2KBlOjQ27xB2T-xh4HhKtU4SSLviDu61/s1600/3589758-designstyle-soccer-m+-+Copy.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
This is a stylesheet design for above HTML5 template design.

* {
     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;
  
}