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

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.



53 comments:

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

    ReplyDelete
  2. 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
  3. Wohh Great post. Thanks for sharing this genuine post Thanks again

    ReplyDelete
  4. 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
  5. 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
  6. Nice Post.Thanks for sharing this information.

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

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

    ReplyDelete

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

    ReplyDelete
  11. 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
  12. 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
  13. Instead of using the plugin we can create this to get the safest blog.
    Thanks for this author.
    Great thought

    ReplyDelete
  14. Nice article. Thanks for sharing

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

    ReplyDelete

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

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

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

    ReplyDelete
  19. 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
  20. Hi, you really share a nice post and I really get something to learn from your post.Keep sharing more content like this !

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

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

    ReplyDelete
  23. 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
  24. your information is remarkable ..i have learned a lot

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

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

    ReplyDelete
  27. 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
  28. 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
  29. It's extremely pleasant and meaningful. it's extremely cool blog. Connecting is exceptionally valuable thing.you have truly helped bunches of individuals who visit blog and give them useful data.

    Importance of email marketing

    ReplyDelete
  30. Thanks for sharing the post
    I would like to share the post
    Some useful links for
    Best Software Training Institute
    http://www.peerstech.com
    By Govind

    ReplyDelete
  31. I'm using this website to download templates for all of my own websites. Try to, sure you'll find great for yours too.

    ReplyDelete
  32. Thanks for sharing such a great article with useful content. Expecting more article like this in future.
    http://pragatisoftware.com/advanced-excel-training

    ReplyDelete
  33. Excellent article.very interesting to read. I really love to read such a nice article. Thank you so much for providing the important information. please check this website

    ReplyDelete
  34. Well explained without confusion. Keep sharing thanks."
    "Well, explained and informative. Really this blog is helpful to me.
    Advertising Agency in Hyderabad

    ReplyDelete
  35. Great blog very helpful for designers.

    ReplyDelete
  36. Easy to understand. Thank you for sharing such valuable blog teachers help teachers
    .

    ReplyDelete
  37. Wow. This is the great stuff. Thanks for sharing with us. Fortnite Mobile APK

    ReplyDelete
  38. Thank you so much for sharing these amazing tips.Thanks for sharing such an awesome post. This is very informative and helpful.Digital Signature Certificate

    ReplyDelete