Nexus 5

Tweet This Bookmark this on Delicious











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 Ritesh Patel (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.

---------------------------------
---------------------------------