--> Create Static HTML Design Of your Blogger Template | Experience Lab - Online business creation and development guide for bloggers and startups

Create Static HTML Design Of your Blogger Template

This is part 2 of our series " XHTML to HTML " . We have already learned how to turn blogspot's layout into blank HTML page bu...

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
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">






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

<div id="id-name">





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 ......................................../>




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




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. :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Create Static HTML Design Of your Blogger Template
Create Static HTML Design Of your Blogger Template
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy