https://www.google.co.in/search?q=how+to+create+blogspot+template+from+scratch
Understanding the
<b:section> and <b:widget> tagsMust read: Intro, Section and Widget attributes. This page gives a brief explanation of the Section and Widget parts of the template. Also the attributes of the
<b:section> and <b:widget> tags are listed here which we will use later on.
<?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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
</b:skin>
</head>
<body>
<b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
</b:section>
</body>
</html>
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-template-from.html
<?xml version="1.0" encoding="UTF-8" ?>In the above basic coding, you'll see that there are XML and HTML tags in the starting which means that this is built with XML and HTML. The main extension for this coding will be .XML. If you copy the above coding and paste it with the whole coding of a template then it will be saved and will show nothing on blog because this is simple blank HTML page. Let's understand the basic structure.
<!DOCTYPE html>
<html 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>
<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>
<b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
</body>
</html>
1. XML and HTML tags : As I already told you that XML and HTML tags are the main tags in which whole template will be stored. If we want to save this template in computer then we'll choose .XML extension while saving because blogger supports only .XML file templates.
2. Long <title> Coding : If you look in the title code below <head> you'll see long coding between <title> tag. Basically, That is customized title coding which has many benefits. We've used conditional tags to customize this title coding. The first condition tells that if someone opens the homepage or index main page then it will write the blog title as title of the webpage. Second condition is to show the post or page title first and show blog title after post or page title. In the last, there is 404 error page title coding.
3. <b:skin> Tag For Storing Stylesheet : There is additional built in tag for blogger templates to use <b:skin> tag with CDATA for storing the whole CSS or stylesheet of the blog. In these tags, you'll only see CSS which is being used in the whole blog. So, every CSS which you'll write should be placed in these tags.
4. <b:section> Tags For Widgets : In blogger, we use these tags to create widgets. Most important things like Blog Title and Content are done by implementing widgets in templates. In short, There are default widgets which are for Header and Blog Content which we use while creating template. For creating widgets, we should cover them with <b:section> tags which will help us to prepare layout page.
Step 3. Creating Header
After learning the basic structure, let's get started by creating header
of blog. Basically, There are only two important things to create a
blogger template. First one is Header and second one is Blog Content.
Other things are also important but these are most ones. We'll use
custom Header widget and will customize it according to our needs.
Basically, Header is a widget and you know for creating widget, we
should create section for a single or multiple widgets. Copy the code
below and paste it anywhere in the <body> of template where you
want to display Header widget.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>The above coding is not complete coding of Header but when you'll integrate the above coding in template then it will automatically become longer. Save this template, reload the Edit HTML page and you'll see expand arrow in the left side of <b:widget> tag. Blogger will automatically write the default coding on it. So, let's understand this header coding.
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
1. <b:section> having class='header' and id='header' : First of all, in the section tag, you'll see class='header' and id='header' which are common CSS class and id tags. So, by the help of these tags, you can do customization of header like giving specific width, height, margin, padding, font size, color etc to the header section only.
2. <b:section> having maxwidgets='1' : I don't need to explain these simple things, but for totally newbies I'll explain it. There is another XML tag of blogger which is maxwidgets='1' by this, we can simply set the number of maximum widgets in that section just replacing the number 1.
3. <b:section> having showaddelement='no' : This is just another simple tag by which we can disable or enable the Add a Gadget option.
4. <b:widget> having id='Header1' : In the header widget, there is CSS id tag by which we customize the header widget with CSS.
5. <b:widget> having locked='true' : This tag allows you to lock and unlock widgets easily by choosing true or false. When the widget is locked, one can't easily edit that through layout page.
The current settings for this header widget and section are fine so we'll not edit them. Below, I'm going to give you class and ID CSS tags which will help you to customize header widget. Simply, add this below CSS between <b:skin> tag and fill them with your own properties.
#header { }
#header h1 { }
#header h1 a { }
#header .description { }
Step 4. Creating Pages Menu Widget
I forgot to mention the pages menu widget which is also important for
creating menu. That kind of menu only displays the those links which are
actually pages made in blogger blog. In default blogger templates, it's
mostly used so here I'm going to teach you how can we implement them in
our blogs. I'll just give you default XML and HTML coding and will show
you way to design that with CSS. If you're well known with HTML and CSS
then you can easily make custom menu there anywhere in the template.
But for this pages menu, you might face problem. Let's get started.
This pages menu widget is also done by creating widget section and
widget. So, below I'm going to give you another code which will be
having section tags and there will be page list widget which is the main
thing. Just put the below coding anywhere where you want to show up
that pages menu widget.
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>As we did in Header widget, this is also just a little piece of tags which will automatically complete itself with the default coding. For the customization, it's simple you can just take ID and Class tags from the above code and start writing your own CSS for them. But, This time I'm also going to give you CSS empty tags in which you've to fill properties according to your needs and design that better.
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
</b:widget>
</b:section>
.tabs { }
#corsscol { }
#PageList1 { }
#PageList1 ul { }
#PageList1 ul li { }
#PageList1 ul li a { }
Step 5. Creating Blog or Content Widget
This is the main thing should is important most of all. In blogger, we
create a default widget which is actual posts widget. In the layout
pages, you might have seen the big widget named Blog Posts. We can
easily create default blog posts widget with a bit of coding but
customizing that according to our needs can be little difficult. First
of all, open the html editor in blogger and paste the following blog
posts widget code there.
<b:section class='main' id='main' preferred='yes' showaddelement='no'>Just like other widgets, we've also created section for that blog posts widget. After saving this widget in template, reload the html editor it will gain default coding of blog posts widget automatically. Here, get started in customizing the posts section according to your needs. Look at the class and id tags and write CSS for those tags to beautify posts area. When you'll expand blog posts widget, you'll get many <b:includable> tags that are actually in posts area. There will be specific includable tag having id='post' and var='post'. If you expand that includable tag then it will show up the coding of posts area only where you can do customizing easily.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
Step 6. Creating Custom Gadget Area Like Sidebar and Footer
The above five steps will get you a simple template but creating custom
gadgets area can be useful like making sidebar, footer and other gadget
necessary gadget areas. So, in this step we're going to learn that how
can we easily create custom gadgets section in blogger layout. We'll
just write <b:section> tag in which we can add widgets as more as
we want. Go to html editor and paste the following code anywhere you
want to create the gadgets area or section.
<b:section class='' id='' maxwidgets='' showaddelement='yes'>There is nothing special then <b:section> tags in the above coding. Class and ID tags are empty where you can add your own custom names to call the CSS for that section. You can use class and ID to call CSS and beauty that gadgets section by adding any width, height, padding, margin etc. Another tag, maxwidgets='' is also in which you write any maximum number like 10 so that section wouldn't contain more than 10 widgets. If you want to show Add a Gadget option in layout then remain the yes in the showaddelement tag otherwise overwrite it with no.
</b:section>
Step 7. Setting up Layout Page
While creating template, also take care of layout page in blogger blog
because that page depends on the template of a blog. If you do the
things correctly then it won't get messed up but if you're facing
problem then we've solution for this. We can rearrange the widgets and
gadget sections there through using simple CSS. And for what, I've
already written great post on fixing blogger layout page messed up. For rearranging the widgets in layout page, we'll use CSS and it will be like this.
body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID2 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }
Advanced Guide
Anyone who has basic knowledge of web designing can develop blogger
template just by using simple HTML and CSS. Newbies might face problem
in understanding the structure of blogger template but if you keep doing
practice then you in a few days, you can be expert in that. Those web
designers who can create HTML Templates or any other blogging platform
themes then I don't think they're going to face any problem. Even
designing blogger templates is one of the most easiest platforms than
others.
Above we've only created the simple blogger template which contains
header, pages menu and blog posts. There is no sidebar and footer in the
above template. You can make sidebar by giving specific width to posts
widget, float blog posts widget to left and create another section which
will be sidebar. You'll need to float sidebar in right and also give
such width to those blog posts and sidebar sections that these both
should suite on the area. You can do many more experiments with blogger
template designs and also you can cover each widgets section with
specific HTML div tags.
While creating blogger templates, sometimes I make use of Inspect
Element in Google Chrome which is common coding tool and it helps to
edit any webpage. It will also help you to find the specific Class and
ID tags of anything and you can customize them through CSS.
No comments:
Post a Comment