Embed Size (px)
DESCRIPTION
hanya coba
Citation preview
Designing a blogger template from scratch is not as difficult as you might imagine. I had to search around a lot of websites and did a lot of googling to find out how to build a complete blogger template. Turns out it is pretty easy to build it yourself, but you need to know some stuffs before hand. The thing is, you need to understand how it works and should have an idea of how your blog should be.
Is this for you?
The above question depends mainly on your web development skills. You should have some basic web designing skills. You need not be a master in web design, but some basic knowledge of CSS, HTML, JavaScript & awareness of XML will do. You can learn the basics of these technologies atw3schools.com
How blogger works ?
How Blogger Works?
When we submit the template XHTML code to the blogger it is stored in the blogger database. When the blog is requested via a browser, the Blogger Parser parses the code and sends back the HTML output of the parsed XML code which will be displayed in the browser.
The Basic Layout
<?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 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>
<title><data:blog.pageTitle/></title>
</head>
<body>
<!-- BODY CONTENTS -->
</body>
</html>
Blogger template is fully coded in XHTML and Blogger Elements. In the above code we have defined a set of xmlns (XML Namespace) which are defined by Google for use with blogger. Namespace such asxmlns:b, xmlns:data, xmlns:expr lets us design our blogger web page and also to get data from the blogger database.
xmlns:b - access the blogger elements xmlns:data - is where the data of the blog comes from xmlns:expr - is used to calculate expression for attributes(will see this soon).
Note: You can change the above namespace name from b to blog or data to d at anytime. But it’s best to stick with what is default.
Before you continue - Skip This
Before moving along, have a brief layout of how your blog should look. Sketch a layout of your blog’s structure. Take a piece of paper, start drawing the layout or you could use apps like lucidchart and wire-frame the design that you want your blog to be. Identify elements like,
Where should the menu come and how should it look. How will the posts appear, is it a 2 column or 3 column layout. Where should the widgets appear etc.
Section
The Blogger template layout is designed with Sections. Sections are the one’s which makes the layout of the web page(like header, footer, sidebar etc.). It is like the sections in HTML5.
Sections in blogger
Above image shows some sample web page layouts which will give you an idea of what a section of a web page might be.
Section Syntax
The syntax to create a section in blogger is shown below. There can be any HTML code around the section code, but there can't be any HTML inside the section code. To define the contents of the section we must use the Widget element in blogger, which will be discussed shortly.
Each section tag has the following syntax, which is similar to an HTML element with attributes.
<b:section id='' class='' maxwidgets='' showaddelement=''>
</b:section>
Each attributes have different meanings, that will be parsed by the blogger to render the elements final output.
Section Attributes
id(Required) - A unique name, with letters and numbers only.
class(Optional) - Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
maxwidgets(Optional) - The maximum number of widgets that can be added in this section. If you don't specify a limit, there won't be one.
showaddelement(Optional) - Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section. Have a look at the image shown below,
Section - "showaddelement" attribute
growth(Optional) - Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.
A section can contain widgets. It can not contain other sections or any other code. If there is a need to add a code around or inside a section, the section must be separated into two different sections.
Example Code
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Section contents -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Section contents -->
</b:section>
Note: By default there must be at least two b:section tags or else blogger will throw an error.
Widget Tags
Sections are made mainly using widgets. Sections are just layout elements, widget is with which the real data is displayed. A widget at its simplest form, is just a single
tag, which is a placeholder for what should appear in the page element. There are some default widgets available in blogger and a custom widget can also be created. The data for the widget is stored in the blogger database and is accessed only when the widget is to be displayed.
Widget Syntax
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />
id(Required) - May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting the widget and creating a new one.
type(Required) - Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
The various widgets types are,
o BlogArchiveo Blogo Feedo Headero HTMLo SingleImageo LinkListo Listo Logoo BlogProfileo Navbaro VideoBaro NewsBar locked(Optional) - Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
Page Element - Widget 'locked' attribute
title(Optional) - A display title for the widget. If none is specified, a default title such as 'List1' will be used.
pageType(Optional) - Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of thier pageType.)
mobile(Optional) - Can be 'yes', 'no,' or ‘only’ with 'default' as the default. This decides if the widget will be displayed on mobile or not. Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is 'default.'
Example Code
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular On Relatemein' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>
The Syntax and Documentation is taken from the Official Blogger Documentation
The basic <b:widget/> tag was explained in part one of Blogger Template Design from Scratch. In this post, there will be a detailed description of how widget tag can be used to have a fine grained control of what appears inside of the widget.
The basic form of the widget tag contains a self closing tag with the attributes related to it.
<b:widget [attributes...] />
You can consider these basic widget tags like function invocation, whereas the definition of the function is present in blogger.
Expand Widget Template
To view the contents of the default widgets, use the Jump to widget dropdown in Edit HTML page(Template -> Edit HTML). Choose any one of the widget. Once you reach the widget code, press the black triangle arrow in the line number aligned to the widget code to view the widget code.
Expand widget
Creating Custom Widget
To create a custom widget, we need to make some changes to the widget tag.
First we need to have a opening and closing widget tag.
<b:widget [attributes...] >
</b:widget>
Most of the widget types specified in the previous post are defined by blogger. To create custom content in the widget, use the HTML type.
Example:
<b:widget id='HTML1' type='HTML'>
</b:widget>
Note: For the id of the widget, it’s best to provide the id of format - {type}{digit starting from 1 for each widget}. For example, if a custom contact and labels widget is created, their respective id’s would be HTML1 and HTML2 with type HTML.
<b:widget id='HTML1' type='HTML' locked='yes' title='Contact Us'>[Widget code here...]</b:widget>
<b:widget id='HTML2' type='HTML' locked='yes' title='Labels'>[Widget code here...]</b:widget>
Include and Includable
To define the content of the widget tag, we use a tag named “includable”. A expanded/custom widget tag must contain only includable tags inside it.
Includable has two parts,
include - is identical to a function name. When this is invoked, the particular includable will be called. includable - is identical to a function definition i.e the body of the function.
Includable
Includable Syntax
<b:includable id='uniqueId' var='dataForWidget'>
[Here we can place any piece of code]
</b:includable>
Includable Attributes
id (Required) - A unique identifier made up of letters and numbers. var (Optional) - An identifier made up of letters and numbers, for referencing data within this section. This is how we pass data into the widget. This is also identical to a function.
Include
Includes are used if you have a section of code that you want to repeat multiple times in different places. When a include is used, that particular include is replaced with the contents of the includable.
Example
<b:includable id='main'>
<b:loop var='i' values='posts'>
<b:include name='post' data='i'/>
</b:loop>
</b:includable>
<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>
Include Syntax
<b:include name=’idOfTheIncludable’ data=’dataForIncludable’ />
Include Attributes
name (Required) - An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget. data (Optional) - An expression or peice of data to pass on to the includable section. This will become the value of the var attribute in the includable.
Default Includable
Every custom widget must contain a includable with “id” equal to “main”(main includable). This main includable will contain the content for entire the widget. Infact, this is the only includable you need to specify the contents of the widget. If you need, you can define more includable’s inside the widget and outside the main includable, and include it inside the main includable using the “include” element.
Even if you have more includable’s with different id’s it will not be displayed automatically in the widget. You need to specify it inside the main includable using the “include” element with reference to the includable id.
Dodle: If you have experience in C Programming, there will be a main() function that will be called first for the start of the program execution. Consider the main includable(id=’main’) as the main() function in C Programming for the widget.
Widget
Example:
<b:widget id='HTML1' type='HTML' locked='yes' title='Labels'>
<b:includable id='main'>
<h3>Labels</h3>
<b:include name='labels'></b:include>
</b:includable>
<b:includable id='labels'>
<ul>
<li><a href='#' title='PHP'>PHP</a></li>
<li><a href='#' title='Java'>Java</a></li>
<li><a href='#' title='CPP'>CPP</a></li>
</ul>
</b:includable>
</b:widget>
You can place the above widget code in your blogger template to view the output.
