Blogger Template Development Tutorial
Do you want to develop your custom template for your Blogger based blog ? Do you tried to find useful learning resources without success ?
Well it is correct that, blogger template development is not a common topic people may talk about. Comparing to other blogging environment like WordPress, the Blogger developers community is a little narrow.
The skills required for this are pretty much obvious for any web developer. You need basic knowledge in XML, CSS, HTML and Javascript !! When all those are combined in a single page we call that page is made by XHTML code.
In order to create your own Blogger template, you should start with understanding how Blogger works ? .. Here is a descriptive flowchart for its mechanism :
That XHTML code going to be stored into Blogger's database, and then it will be "parsed" whenever a request is coming from users browser.
At this point one can figure out the very basic layout structure for any Blogger template :
Here, we simply define the global structure of the HTML page will be generated as well as the naming rules of Blogger XML elements that we gonna include to it. In this example we defined the xmlns (XML Namespace) which are defined by Google for use with Blogger. Here is the list of them with their roles:
Blogger Widgets
As we already mention, sections will contain no more HTML code. It will contain rather a widgets elements which will be the responsible of showing content into the screen. A widget element in blogger has the following syntax:
Where the attributes are:
Typical Section-Widgets Code
Well it is correct that, blogger template development is not a common topic people may talk about. Comparing to other blogging environment like WordPress, the Blogger developers community is a little narrow.
The skills required for this are pretty much obvious for any web developer. You need basic knowledge in XML, CSS, HTML and Javascript !! When all those are combined in a single page we call that page is made by XHTML code.
In order to create your own Blogger template, you should start with understanding how Blogger works ? .. Here is a descriptive flowchart for its mechanism :
That XHTML code going to be stored into Blogger's database, and then it will be "parsed" whenever a request is coming from users browser.
At this point one can figure out the very basic layout structure for any Blogger template :
<?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>
Here, we simply define the global structure of the HTML page will be generated as well as the naming rules of Blogger XML elements that we gonna include to it. In this example we defined the xmlns (XML Namespace) which are defined by Google for use with Blogger. Here is the list of them with their roles:
- xmlns:b to access the blogger elements (you can change it to anything you want .. like for example xmlns:blog).
- xmlns:data to access the blog data stored in the database. (here is a complete list of data available via this command)
- xmlns:expr is used to calculate expression of attributes (we will come to this in details)
Blogger Sections
Now as we prepared the basic layout of the whole blog pages. We should, next, design its body structure. The body structure of any page in the blog could be spliced into "sections"
Now as we prepared the basic layout of the whole blog pages. We should, next, design its body structure. The body structure of any page in the blog could be spliced into "sections"
The above image show's you the most popular structures used. Different blue area are the sections we are talking about.
A section in blogger is defined as the following :
<b:section class="" id="" maxwidgets="" showaddelement=""> </b:section>
NO HTML CODE MUST BE WITHIN IT!!!
Its only a "definition" for a section. Each attribute will carry specific information for the blogger parser :
Its only a "definition" for a section. Each attribute will carry specific information for the blogger parser :
- id (required): A unique name using only letters and numbers.
- class (optional): most used names are 'header', 'footer','main','sidebar'.
- maxwidgets (optional): define the maximum number of widgets that accept this section. If nothing specified will be no limits.
- showaddelement (optional): has two possible values, either 'yes' or 'no'. The next snapshot will explain better its role.
- growth (optional): has two possible values, either 'horizontal' or 'vertical' and 'vertical' as default value (if nothing specified). It define the way widgets will be arranged within the section.
Note: There must be at least two b:section otherwise blogger will throw an error.
Blogger Widgets
As we already mention, sections will contain no more HTML code. It will contain rather a widgets elements which will be the responsible of showing content into the screen. A widget element in blogger has the following syntax:
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />
Where the attributes are:
- id (required): A unique name.
- type (required): define what type of widget it is. Its value must be one of the following types list: 'BlogArchive', 'Blog', 'Feed', 'Header', 'HTML', 'SingleImage', 'LinkList', 'List', 'Logo', 'BlogProfile', 'Navbar', 'VideoBar', 'NewsBar'. 'FollowByEmail'.
- locked (optional): has two possible values, either 'yes' or 'no'. if 'yes' the widget can not be deleted or moved from the page element.
- title: (optional): A title for the widget to be displayed in the layout editor.
- pageType (optional): has the following possible values: 'all', 'archive', 'main', 'item'. Is to specify a page type where to show the widget content. The default value is 'all' which show it in all the blog pages.
- mobile (optional): has the following possible values: 'yes', 'no', 'only' and 'default' as a default value. Note that if 'default' is set there only the following widgets type will be displayed: 'Header', 'Blog', 'Profile', 'PageList', 'AdSense'.
Typical Section-Widgets 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>
Blogger Template Development Tutorial
Reviewed by mytuny
on
3:58:00 pm
Rating:
Reviewed by mytuny
on
3:58:00 pm
Rating:
What is the flowchart tool you used to create this? is it creately ?
ReplyDeleteNice post. Thanks. I want to get designed a unique template for my blog. Would help me.
ReplyDeleteWow....It's difficult for a Blogger
ReplyDeleteFor my opinion, as a normal blogger and a person, what you've said would be difficult for me to understand or to do. Are there much simplier or step-by-step aside from this? Get yourself some papersmart, and you'll see the result.
ReplyDeleteYou can perfectly right, thank you for the article. See the resource https://azwritingteacher.com/business-writing/ - the best writing company. I always trust them works which I don't manage to write. They always meet the deadline! Such saving time for me. Recommend them for everyone!
ReplyDeleteThis tutorial and this was helpful for me and have created the blog Academic writing. Please tell me motre to make it out the best blog ever
ReplyDeleteThe number of people using it is the best advertisement for our re write my paper . Nearly half a million essays have been rewritten only in the first year of existence and the number of users registered is increasing immensely every day. You should join the community and at least try everything we have to offer.
ReplyDeleteYou might notice that on Scamfighter they place test orders with different sites to make sure that they have the most relevant information, and there is no place for mistakes. If you do not agree with their opinion, okay, go ahead and place the edubirdie review under their post or discuss it in their forum. An actual person manages the service and he can see all the complaints you submit, so he can send you an email or call you if you need his assistance. He hates guys who do that but, after all, no one can say that his reviews are fake!
ReplyDeleteReally dedicated blog! In paper writing services reviews summarizing style you set a great up to motivate others. Thanks much!
ReplyDeleteHello to every one, the contents existing at this web site are in fact awesome for people knowledge, well, keep up the good work fellows.
ReplyDeleteEscort in Gurgaon, Female Independent Gurgaon Escorts
Russian Escort in Aerocity, Female independent Aerocity Escort
Delhi Escorts Services, Independent Escorts in Delhi
Gurgaon Escort Services, Devayani Escort Girl in Gurgaon
Thanks for your interesting ideas.the information's in this blog is very much useful for me to improve my knowledge.
ReplyDeleteangular js training in chennai
angular js training in tambaram
full stack training in chennai
full stack training in tambaram
php training in chennai
php training in tambaram
photoshop training in chennai
photoshop training in tambaram
Thank you so much for sharing these amazing tips. I must say you are an incredible writer, I love the way that you describe the things. Please keep sharing.
ReplyDeletehardware and networking training in chennai
hardware and networking training in velachery
xamarin training in chennai
xamarin training in velachery
ios training in chennai
ios training in velachery
iot training in chennai
iot training in velachery
This concept is a good way to enhance the knowledge.thanks for sharing. please keep it up
ReplyDeletedata science training in chennai
data science training in annanagar
android training in chennai
android training in annanagar
devops training in chennai
devops training in annanagar
artificial intelligence training in chennai
artificial intelligence training in annanagar