Understanding the New Blogger Template (3)

Dear Friend,

Continuing on our quest of understanding the new Blogger in Beta template upside down, inside and out, top-down approach, and so on :-) this time we will take a closer look at how Blogger's data could be seamlessly embedded inside regular HTML tags, and as a consequence, proving that any exiting CSS blogging template could be retooled to work with the new Beta template system.

Here is the picture I showed you at the end of the previous article,



We've got that far without revealing any blogger tags. Using the same technique of hiding and displaying the div, this time I uncover the next level. I also added all possible widgets that Blogger offers. Here is the result,



(Click on the picture to enlarge it)

It looks kind of more complex, but still understandable somewhat, right? Underneath each of the "xxxx-wrapper" tags, there is one b:section tag. Under each of this special tag, there are one or more of the widget tags, each with its own identification and other things. Now if I click on the + sign of each widget, I will get to see the actual beta coding for this widget. But those internal code would be the subjects of many follow-up articles. The scope of this article is therefore limited to only discussing about the two levels that i've just mentioned, namely b:section and b:widget.

The equivalent visual representation of the code I just show you would be like this,



and when you view the blog in action, it would look like this,



Next, let us discuss about each section - the header, the main post area, the sidebar, and the footer - in details.

1. The Header Section

In this section, we know that it has to somehow show the title and the description of the blog. Because there is only one widget, those info must reside in it. But first, there are also other information and/or settings as part the header section,


We see that a section has a class, and we have four classes representing four sections. They are the header, the main, the sidebar, and the footer classes. (Also, according to Blogger, at runtime each b:section will become a div, so you could use your CSS markup to enhance the look of those.) The section also has its own id, namely "header". The parameter maxwidgets="1" signifies that there is only one widget that could be added to this section. The parameter showaddelement="no" means that you will not see a "Add a Page Element" box in this section. (Why need it when you already set the max widget to be of one widget only?)

Inside the b:section, there is only one widget, with the id of "Header1". The parameter locked="true" means that you cannot drag this widget to anywhere else. The title on the widget to be shown in the box of the layout (and not our real web page) was the next parameter, while the last parameter tells Blogger this is a header type.

We will explore the contents of this widget in another article.

2. The Main Section

The Main section obviously is for displaying the contents of a page. This varies drastically, from one post only to possibly every posts in the blog. Even for the "one item" case, there are a lot of information to display, such as the time created, the title of the post, the contents, all the comments for the post, backlinks, navigation system, etc. In the "Expand Template" view, the portion of the code is about 80% (not counting CSS code)! This section probably is the one that scares off people from looking into tweaking the template to suit their sites. But it doesn't have to be that way. One could just ignore the section and only revisit it when they feel more confident.

Below is the code for the section in simplified form,

As you can see, under the (id = ) main section, there is only one widget named Blog1, with other minor parameters similar to the Header section.

3. The Sidebar section

Hopefully, by now you are already feel at home with identifying where is the section tag and all the widget tags it contains. I purposedly attach every single Page Element that Blogger offers with the "Add Page Element" option to show you the syntax of each widget. As you can see, the parameters are pretty much self-explanatory, as one can easily guess which widget corresponds to which line of code. If you happen to want two widgets of the same type, just make sure they have unique IDs, such as Label1 and Label2, and you will be fine.

Again, I will get into details of these widgets one by one, hopefully in the next article.

4. The Footer section

There is no special about this section at all, except for the fact that when the section has no widget, it appears in just one line, like so

5. What makes it so great about Beta Templates?

We are at the end of our little trip of visiting the sections and widgets at their simplest form. The great thing about the code I've just shown you is that it's not there for nothing, it actually works. Indeed, if you have any new template with this kind of simplified Blogger code, then cut-and-paste that code into the HTML Edit window and save it, it would show you a blog, however simple or complex you want it to be.

This fact is very important if you want to start creating customized beta templates for yourself and for others. You don't have to cut-and-paste the long form and try to fit it in a well-designed, existing HTML design. You can simply embed the internal (whatever inside and including of the two b:section tags) of the four sections I described above to the proper locations in your design, and your blogger data will magically show up! Only then, you start to tweak your CSS design to match the divs' names of the Blogger sections for the text to show correctly.

I will prove this point to you right away.

First, create a new test blog, then go to Template->Edit HTML. Save your current design to your desktop, then cut and paste this code below,


Here is what you will probably see after saving the template and view the result,



There are two things that are worth mentioning here:

1.If you follow my three articles in the "Understanding Beta Template" series closely, and if you ignore the CSS part (between the b:skin tags), you should be able to understand 100% the body section of the template! It's fairly identical to what I've been explaining to you in term of the meaning of the header, main, sidebar, and footer sections.

2. In the head section, I keep two variables and the CSS commands for the body tag. You could even carefully leave this part out and the template would still work. My point is the Blogger contents do exist independently from their presentation counterparts.

6. The Road Ahead

There are actually two roads ahead of us! For the ones who have artistic minds, you can apply what we have been discussing and create your own templates for your own use, and hopefully for others to use (for free, I might insist :-) as well. A great place to start is at the Open Source Web Design homepage.

The other road to explore would be to "hack" the inside of the widgets. And of course this is fun too, I might add :-)

Have a wonderful day and see you next time.

Nguồn: http://hoctro.blogspot.com

0/Để lại bình luận

NỘI QUY KHI BÌNH LUẬN :
» Không sử dụng từ ngữ thô tục, thiếu văn hoá, gây mâu thuẫn; Không bàn luận chính trị, sắc tộc.
» Được chém gió thoải mái nhưng Không được Spam.
» Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc
» Mọi thắc mắc xin liên hệ qua Email: info@taichinhlinhhoat.com,

Cảm ơn bạn đã chia sẻ!