The Beta Blogger Template can be simplified into five main parts......
The new Beta Blogger template is the foundation behind the new features and user friendliness of Beta Blogging. It uses XML so that Blogger Blogs are now 'dynamic' and do not require republishing after any small change to the posts or the template. Previously Blogger would create static HTML files on your Blog*Spot account every time you published, and those files would remain there unchanged until your next update. In the new Beta version, adding a new post simply updates your information in the database. Then, when someone wants to see any of the pages on your blog, those pages are created for them dynamically, on the fly. This makes the process of updating your blog much simpler and faster. You don't have to remember to republish anymore, or decide whether to do a "republish index only" or "republish all." The instant you save a new post, template design, or settings change, your blog is updated. No more waiting for what many experienced bloggers call "the spin of death" when the icon would continue to spin endlessly.
Once you have logged in you can edit any post with one click on the web page itself. The post opens up for editing without you having to navigate through the Dashboard to the Post Editor. After making the changes you want it is saved and published in one step after clicking on Publish. You can then view it immediately with just one more click!
The new template is also responsible for creating Layouts where the blog is divided into Page Elements which can then be arranged by a simple click-and-drag method on a WYSIWYG or graphical interface. Thus you can customize your blog just by rearranging the Page Elements in a different order.
One of the biggest lacunae in the old Blogger was the absence of Categories. This delighted the hackers no end who then set about devising hacks for implementing them. The average blogger was left to decide for himself which was the simplest hack to implement and spent days implementing them often with doubtful results. Beta Blogger has taken care of this through 'Labels'. You can add Labels to each post when creating it and then add a Labels Section to the sidebar where all of them are displayed along with the number of posts they are appearing in. The reader can then click on the Label he is intrested in to immediately display all the posts with that Label in them.
The start of the Beta Blogger Template with all these impressive features - drum rolls please - is deceptive. However, it has to bow to conventions and web standards and hence starts with the language declarations :
<?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'>
The first line is the XML declaration identifying the document as a XML document. XML stands for eXtensible Markup Language. It is a new markup language, developed by the W3C (World Wide Web Consortium) mainly to overcome limitations in HTML. The second line is the HTML declaration. The third line is the XHTML declaration which is the XML version of HTML. The rest define XML namespaces which are used to identify XML elements.
When you download a Beta Blogger Template using the download link under the Template tab it is saved as a file with an XML extension to your hard drive. You cannot copy and paste Classic Blogger Templates into the new Beta Blogger because they are HTML templates.
The Second Part of the Beta Blogger template is similar to the old Blogger template and consists of the opening Head tag, the Title tags and the Metatags. The Metatags and the title tags have the same function as in the old Blogger templates viz informing the search engines about the subject of your blog and getting it indexed by them :
<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<meta content='BLOG DESCRIPTION' name='Description'/>
<meta content='BLOG KEYWORDS' name='keywords'/>
<meta content='index,follow' name='robots'/>
The THIRD PART of the beta blogger template is where the 'Variable Definitions' are declared and is responsible for the 'Fonts and Colors' subtab under the Template tab. This part of the template is responsible for giving the user multiple choices regarding the Fonts and Colors in his blog. He can use this feature through a WYSIWYG or graphical interface to change the sizes of fonts and the colors in his blog. Thus unlike in old Blogger where the average Joe Blogger had to wade through ankle-deep template code - always fearing the template sinking beneath his feet - to change his blog colors, the new beta blogger simply points-and-clicks to choose his fonts and colors. This can be done any time you are tired of your blog colors and want it to have some brand new clothes. This section starts with :
<b:skin><![CDATA[/*
/* Variable definitions
====================
Here CDATA section starts and is used to denote to the XML parser to ignore this section as it includes XML tags and not to parse the data within it until it comes to the closing of CDATA denoted by ]]> where it should resume parsing. The <b:skin> tag signifies the beginning of the CSS section which in old Blogger was denoted by <style type="text/css">.
The FOURTH PART of the template is the CSS (CASCADING STYLE SHEET) section which is also similar to the old blogger template except for new divisions. The body remains the same but inside it is the Outer Wrapper which contains the Header, Main Column, Sidebars and the Footer. This part ends with the following tags :
]]></b:skin>
</head>
The ]]> tag ends the CDATA section which means the XML parser can now start parsing. Then the </b:skin> tags signify the ending of the CSS section. In the old Blogger this was denoted by </style>.
Finally this is the end of the head section which started after the language declarations and is denoted by </head>.
The FIFTH and final part of the template starts here and consists of the body of the page in HTML. This is denoted by the starting <body> tag at the beginning :
<body>
Inside the body is the outer wrapper defined by :
<div id='outer-wrapper'>
Inside the Outer Wrapper are :
1. The Header Wrapper containing the Header.
2. The Content Wrapper containing the Main and the Sidebar Wrappers containing their respective sections.
3. The Footer Wrapper containing the Footer.
This final part of the template ends with closing the Outer Wrapper division, then the closing body tag </body> and finally the page ends by closing the html tags as such : .
Inside each Header and Footer Wrappers are the respective header and footer Sections containing a number of various Widgets or Page Elements. The Content Wrapper contains the main and sidebar sections also similarly containing a number of various Widgets or Page Elements.
Thus we arrive at the heart of the Beta Blogger Template, its kernel as it were, consisting of the humble Widget. It is this Widget - short for Web Gadget - which does all the blogging functions carrying data to and fro from the database. Each Widget is called a Page Element in WYSIWYG view and there are twelve types of widgets as of date. Twelve types of widgets carry twelve types of data and can be used to add the following to your blog : List, Links, Picture, Text, HTML/Javascript, Adesnse, Feed, Labels, Logo, Profile, Blog Archives and Page Header. Each widget is defined by tags like this:
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>
</b:widget>
Inside these are the includable tags and inside them you can place your code. This feature is unique to the Beta blogger template and enables you to add code to make your own widget. Widgets can also be customized by defining their characteristics in the CSS.
Hence the new Beta blogger Template not only adds more functionality to the old Blogger but also hikes up the mark on user friendliness and finally has room aplenty to add more and more features by both bloggers and developers.
Tuesday, November 14, 2006
| [+/-] |
Beta Blogger Template Simplified in Five Parts. |
Monday, October 02, 2006
| [+/-] |
How to add Picture to Beta Blog Header. |
To add a picture to the header of your Beta Blogger blog...
FIRST BACKUP YOUR TEMPLATE USING METHODS OUTLINED IN : Change Template. Then upload your picture file to a free host like Googlepages which offers 100 MB free space. Copy the URL of your picture and keep.
Sign in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">
</b:widget>
</b:section></div>
In the above code change maxwidgets="1" to maxwidgets="2"
Also change showaddelement="no" to showaddelement="yes"
Save Template.
Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Picture type. Click add to blog. In the content page that opens paste the url of the picture at Googlepages in the URL text box. Save changes. View blog. Enjoy.
TO ADD A PICTURE TO CLASSIC BLOG HEADER
Create an account at a freehost like Googlepages.
They offer 100 MB free space for hosting your picture.
Upload your picture to your account.
Right Click your picture and click on 'Copy link Location'.
This gives the URL of your picture.
Go to Edit Current under the Template tab.
Scroll down intheTextbox until you come to first part of the template.
This is the CSS section where style is added to your blog.
In this part scroll down to :
/* Header
----------------------------------------------- */
#header {
margin:0 20px 10px;
xxxxxxxxxxxxxxxxxxxx;
border:1px solid #ccc;
}
Copy paste this line below in place of "xxxxxxxxxxxxxx;" above :
background: url(YOUR PICTURE URL GOES HERE);
Paste your picture URL (obtained in Step 5 above) between the brackets.
Save Template Changes.
Open blog in browser to view it.
Press CTRL while refreshing page to refresh your cache.
| [+/-] |
How to make a Beta Blogger widget/Page Element. |
To make a beta Blogger widget....
Sign in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page. Choose where you want to make a widget whether in sidebar or header. Click 'Add a Page Element'. This opens a new page where you can choose the type of widget you want to make. The choices are as follows :
1. Globally Available Data
2. Page Header
3. Blog Posts
4. Blog Archives
5. Profile
6. Text/HTML/Javascript
7. Feed
8. Picture
9. Labels
10. List
11. Link list
12. Logo
Make your choice and fill in data in Content field and Save Changes.
Congratulations! You have just made your first widget.
| [+/-] |
The Anatomy of a Beta Blogger Widget.. |
The code which makes a widget/Page Element in beta Blogger is as follows :
<div id="'sidebar-wrapper'">
<b:section class="'sidebar'" id="'sidebar'" preferred="'yes'">
<b:widget id="'HTML2'" locked="'false'" title="''" type="'HTML'/">
</b:widget>
</b:section>
</div>
The third line from top represents the widget 'HTML2' in unexpanded form.
The property locked="false" means it can be moved to other sections of the page like header or footer in Page Layout view. At present it resides in the sidebar section. The sidebar section resides in the 'sidebar-wrapper' div.
When we check the box 'Expand widget templates' in Edit Html field we can see the full code for this widget which is as follows :
<b:widget id='HTML2' locked='true' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
| [+/-] |
Introduction to Widgets. |
This blog has been created to exhibit all the widgets available in Beta Blogger. If you see a widget not represented here please inform us and we will include it as soon as possible. For the non cognoscenti a widget [possibly evoking "window gadget"] is......
in graphical user interfaces, a combination of a graphic symbol and some program code to perform a specific function. E.g. a scroll-bar or button. Windowing systems usually provide widget libraries
containing commonly used widgets drawn in a certain style and with consistent behaviour.
In Beta Blogger or Son of Blogger a widget is a Page Element which users can customize in the Page Elements view of the Template tab. You can also code your own widget and add it to your blog. In this way you can hack your blog at will.