September 16, 2013

Free Blogger Template - Responsive Portfolio

Demo | Download
For those looking for a beautiful responsive template for their Blogger site, look no further!

Responsive Portfolio is a free, professionally designed template for your Blogger site with many useful features. Developed for those who want to showcase their portfolio, it includes the ability to display a jQuery carousel, and the whole template adjusts according to the size of the device it is viewed on.

Features of this template include:

  • Fluid width and responsive image size
  • jQuery carousel which can be placed anywhere in the template (or even in a blog post!)
  • All fonts and colours can be changed using the Blogger Template Designer
  • Elegant design and classic layout
  • Plenty of room for all of your widgets
Take a look at the demo site and resize your browser window to see how the template responds, or simply download Responsive portfolio to begin using this template right away!

About Responsive Portfolio

Responsive Portfolio uses CSS techniques to dynamically alter the layout and image sizes according to the dimensions of the screen it is viewed on.

On larger screens (such as your average PC monitor, laptop or netbook), a to column layout with main posts section, right sidebar and split footer is shown, like this:


On smaller devices, such as tablets and mobile phones, the sidebar and footer sections adopt 100% width and "display:block" properties, and are displayed beneath the main blog posts section:


Try it for yourself by viewing the demo site!

My initial reason for designing this template was to revamp my own portfolio website. I wanted a simple theme which could be viewed on all browsers, and included a simple means of showcasing my latest work. 

The carousel feature used in Responsive Portfolio was adapted from Elastislide by Codrops. The jQuery code required to make the carousel function is included in the Blogger template so you don't need to host the scripts elsewhere.

Installing this template

Download responsive-portfolio.zip to your computer and extract the xml to a location on your computer. 

When you have your template .xml file to hand, go to the Template section of your Blogger dashboard and click the Backup/Restore button in the top right corner. Click the grey Choose File button a little down the page and select the .xml template file to upload.

It may take a moment or two to install your new design before the Template page will reload to display a preview of blog using its new theme.

After installation, you may choose to add/edit/delete gadgets in the Layout section of your dashboard, or make changes to the design in the Template>Customise section.

Take a look at this post for more information about finding and installing Blogger templates.

Adding the Carousel feature to your template

The image carousel can be added to your layout simply by adding a few lines of code to an HTML/JavaScript gadget:

<!-- Elastislide Carousel -->
<ul class="elastislide-list" id="carousel">
<li><a href="#"><img alt="Alt Text" src="URL-OF-YOUR-IMAGE" /></a></li>
<li><a href="#"><img alt="Alt Text" src="URL-OF-YOUR-IMAGE" /></a></li>
<li><a href="#"><img alt="Alt Text" src="URL-OF-YOUR-IMAGE" /></a></li>
</ul>
<!-- End Elastislide Carousel -->

Replace URL-OF-YOUR-IMAGE with the URL where your images are hosted. You may want to take a look at this tutorial to learn how to host your images for free using Picasa.

Additionally you can add links by replacing the "#" with the URL where you would like your images to link to.

To ensure the carousel displays correctly, ensure all of the images you use are of the same size. You can make the images as large as you like: the scripts included in the template will resize the images according to the size of your browser screen.

By default, at least three images are configured to display at a time. On larger screens, more images can be displayed, while on smaller screens only three will be displayed (and resized accordingly).

Display the carousel (or another gadget) only on the home page
The gadget section immediately above the Blog Posts section in the layout is configured to display only on the home page of your site.



I designed Responsive Portfolio so you can display the carousel gadget in this section, but if you would like this to display on all pages of your site, consider moving the gadget to another location (perhaps in your sidebar, or immediately above the Blog Posts gadget).

If you would like a different gadget to display only on the home page, be sure to place it in this section.

Changing fonts and colours

All of the fonts and colours used in this template can be changed using the Blogger Template Designer (go to Template>Customize in your Blogger dashboard). You can use this feature to create a whole new colour scheme for your site and make your design unique!

Credits and Licensing

Responsive Portfolio was designed and developed by Blogger Buster for free, non-commercial use. Feel free to download, distribute and modify this template as much as you please, but do not sell it! Please provide a link back to Blogger Buster if you distribute the template through your own website. No attribution is required if you're simply using the template on your own site.

The Elastislide jQuery Carousel was developed by Codrops and is distributed under the MIT license.

Images used in the demo are provided by LoremPixel.com (which I highly recommend for placeholder images!).

Comments? Suggestions?

I hope you like this template and enjoy using it for your own Blogger site. If you have any suggestions or encounter any problems with this template, please feel free to leave your comments below.

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy