If you are working on a HTML design and having difficulties on how to convert your design into blogger, I will give you unstyled template so you can apply your style into it. But remember do not apply this on your main blog. Try it first on your test blog before you apply. This is an unstyled template, so you need to style it with css and some css selector id and class into it.
The code :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Basic Template
Name: Basic
Designer: Free
URL: www.yourblog.blogspot.com
----------------------------------------------- */
/* All Css will go over here */
]]></b:skin>
</head>
<body>
<!-- header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='bali to do (Header)' type='Header'/>
</b:section>
<!-- end of header -->
<!-- content -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- end of content -->
<!-- widget -->
<b:section class='sidebar' id='sidebar1' prefered='yes'>
</b:section>
<!-- end of widget -->
</body>
</html>
Copy the text and paste it into notepad or dreamweaver then rename it to yourfilename.xml
That is unstyled template I mean it is so basic so you need to add your personal touch. To do that, you need to know CSS layouting. Check this site, http://w3school.com to learn more about CSS. If you have done with the CSS, then you need to apply it through css selector id and class.
I give you example on how you will do that.
<body>All right that is how you do the styiling touch to unstyled template. I give you some point :
<div id="outer-wrapper">
<div id="body-wrapper">
<!-- header -->
<div id="header-wrapper">
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='bali to do (Header)' type='Header'/></b:section></div>
<!-- end of header -->
<!-- content -->
<div id="content">
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section></div>
<!-- end of content -->
<!-- widget -->
<div id="sidebar">
<b:section class='sidebar' id='sidebar1' prefered='yes'>
</b:section></div>
<!-- end of widget -->
<!-- footer -->
<div id="footer">
All footer credit go here
</div>
<!-- end of footer -->
</div>
</div>
</body>
You may add widget to any position regarding your style but remember to keep the id unique. What is id ? <b:section class='sidebar' id='sidebar1' prefered='yes'> the bold word is what I mean. You can change it to your own like. For example, sidebar2/footer1/footer2 or whatever you want to.
There still much blogger component available. Check on http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=42095 but with one I provide here is enough to build custom template.
Next you should look the classes and id with tick the expand widget. To touch the inner deep of blogger component. For example you may need to change the font or you may need to change the background. You may also change the class or id according to your taste.
Okay I hope this will help you to build your own custom template. If you have question you can leave a comment below or email me. Should you know i am not a master of webdesign and coding. I just learn every css and those html tags recently. But i am willing to share those information with you if you need it.
Posts
1 comments:
nice tutorial...surely it is very basic so we need to do all the styiling thing..but it is nice..not every blog provide such tutorial. hey this is my first visit and i saw you are also from bali. see here if you interested on some bali's picture on htt://picturesofbali.blogspot.com make sure you visit it.
Post a Comment