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.



47 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
  10. It's really good. thanks for sharing this information with us.
    Web Development

    ReplyDelete

  11. I really like your post because it is useful for readers so thanks for writing a such useful informations.

    ReplyDelete
  12. I have perused your Post; it is exceptionally useful for me. What’s more, I need to express profound gratitude to you. Company Registration in Mumbai

    ReplyDelete
  13. This is a very useful professional article. I’ll make sure to bookmark it and come back to learn extra of your useful info. Web Application Development
    Thanks for the post
    Regards
    Siva

    ReplyDelete
  14. Instead of using the plugin we can create this to get the safest blog.
    Thanks for this author.
    Great thought

    ReplyDelete
  15. Nice article. Thanks for sharing

    ReplyDelete
  16. Nice blog.. well explained..
    http://www.wats.ae/

    ReplyDelete
  17. Brilliant post!! I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much & will look for more posting about NJMP

    ReplyDelete

  18. Great blog i really love your information. Keep up your good work.Visit: https://www.myicetag.com/

    ReplyDelete
  19. Thank You for the information, Keep it up.
    comparabit

    ReplyDelete
  20. Very good post really loved it
    plz read also eid quotes
    have a good day

    ReplyDelete
  21. Hi, Thanks for writing this article. your blog is really informative, keep writing. I shall be waiting for your next post. Knowledgeable reading your post.
    See here How to register a company

    ReplyDelete
  22. Hi, you really share a nice post and I really get something to learn from your post.Keep sharing more content like this !

    ReplyDelete
  23. Hi, really nice post. Thanks for writhing this informative post.

    ReplyDelete
  24. HTML tage seems really tough to me. I hope I will understand it with such articles. Thank You :)
    check kids IQ here 

    ReplyDelete
  25. Hello there, Thanks for composing this article. your blog is extremely enlightening, continue composing. I will sit tight for your next post.
    thank you by xbox skins

    ReplyDelete
  26. your information is remarkable ..i have learned a lot

    ReplyDelete
  27. Thanks for your example its simple and easy to understand .http://www.couponput.com/

    ReplyDelete
  28. I am also associated with Platform Developer 1, Platform Developer 2, Platform Developer 2 Dumps, Platform Developer 1 Dumps, Salesforce Data Architect Certification Questions, and love to enjoy the stuff on the same as its rarely found on internet. Thanks again for writing such a good post.

    ReplyDelete
  29. Awesome content, really i enjoyed, throughout the content, and thanks for writing such a good article.
    www.packagingpapa.com

    ReplyDelete
  30. 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.
    Colts game live Stream

    ReplyDelete
  31. Such an amazing job accomplished! Thanks for giving us this nice, useful piece of information. Thank you for posting such a great article!
    apostille documents

    ReplyDelete