Saturday, February 17, 2018

HTML5 Template Design for Blogger, Wordpress, Medium etc.

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.
blogger template designer free, blogger template design tutorial,blogspot template design tutorial, amazing website templates


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="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
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;
  
}

Output:
blogger template designer free, blogger template design tutorial,blogspot template design tutorial, amazing website templates


Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Blogger%20like%20template%20design

Demo Link :
https://skptricks.github.io/learncoding/Blogger%20like%20template%20design/Blogger%20HTML%205%20Layout%20Design.html

This all about Blogger style HTML5 Template design including header and footer design. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.



19 comments:

  1. Replies
    1. We can use more than one, it is not an issue.

      Delete
  2. It's really good. thanks for sharing this information with us.

    ReplyDelete
  3. Hi Sumit,
    No doubt you're helping so many peoples. This is an amazing article.
    Thank you so much for posting such informative content.
    Appreciated.

    ReplyDelete
  4. Wohh Great post. Thanks for sharing this genuine post Thanks again

    ReplyDelete
  5. Hi!
    This is my first visit to your blog! I found your article very fantasy. Thanks for sharing this information. You have written very good informative information about latest topic. You have given great information article that will be very useful for me. I want to know more information deeply about it.

    ReplyDelete
  6. I've been looking for info on this topic for a while. I'm happy this one is so great. Keep up the excellent work 

    ReplyDelete
  7. Nice Post.Thanks for sharing this information.

    ReplyDelete
  8. Hi, thanks for sharing, your blog very helpful to me. i bookmarked your website

    ReplyDelete
  9. This is really awesome post. I like this topic and also I like the way you have written this post. This site has lots of advantage.I found so many interesting things from this site. It helps me in many ways. Thank you so much for sharing such an amazing post.

    ReplyDelete