Create Static HTML Design Of your Blogger Template


design blogger templateThis is part 2 of our series "XHTML to HTML" . We have already learned how to turn blogspot's layout into blank HTML page but we have no yet shared how to remove the dynamic XML tags alone leaving behind the stylesheet, scripts and html design. In today's tutorial I will try to share the basic way of understanding a websites core structure by identifying the important div sections that make up the structure. I hope you have followed part one of the series and have downloaded your blogspot template. I also assume you have Dreamweaver or Codelobster installed on your desktop computers or laptops.


Live Demo
XHTML To HTML
Part2: Create a HTML Design Of your Blogger Template
Part3: In progress

Identify the Div Sections

Div sections are division blocks or containers that hold elements inside it to layout a web page. The <div> tag defines a division or a section in an HTML page. It starts with a <div> tag and ends with a </div> tag.  When a div section is styled, we add the CSS ID or class to it as follows:

If you want to introduce a class in Div, do this:

<div class="class-name">

...

...

..

</div>

 

If the Div section is styled using an ID, it will look like this:

<div id="id-name">

...

...

..

</div>

In CSS code a class always starts with a dot at its beginning and Id starts with a hash sign as shown below:

For class:

.class-name {

---

---

-

}

 

 

For Id:

#id-name {

----

--

--

}

 

Now when you have understood what a Div section is, you will be able to identify these slices (div) that define your overall blog layout.

  1. View your blog either in Firefox or Chrome. I prefer Firefox
  2. On an empty section (the background) of your blog right click and choose "Inspect Element"

inspect element

    3. Two windows will open. The bottom window will highlight the core HTML of the blog and the area on your right highlights the CSS.

firefox inspect element

In the HTML section you will see important div sections. If you click any div tag, all html inside it will expand and when you click back it will contract. The important thing to note is what section is highlighted on your blog when you click a div. Note down that section for that particular div and save it in a notepad. Start from Divs at the top to divs at bottom. Go in sequential order.

For example if I click on the div tag for mbt highlighted below as <div id="wrap">  the entire container holding all the blog contents except the top-sticky-bar are highlighted. That's how I identified what this div does and what sections can be styled using it.

highlighted div section

Use the same method to identify the divs for Header, Navigation, Post container, Sidebar Container and finally the footer. The divs must go in order and keep track of which div is nested under another div. For example in my case the navigation, header, post body and sidebar all comes under the wrap div. So I will insert the remaining divs inside it.

This may sound a little techy for people not familay with HTML tag priorities but for developers who wish to understand how to create a clone design the method above can't be more clear than this.

Remove the Dynamic Tags

  1. Use Dreamweaver or Codelobster to open the xml file you downloaded
  2. Find each div tag and edit the code inside each one of them.
  3. For example for the outer-wrapper div tag I delete the div tags for post body and sidebar leaving the entire area vacant and then I add the contact form inside it. Visit our contact page to see the wide area with no sidebars and post-section.

identify the nested div containers

The dynamic code is easy to identify because all widgets have this basic structure:

<b:section ........................>
<b:widget ......................................../>

<b:widget ......................................../>
<b:widget ......................................../>

 

</b:section>

 

A widget container is initiated using the b:section tag and widget content is initiated using the b:widget tag. Find them all and replace the b:section tags with static div tags like the following:

 

<div ........................>


Delete all code inside B:widget tags found here

 

</div>

 

Once you are done with this, you will find your template looking neater and getting in shape if you are using code lobster or dreamweaver. It took me 4 hours to clean up MBT's code so it should not take you long. Its lengthy process but extremely interesting and worth trying. Once you have learnt how to do this, in our next part, I will teach you how to add a PHP contact form inside the Cloned Blogger template that looks exactly like the original blog, giving the user a great experience. 

I know you have tons of questions!

Of course this method is a little techy for newbies and would have given a headache to most of you but you may not panic and just post me a comment. I will be at your service. I reply late but I do reply! =)

I wish this tutorial may help you better understand the possibilities of customizing the Google hosted free blogs. There is no end to Blogger customization and you must try every possible tutorial that comes along your way because only Blogspot layouts can turn you into a brilliant web developer. Peace and blessings buddies. :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

30 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. One more effective post. I am afraid that after you complete the series the no. of people who can copy other's template will surely be increased..

    ReplyDelete
  2. Well, Nicely Explained Brother. Indeed a great way of curating a Template. However, as the things are getting forward it will get too complicated for a person to understand, especially a nut like me lol. Nice to see some mind soaking posts back on MBT. Cheers buddy

    @Rounak Baral

    Dude I Don't think so that people can copy themes. Because its too complicated. You have to try learn a lot before you can copy themes. This tutorial series might prove out to be a nightmare if you don't know what is HTML CSS and especially XML ;)

    ReplyDelete
  3. Great post.
    I learned a lot from this post.
    Thank you so much.

    More Blog Tools

    www.MoreBlogTools.com

    ReplyDelete
  4. Awesome Post . Even I am starting a series which is a little similar to this , so please do visit www.techravers.com .

    Regards,
    Navneet
    www.techravers.com

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. that's really awesome...and thanks for a great post ..

    Akhil Abraham
    Blog:All Blogging Tools.com

    ReplyDelete
  7. Awesome Thanks for sharing this :)


    Regards
    Rahul Kashyap
    Blog:
    SDMMovies.com
    movies4u.us

    ReplyDelete
  8. thanks for this awesome series i must say you r the guru of tip n tricks keep it up ;)

    Regards:
    Myblogginglab (myblogginglab.blogspot.com)

    ReplyDelete
  9. Mind blowing and Amazing.I have no words to explain my feeling.It is the information, I will not going to get anywhere on internet.This series is teaching us the every single bit of basic languages and xml.A best comeback Mohammad Sir.Looking for third post of this series.Wooooo!
    Get Domain For Free-giveaway

    ReplyDelete
  10. One question what is user agent style sheet and it is not editable?
    What to do.

    ReplyDelete
  11. Just One word "Excellent"
    Very nice Tutorial with Detailed Info and Steps..!
    thanks So Much Mohammed Bhaijaan
    BlogEclipse.com- SEO and Money Making Blog

    TricksMe.in-technoloGy Blog

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Thanks bhai for sharing all this useful stuff with us!
    I wanna know that what are these <b : section etc tags ? .Can we use these tags in a normal html document to make it dynamic.
    I mean that is a blogger template made dynamic by the use of these tags? Cuz a normal html doucment containing no php etc is a static web page or a file/template etc.
    And with what are these tags linked?
    Thanks, ( I know some of the quesions may sound noobish but what can I do, If they are irritating me lol!)

    ReplyDelete
  14. @Admin

    Why you deleted my comment. What the wrong was it???

    ReplyDelete
  15. I learned much more to read this post thank
    www.expressivehealth.com

    best regards,
    Faheem Alam

    ReplyDelete
  16. Want to download windows 8 pro/entre.so what you are waiting for you must logonto: www.haritdagar.co.cc

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. hi Mohammad,

    Nik here from wildhacker, I wants to change home page image size of blog post as like your website home page. Want to set image size as default.

    Please tell me how i can did it?

    thanx in advance...

    ReplyDelete
  19. awesome post...can you review or suggest if any errors in my blog...please i want to apply for adsense so...

    ReplyDelete
  20. Helpful and useful blog I have found on the internet keep writing the blog.

    Website design training

    ReplyDelete
  21. Thanks a lot for this post. i really enjoyed reading this.

    New Blogger Tips

    www.NewBloggerTips.com

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. nice post
    download android app on
    www.androidallapp.blogspot.com

    ReplyDelete
  25. I found your website perfect for my needs. It contains wonderful and helpful posts. I have read most of them and got a lot from them
    Web Design Company

    ReplyDelete
  26. Nice article ! I felt very pleasure to share my experience here . I used website builder (site studio ) tool and pre-defined templates to design my blog. I got it as a freebie from the provider 9cubehsoting.com after getting hosting plans from them at affordable cost .

    ReplyDelete