Blogger Template Wizardry
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 <Your Template name>.xml.
Now add the following code to your XML document:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "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>
Let’s start with the Blogger code to add a header element.
Generally, Blogger code starts with <b:
<b:include data='blog' name='all-head-content'/>
Now we’ll add the title of the blog and post:
<title><data:blog.pageTitle/></title>
Referencing the blog skin:
<b:skin>
And template details:
<
/*-- (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;
}
]]></b:skin>
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:
<script type='text/javascript'>
function rp(json){ document.write('<ul>');for(var i=0;i<numposts;i++){document.write('<li>');var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);var readmorelink="(more)";readmorelink=readmorelink.link(posturl);var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");document.write(posttitle);if(showpostdate==true)document.write(' - '+monthnames[parseInt(cdmonth,10)]+' '+cdday);if(showpostsummary==true){if(postcontent.length<numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...'+readmorelink)}}document.write('</li>')}document.write('</ul>')}
var numposts = 5;
var showpostdate = false;
var showpostsummary = false;
var numchars = 40;
</script>
You can also insert external JavaScript files:
<script language='javascript' src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/> <script type='text/javascript'> //your code here </script>
Now let’s replace the default Blogger favicon with a custom jobbie that suits our taste.
<link href='path to favicon' rel='shortcut icon' type='favicon'/> </head> <body>
Include your HTML code from the blog template created earlier and let’s add a widget to your header.
<b:section id='top35' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='MacDevelopmentBits (Header)' type='Header'> <b:includable id='title'> <A expr:href='data:blog.homepageUrl'><div class='logo'><data:title/></div></A> </b:includable> <b:includable id='description'> <h1 class='slogan'><data:description/></h1> <!-- It fetches the description from basic settings page. --> </b:includable> <b:includable id='main'> <div class='slogan1'> <b:include name='title'/> </div> <b:include name='description'/> </b:includable> </b:widget> </b:section>
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:
<b:include name='nextprev'/>
And the conditional statement to show/hide navigation is:
<b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if>
And include feed links:
<b:include name='feedLinks'/>
To display content only on the main and archive pages, include this tag with your content:
<MainOrArchivePage> <1-- Your Content for Home and Archive Page--> </MainOrArchivePage> </body> </html>
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!
Tags: blogger, blogging, customizing, google, template, Web Development
Subscribe to feeds
