To create successful blog, it needs to create blogger template more attractive and looks more professional. Even you can buy professional blogger template on the web, you may want to create blogger template by yourself for your blog. Creating a professional blogger template is more challenging task, but if you have some knowledge on HTML, XML, CSS and JavaScript, it is possible to create professional blogger template easily by yourself. In this series of tutorial, I am going to teach you basic to advanced steps to create blogger template. Today I am telling you "steps for creating a simple blogger template" with describing basic elements and along with its corresponding style sheet codes.
Step1: Preparing demo blog for creating blogger template
To test blogger template you have created, at first you need to set up a blogger blog and have to add some posts on the blog. To create a blog, go to blogger home page, log in using your Google user name and password and then click on create a blog link to get started. Write posts for a blog by clicking on create a new post button from the blogger dashboard.
Step2: Creating basic elements for blogger template
Open Notepad file write the codes according to the following format and save it as .xml extension.
# Creating XML Part
At first, add the following codes for Document Type Deceleration(DTD) on XML part.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
<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'>
# Creating Header Part
After that, add the following header elements like head and title of the blog.
<head>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
</head>
# Creating CSS Part
Add custom css codes for your template in the following format. The css codes must be placed inside
body{
font:normal normal 14px Verdana,Geneva,sans-serif;
color:#000;padding:0 40px 40px 40px;
background:#fff;
font-size:14px;
}
#outer-wrapper{
CSS for outer-wrapper
}
#header-wrapper{
CSS for header-wrapper
}
#titlewrapper{
CSS for titlewrapper
}
#descriptionwrapper{
CSS for descriptionwrapper
}
#menuwrapper{
CSS for menuwrapper
}
#contentwrapper{
CSS for contentwrapper
}
#mainwrapper{
CSS for mainwrapper
}# Creating a Menu
To create menu for a blog, add the code in the following format. Replace URL and name of the tabs.
<div id='menuwrapper'>
<ul class='FirstLevel'>
<li><a href='http://www.homepage.com/' target='_self'>Home
</a></li>
<li><a href='http://www.homepage.com/menu1.html' target='_self'>Menu1
</a></li>
<li><a href='http://www.homepage.com/menu2.html' target='_self'>Menu2
</a></li>
<li><a href='http://www.homepage.com/menu3.html' target='_self'>Menu3
</a></li>
</ul></div>
# Creating blog content
To add main blog content part, add these codes to create a widget named Blog1.<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML1' locked='true' title='Header' type='HTML'>
</b:widget>
</b:section>
</div>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</div>
</div>
</div>
Step3: Creating gadgets on sidebar and footer.
To create sidebar and footer and to add widgets for them add these code, which allows you to add widgets on sidebar and footer.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</div>
Step4: Installing blogger template on required blog.
After creating a code file on Notepad in XML format, test it on demo blog. To install prepared template, click on backup and restore button from template option on blogger dashboard. Click on download full template, the xml file will be downloaded. Then go to the required blog then go to Template › Backup / Restore option and browse and upload that xml file. The template will be applied on your blog.
Related Posts:
- How To Make Simple CSS Stylesheet for a Website ?
- How To Create Simple Menu Using CSS ?
- How to validate required field in a form using javascript
- How to Display Date Format in JavaScript?
- How to Create a Digital Clock in JavaScript?
- What are the Different Ways to Redirect Page in JavaScript?
- How to Detect Visitor's Browser Using JavaScript?
- Image Slideshow with Navigation Buttons Using Javascript
- How to Create Simple JavaScript Fade Effect Animation?
- Simple JavaScript Fade Effect Animation Using Jquery
