Free Blogger Template - Cleanred Portfolio Design
CleanRed is a portfolio style template, originally created for CSSHeaven.org and now converted for use as a Blogger template.
This template is wholly compatible with Blogger's Template Designer. All fonts, font colours, background colours and widths may be changed through the interface. It's even possible to change the layout while retaining most of the template's stylistic properties!
My aim in converting CSSHeaven's original CSS template was to build a Blogger template which matched the design as closely as possible while retaining all of the template features of Blogger's new interface.
This means that a couple of minor elements were omitted, but that the Blogger template is almost completely customizable.
Be sure to check out the demo for this template to see the different page designs in action.
The "clean-red-blogger-template.xml" file is the actual template file required for installation. All other files are to help you use this Blogger template to best effect.
Using the instructions found on this page, upload your new Blogger template to your site.
Once you've uploaded your template, most of the design will already be in place. We just need to tweak a few elements to make it appear more like the demo site.
There is no need to host the images required for this template as I have already hosted these on Picasa Web Albums for this project. However, I have included all of the image files used in this template in the Zip folder for this project in case you would prefer to host the files on your own server.
Change the title to suit your own welcome message, and add the content you would like to appear in this section.
If you would like to add a link to your resume, first you will need to upload your resume to a location online (Google Docs is a great place to host PDF files for free!). Make a note of the URL link to your resume.
After you have written the text for your welcome section, switch to edit the content in HTML mode and paste the following code, replacing your-resume-url with the URL where your resume is hosted:
Finally, save the changes you've made to the Text gadget. You'll now see your welcome message appear on the home page, complete with a customized link to your resume (if you have chosen to add this).
If you would like to use the custom search box, paste the following code into the HTML/JavaScript gadget which appears below the Page Links gadget in the Layout section of your Blogger dashboard:
Then save your changes and the search box will appear in your layout.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. This template is based on the CleanRed CSS template by CSSHeaven.org and was converted for use as a Blogger Template by Amanda Kennedy for readers.
If you use this template, please be sure to retain the attribution text in the template's HTML code.
You may not sell this template or otherwise pass it off as your own as this violates the terms of the Creative Commons license!
Please feel free to leave your comments and suggestions below and be sure to let me know if you have any issues!
 |
| CleanRed Homepage, including a welcome message above the latest posts |
This template is wholly compatible with Blogger's Template Designer. All fonts, font colours, background colours and widths may be changed through the interface. It's even possible to change the layout while retaining most of the template's stylistic properties!
About the CleanRed Template for Blogger
CleanRed was designed to be used as a portfolio template for designers, artists or anyone else who wishes to showcase their best work!My aim in converting CSSHeaven's original CSS template was to build a Blogger template which matched the design as closely as possible while retaining all of the template features of Blogger's new interface.
This means that a couple of minor elements were omitted, but that the Blogger template is almost completely customizable.
Features of this free Blogger template
- Header placement in the left sidebar (rather than above the whole content) which appears in a logo-style design using only CSS!
- A welcome message (operated by a simple text gadget) which appears only on the home page.
- A stylish resume link for the welcome message box, which you can choose to omit if preferred
- Custom header styles for static pages, where the page title appears in bold white on a red background.
- Blog pages feature a "Blog" heading, making it easy for visitors to see the page type they are on.
- A custom-styled search box in the left sidebar
- No custom code for the blog or gadgets, enabling quick upgrades in the future when Blogger adds new functions.
- Layout customization enabled, so you can easily change the width of the template and sidebar; change the position of the sidebar, or even opt for a one/three column layout if prefered!
 |
| Static Page Layout |
 |
| Blog Page Layout |
How to use the CleanRed Blogger Template
Download the zip folder for this template and extract the contents to a location on your computer.The "clean-red-blogger-template.xml" file is the actual template file required for installation. All other files are to help you use this Blogger template to best effect.
Using the instructions found on this page, upload your new Blogger template to your site.
Once you've uploaded your template, most of the design will already be in place. We just need to tweak a few elements to make it appear more like the demo site.
There is no need to host the images required for this template as I have already hosted these on Picasa Web Albums for this project. However, I have included all of the image files used in this template in the Zip folder for this project in case you would prefer to host the files on your own server.
Add your "Welcome" text and resume link (optional)
Go to the Layout screen and choose to edit the "Welcome" gadget which appears above the Blog Posts gadget.Change the title to suit your own welcome message, and add the content you would like to appear in this section.
If you would like to add a link to your resume, first you will need to upload your resume to a location online (Google Docs is a great place to host PDF files for free!). Make a note of the URL link to your resume.
After you have written the text for your welcome section, switch to edit the content in HTML mode and paste the following code, replacing your-resume-url with the URL where your resume is hosted:
<a href="your-resume-url" class="resume">Download Resume</a>
Finally, save the changes you've made to the Text gadget. You'll now see your welcome message appear on the home page, complete with a customized link to your resume (if you have chosen to add this).
Configure your Page List gadget
If your page list gadget looks a little odd, chances are you'll need to change one or two aspects.- Remove the title of your gadget if it exists
- Choose to show a lesser number of pages by de-selecting non-essential pages from the gadget settings (four or five page links work best in this template)
Add the custom search gadget
I understand that not everyone likes to use the Blogger search function for their sites, so I have made the custom search box an optional feature rather than a built-in one.If you would like to use the custom search box, paste the following code into the HTML/JavaScript gadget which appears below the Page Links gadget in the Layout section of your Blogger dashboard:
<div id="search">
<form action="/search" method="get">
<div id="searchfield"><input type="text" name="q" id="s" /></div>
<div id="searchbtn"><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqB0zwQ7Y0cOomUlwgIfLPQLs79XN0ai9wSOiz01JdL69_90XKHlkohLNdGG9eIAEEHkGfOP4TpsN9qZoxqBNUNMYnk0HofNl7jTV-guVPsW18hdkvCcMpgahPOYKMI_zNY63mYAe2eY/s1600/searchgobtn.png" alt=" and now converted for use as a Blogger template Free Blogger Template - CleanRed Portfolio Design" /></div>
</form>
</div>
Then save your changes and the search box will appear in your layout.
License and Attribution
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. This template is based on the CleanRed CSS template by CSSHeaven.org and was converted for use as a Blogger Template by Amanda Kennedy for readers.
If you use this template, please be sure to retain the attribution text in the template's HTML code.
You may not sell this template or otherwise pass it off as your own as this violates the terms of the Creative Commons license!
What do you think of the CleanRed Template?
CleanRed is the first free Blogger template I have released since Blogger's Template Designer was launched. I hope to have made this template fully compatible with the new interface while retaining a lot of the original designs functionality and appearance.Please feel free to leave your comments and suggestions below and be sure to let me know if you have any issues!
