142 Nexus 5 - A New Blogger Template for Free Download September 08, 2009 /

It's been a while since I've designed a Blogger template for free release. But after reading this excellent tutorial on Smashing Magazine, I was inspired to create something different: an ultra-customizable, HTML5 based template for Blogger.

Nexus 5 is a one column template, with widgetized sections in the footer for any gadgets you may like to include. A wider, two column version will be available shortly for those who prefer gadgets in a sidebar section.


This template uses many HTML 5 and CSS3 elements to create a more innovative design without the use of excessive background images. It does gracefully degrade in browsers which do not support CSS3 elements to ensure the greatest percentage of visitors will appreciate the full scope of the design.


Here is a full screenshot of Nexus 5 as seen in Firefox 3.5 (my current preferred browser):

Demo | Download

Click the image for a full page preview, or simply visit the demonstration blog..

I've also tested in Internet Explorer (6-8), Opera and Safari. While the rounded corners and text-shadow effects do not function in browsers which don't support CSS3, the overall functions and general design of the site work well.

Main features of Nexus 5

I've tried not to overload this design with features, as I wanted to offer a clean design which loads fairly quickly and can easily be customized to your own particular tastes.

Instead, I have focused on only a handful of features which I hope will be suitable for everyone, and enhance the clean design of this template.

Ultra customizable!

One of Blogger's greatest features is the ability to customize our templates to suit our tastes, both through the Page Elements section (moving the location of gadgets, and customizing aspects of our post-footer section), and the Fonts and Colors menu.

While I love to see beautifully designed Blogger templates available for download, many cannot be altered so easily and require the user to edit the HTML of their template in order to make any change to the design.

For Nexus 5, I wanted almost every aspect of the design to be customized with ease. This means that:

• ALL colors may be changed through the Fonts and Colors menu
• Fonts for text and headings may be altered through the menu
• All footer gadgets may be moved around, added, deleted, and so on.

The ONLY aspect of this design which requires editing of the HTML is the "About" section in the footer. I was unable to create a workable integrated gadget for this section without excessive editing of the gadget tags. This would have rendered the section unstable; while a simple text/HTML widget could not have included the HTML5 elements I wanted to retain.

Integrated Navigation Menu

This design includes a navigation menu as a Link List gadget. You can add links to your Home, About and other important pages simply by editing the Link List gadget in your Page Elements menu.

The "Subscribe" button is pre-installed and will point to your blog's posts feed automatically.

A cool feature of this menu is the button highlighting. The background changes when your cursor hovers over the link; furthermore, when the page URL is the same as the link URL, the button remains highlighted.

For example, if you link to your blog's "About" page, the "About" button will remain highlighted when a visitor reads this page.

Integrated "Featured Posts" section - no template editing required!

I love the "recent posts with thumbnails" gadget, and decided to integrate this functionality into the template as a "Featured Posts" section, which can be seen above the post content on non-item pages:

This section will display the title, snippet and thumbnail of the most recent post from the Featured category.

No editing of the template is required to make this function work - simply add the label "Featured" (with a capital "F") to any posts you prefer to appear in this section.

Hover Effect on Summarized Posts

Another feature I wanted to include for this template was Post Summaries. This adds only the summary of posts on non-item pages, including a smaller version of the first image from each post. This is based on the Automatic Read More Hack by Anshul Dudeja (which integrates the required javascript into our templates).

Rather than specify exact dimensions for images which appear in the summaries, I have only specified a width. This ensures images are not distorted, and that a specified ratio of height to width is not required.

Also, when you hover over a post on a non-item page, that post is highlighted by a different background and link-text effect:

The colors for the background, link and paragraph text used in this effect can all be customized through the Fonts and Colors menu in your Blogger dashboard.

Posts on Item pages do not include this effect: post text and images will appear in full.

Stylized "Social" Section

The "social" gadget in the footer section is a simple Link List gadget where you can add links to any of your social media profiles.

The icons which appear beside each link do not need to be manually added to your gadget. Instead, these links are coded into the CSS to appear beside targeted links.

Profile links which are supported by Nexus 5 include:

• Blogger
• Flickr
• Del.icio.us
• Digg
• Facebook
• Last.fm
• Twitter
• LinkedIn
• MySpace
• Picasa
• Technorati

Any links added to the links list widget in this section will automatically have the appropriate icon appear beside it where available.

If I've missed any popular social networks which you'd like to see included, please let me know and I'll update the CSS.

How to install Nexus 5

Nexus 5 is rather easy to install. Since it requires very little editing of the template code, you should be able to get this template up and running within a few minutes.

Please note: these instructions are for the basic installation of this template. If you want to transfer widgets from your existing template over to use with Nexus 5, take a look at this tutorial instead.

First of all, download this template to your hard drive. This is an XML template, compressed in a Zip folder for easy download.

Once you've downloaded, open up the Zip folder and extract the Nexus5.xml file. You may need to use Winzip or WinRar if your OS cannot open compressed folders by itself.

Now that you've decompressed the zip folder, go to Layout>Edit HTML on your Blogger dashboard.

Near the top of this page you will notice the Backup/Restore Template section. Here you can choose to upload a new template by clicking the "Browse" button to locate the Nexus5.xml file on your hard drive. Select this file, then click the "Upload" button.

It's likely that you'll be prompted to delete any existing widgets that are in your existing template. If you need to retain any of these widgets/gadgets, cancel the operation and refer to this tutorial instead. Otherwise, confirm the deletion and continue.

Within a moment or two, your existing template will be replaced with your new Nexus 5 design, which you can customize according to your needs.

Configuring the Labels Gadget

The Labels (categories) gadget which appears in the footer section of Nexus 5 looks far better when the post count for each label is not selected. To change this option, go to Layout>Page Elements in your Blogger dashboard and click the "Edit" link for this gadget. You can also click the wrench icon beside this gadget while viewing your blog).

Uncheck the box for "Show number of posts per label" and save this change.

Note: while the "Cloud" option for labels will work in this template, when this option is used, the label cloud may not appear as desired. I have added support for the Cloud variant in the two column version of this design which will be available for download shortly.

Configure the Blogroll Gadget

This gadget is simply a Links List gadget for you to add links to your favourite sites.

Simply edit this gadget in the Page Elements page of your dashboard (or by clicking the wrench icon beside the gadget when viewing your blog) to add or manage links in this section.

Configure the Social Gadget

Again, this gadget is a simple Link List which can be edited with ease. The intention of this section is to provide links to your social media profiles, each of which will be highlighted with the appropriate icon.

For each link, copy and paste the URL of your social media profile and add appropriate explanatory text. The most popular social media sites are supported, so you can add as many or as few profile links as yu like in this gadget.

Display content in the Featured Post section

The Featured Post section is built into the template and requires no editing of the HTML code to work.

To make a post appear in this section, simply add the label "Featured" (with a capital F) to any of your posts. The latest post from this category will appear in this section on non-item pages of your blog.

If you prefer to display posts from a different label...

In order to display posts from a different label than Featured, you will need to edit your Blogger template.

Go to Layout>Edit HTML and search for the following line:

<script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"'/>

Replace Featured with the name of the label you wish to use instead. This is case sensitive, so be sure to type the label name exactly the way it is used. Furthermore, all spaces should be replaced with %20 (the "escaped" code for a space in this URL structure).

Preview your template to ensure the correct post is being displayed, then save your template to complete the change.

Edit the "About" section in the footer

As explained earlier, the "About" section is the only aspect of this template which requires you to edit the HTML code in order to retain the HTML5 style structure.

Go to Layout>Edit HTML and locate the following section of code:

       <address class='vcard body' id='about'>
            <span class='primary'>
                <strong><a class='fn url' expr:href='data:blog.homepageUrl'><data:blog.title/></a></strong>
                <span class='role'>One Line Description</span>
            </span><!-- /.primary -->
       
            <img alt='Avatar Logo' class='photo' src='http://lh5.ggpht.com/_xn2gmPb9TfM/SqTYIFh4mQI/AAAAAAAAFXI/MjMhfBmc9To/s800/blogger-logo.jpg' width='50'/>
       
            <span class='bio'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span>
       
        </address><!-- /#about -->

The section highlighted in bold red is where you can add a brief (one line) description of your site. Simply change the text to a short description of your liking.

The code highlighted in blue is the URL for your avatar/photograph. This image needs to be 50px wide, though the section should accommodate any height. Upload your replacement icon to an image hosting site and replace the URL with that of your hosted avatar image.

The orange section of code should be replaced by a longer description of your site. Just use plain text or links here (<a href="url_here">link text</a>), as other CSS properties may cause the section's appearance to be misaligned.

Once you've made any appropriate changes, preview to ensure all looks well then proceed to save your template.

Change the Fonts and Colors to Create your Unique Design!

As mentioned earlier, all of the colors and fonts for the headings/body text may be changed very easily in the Fonts and Colors section of your Blogger dashboard:

Simply go to Layout>Fonts and Colors in your dashboard, and click around to edit each property of your design.

Images, CSS and JavaScripts

All of the images, CSS files and JavaScripts used in this template are hosted on secure and reliable servers. You do not need to upload these to your own host.

Most of the CSS used in this design is included in the b:skin section of this template and may be edited as desired. In order to appear correctly in all browsers, a few imported CSS files are also referenced in the design. These files do not require alteration to affect any visual aspect of the design.

For anyone wishing to make changes to the images, CSS and scripts used in Nexus 5, feel free to download the following file:

Download Image, CSS and Scripts pack for Nexus 5

Credits and Licensing

This template is licensed under the Creative Commons Attribution License. If you use this template or offer this for download from your own site, please include a link back to www.BloggerBuster.com as attribution for this design and retain the author information within the template code.

In all other respects, feel free to customize and use this template for any of your blogging projects.

Nexus 5 was inspired by this tutorial by Enrique Ramirez which appears on Smashing Magazine and was coded for use as a Blogger template by myself.

The script for post summaries is based on this tutorial from Anshuldudeja.com, while the Featured Posts section is based on this script by BloggerTricks.com.

Icons used to highlight blog feeds and links in the "social" gadget are designed by Quake9 and are published under the Creative Commons Attribution License.

Your thoughts?

I hope you enjoy using Nexus 5 in your blogging projects! Please let me know your opinions of this template by leaving your comments below.