 |
| Demo | Download |
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!
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.
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 Take a look at this post for more information about finding and installing Blogger templates.
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.
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=" For those looking for a beautiful responsive template for their Blogger site Free Blogger Template - Responsive Portfolio" src="URL-OF-YOUR-IMAGE" /></a></li>
<li><a href="#"><img alt=" For those looking for a beautiful responsive template for their Blogger site Free Blogger Template - Responsive Portfolio" src="URL-OF-YOUR-IMAGE" /></a></li>
<li><a href="#"><img alt=" For those looking for a beautiful responsive template for their Blogger site Free Blogger Template - Responsive Portfolio" 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 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 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!).
Komentar
Posting Komentar