Query7 » Chinmay Chiranjeeb

Blogger Template Wizardry

Chinmay Chiranjeeb — Fri, 04 Jun 2010 03:46:49 +0000

Google’s Blogger is the eighth most popular site on the entire Web today, and by far the most popular free blogging site. According to Google, Blogger now hosts over 300 million blogs and publishes 388 million words per day – simply staggering figures. Let’s look at some of the more compelling reasons for Blogger’s popularity.

Google’s services are ubiquitous, and you’ve probably already got an account for say, Gmail, Docs, YouTube or Calendar. So when you land on the Blogger homepage, all you need to do is enter your login info and off you go! No registration required.
It’s powered by Google, so there’s a better chance of placing high on search engine rankings. From an SEO/SEM (search engine optimization / search engine marketing) point of view, that’s quite the big deal.
Users can create multiple blogs. For Web developers or designers with diverse portfolios it’s easier than ever to start your own blogging network.
Blogger has a limited but respectable directory of templates with plenty of options for customization. Inveterate tweakers should clear the afternoon.
Users can create and configure their own templates for upload, or download an existing template, customize it, then re-upload and use it.
Rather than keeping the off-the-shelf yourname.blogspot.com domain, users can register their own custom domain and point their Blogger page to that.

Sure enough, there are plenty of good reasons Blogger’s gained traction the past few years, but it’s become a hell of a crowded field and for anyone looking to grow their audience it’s increasingly hard to stand out.

The fact is, even if you’re posting killer, must-read content you’ve lost the lion’s share of readers before their first click with a page designed from a yawn-inducing Blogger template.

So besides great content, you’re going to want a template with distinctive design. Read on to follow this basic tutorial and create your own fresh Blogger template.

Create an HTML Template for Your Blog

Go to the Blogger homepage and log in with your Google info to create a new blog. With or without a Google account the signup is pretty painless.

If you’re an existing user, you’ll also get the status of your current blogs.

Head to Layout and then Edit HTML

Developers love code, but sometimes even laymen want a peek under the hood. If you’re up for it, just scroll down and click View Classic Template.

Keep in mind that Blogger can only use XML-formatted templates, so you’ll need to create a blank XML file on your hard drive as .xml.

Now add the following code to your XML document:


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Let’s start with the Blogger code to add a header element.

Generally, Blogger code starts with

Now we’ll add the title of the blog and post:

<data:blog.pageTitle/>

Referencing the blog skin:

And template details:

http://www.sourcebits.com
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- */

Now let’s hide the default navigation bar.

/*-- (Hiding the navbar) --*/
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

And add some custom CSS to stylize the blog.

/*-- (CSS for Blog ) --*/
body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000000;
margin:0px;
padding:0px;
background:#dedede;
}

:focus {
outline: 0;
}

.clr{
clear:both;
}

.wrap{
margin:0 auto;
padding:0px;
min-width:1200px;
}

.head{
background:#cde3e4 url(your path to header image) repeat-x;
margin-top:-1px;
}

]]>

If you don’t have a domain to host images then you can use Picasa, Flickr or any other image hosting services. Just make sure that image viewing permissions are set to public.

To generate feeds and archives for your blog:

You can also insert external JavaScript files:

Now let’s replace the default Blogger favicon with a custom jobbie that suits our taste.

Include your HTML code from the blog template created earlier and let’s add a widget to your header.

Note that you can use multiple widgets in the template but they should have unique id= ‘Your Unique ID’ and maxwidgets=’No of widgets’

Now add navigation:

And the conditional statement to show/hide navigation is:

And include feed links:

To display content only on the main and archive pages, include this tag with your content:


<1-- Your Content for Home and Archive Page-->

Phew! Almost there. Now after saving the XML file, it’s time to upload to Blogger.

Back on the Layout tab, under Edit HTML, you’ll find:

After uploading, save the template so now you can edit the file online and preview changes as you go.

And feel free to experiment! You can always hit the Clear Edits button to revert to the last saved version.

Let’s take a look at an outline of the page elements used in the template:

We can also place widgets with just a few clicks.

Clicking one of the Add a Gadget links drops you into a vast pool of Blogger and third party gadgets. Pick a gadget and add it by clicking the +, however many suit your needs.

And… VOILA!

Here’s a sample template we did up awhile ago with a basic but unique design, just FYI.

http://macdevelopmentbits.blogspot.com/

Feel free to drop us a line with any of your Blogger templating issues. We’re happy to lend a hand. For that matter, we’re keen to discuss any Web development projects you’re interested in. Get in touch any time!

A Tableless Table – Exploring the power of CSS3

Chinmay Chiranjeeb — Mon, 27 Oct 2008 11:26:55 +0000

The recent browser versions like Firefox 3, Google Chrome, Internet Explorer 8, Opera 9.5 and Safari 3 are now coming with a great and brand new support: CSS3. Some of the new properties are introduced and here I am going to describe the table value for the display property.

To align data in a tabular structure we can use a common table using the HTML tags

, ,

nonetheless we all know that by using that we are violating the latest web standards, right?But hold on for a second. I’m just going to introduce you a hot new way to code it using nothing else than div tags with the great CSS3 and the data will appear just like a table. Believe, that’s true!

Here is an example:

Some Page





Web Development 


PHP & MySQL


Ruby on Rails


ActionScript 3.0 / Flash / Flex / Adobe Integrated Runtime


Amazon Web Services


Zend Framework


JavaScript / AJAX


XHTML & CSS Scripting


Content Management System

Windows Development



Mac & iPhone Development

Screen shots:

Firefox 3

Google Chrome

Internet Explorer 8

Opera 9.5

Safari 3

Internet Explorer7

Working Principle:
The display property specifies a range of table-related values to make elements display and behave as they were table elements.

The new available display values for drawing tables are:
table to make the element behave like a table element
table-row to make the element behave like a table row (tr) element
table-cell to make the element behave like a table cell (td) element
table-row-group to make the element behave like a table body row group (tbody) element
table-header-group to make the element behave like a table header row group (thead) element
table-footer-group to make the element behave like a table footer row group (tfoot) element
table-caption to make the element behave like a table caption element
table-column to make the element behave like a table column (col) element
table-column-group to make the element behave like a table column group (colgroup) element

The table element in HTML is a semantic structure: it describes what data is. Therefore, you should only use the table element if the data you are marking up is tabular – for example, a table of financial information.

On the other hand, table value of the display property is simply an indication of how something should look in the browser – it has no semantic meaning. Using a table element for your layout tells the browser, “This data is tabular.”

Also we have to take care of, not to use display: table; property on a bunch of div elements when the data needs to be present in tabular format. Else simply avoid to use this property.

The main advantages on using this new structure are:

Place the data in tabular manner without violating the latest web standards.
No need of specify the cellpadding="0" cellspacing="0".
No need to make the border="0".
No need to make the margin and padding 0 of table, tr, td.
Print the page in tabular format without wired.
No need to specify the height, as the content added it will automatically adjust the height of the row and columns with specified background.

As we’re not living in Wonderland, we also have some disadvantages, as follow:

Only latest browsers support this property.
Mainly IE 7, IE6 are not supporting this property. They show the data in wired manner.

The solution would be to use this property only when we are going to develop a website for latest browsers and just ignoring the older versions. But as the statistics shows, most of the users still using IE6 and IE7.

To implement this in realistic world won’t be feasible to use CSS3’s advanced layout features for at least 4 or 5 years, once users need to upgrade themselves from the stone age of Internet to our beautiful high-tech development world.