Design a blogger template from scratch

Posted by Dr.K@meleon at 11:47 AM . Sunday, October 12, 2008
10 comments
Labels: , , , , ,

Step 3 - The Basic Structure

  1. This is the basic visual structure of a template containing :
    • Header-Wrapper (Header)
    • Content-Wrapper
          • Main-Wrapper (Posts' section)
          • Sidebar-Wrapper
    • Footer-Wrapper (Footer)
    main-layout
  2. The adopt that in our structure, for each one we must create a separate DIV section, like this : 
    	<div id="outer-wrapper">
		<div id="header-wrapper">

		</div>


		<div id="content-wrapper">
			<div id="main-wrapper">

			</div>

			<div id="sidebar-wrapper">

			</div>
		</div>


		<div id="footer-wrapper">

		</div>
	</div>

  3. Copy/Paste the above code between in your BODY section, between the body tags.
  4. Save your Template.
  5. Return to your blogger account (in Edit HTML) and choose Browse to find your template (test.xml) and then upload it.
  6. Reload your blog page (xxxxx.blogspot.com). What you must be seeing now is nothing but a blank screen.
  7. Are you ready to start filling the void? If so, proceed to the next step.

 

<< Previous Step

Next Step >>

Design a blogger template from scratch

Posted by Dr.K@meleon at 11:47 AM .
2 comments
Labels: , , , , ,

Step 2 - The First Lines

  1. Open Wordpad or another editor and start a new empty text document. (Notepad++ is excellent for that purpose)
  2. The main structure of any web page is : 
    <html>
	<head>

	</head>
	

	<body>
	
  	</body>
</html>
    Remember that the HEAD section usually contains general info (such as title, style properties, etc), where as the BODY section includes the main contents and structure.
  3. For this to work as basic XML template though, to this basic structure, we must add a few more details. Check out the differences marked in red. 
    
<?xml version="1.0" encoding="UTF-8" ?>
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
	<head>
		<b:skin><![CDATA[

		]]></b:skin>
	</head>
	

	<body>
	
  	</body>
</html>
  4. Copy/Paste the above text to your empty Text Document. Save your document as Test.xml.
  5. Return to your blogger account (in Edit HTML) and choose Browse to find your template (test.xml) and then upload it.
  6. If it asks for your permission to delete several widgets, if this blog is really an experimental one, then accept.
  7. Reload your blog page (xxxxx.blogspot.com). What you must be seeing now is nothing but a blank screen.
  8. Are you ready to start creating our layout? If so, proceed to the next step.

 

<< Previous Step

Next Step >>

.