Blogger is a good option if you are looking to create your portfolio for free. Unlike Imgur, you will be able to set up a site that is more modern and professional.
See also: Portfolio on a Budget: Imgur
However, it might be hard to accomplish that feat with the basic templates provided by Blogger, which are honestly outdated in style. Fortunately, sites such as Gooyaabi Templates provide many custom templates, allowing you to drastically change your blog’s appearance. Here’s a step by step guide for you to turn your blog into a portfolio site.
First, Create a New Blog on Blogger through your Google account. Note that the address you choose will end with blogspot.com — one disadvantage of hosting your portfolio site for free. By now you should have decided on a brand name, so incorporate that into your address. Since we will be using a custom template, the template you choose now doesn’t really matter.
See also: Planning for Success
Let’s shop for a custom template. Gooyaabi Templates is a good recommendation, with a wide range of templates for you to choose from. In addition, the site is easy to navigate and has a section dedicated to portfolio styles.
You can browse through the templates before making a selection. Each of them has a Live Preview so you can see it in action. Ultimately, what you choose depends on how you want your portfolio site to be portrayed. For the purpose of this guide, we will be using iGallery, a simple and elegant template. It is also responsive, so everything will look good even on mobile devices.
After downloading the ZIP file, extract its contents and you will see a few files. The only one you should be concerned with is the XML file which contains iGallery’s source code. We will need to find a way to access the code. One suggestion is to use a code editor such as Notepad++.
Once you have a suitable program, open the XML file and copy the code.
Go to your blog on Blogger and select Template in left sidebar. Here’s where it gets a bit tricky. You have to Customize HTML and replace (copy and paste) the code with the one from the XML file.
Finally, Save Template and view your blog. You should see that the template has been successfully implemented. The overall design of your portfolio site is now completed.
Let’s add some substance with some projects. Create a New Post and Insert Image to add images and mockups. You might want to add some text so clients can learn more about the project. Consider adding Labels as well to better organize and categorize your projects.
Finally, Publish the post and you should see it on your portfolio site. That’s it — now do the same for the rest of your projects.
Now it’s time to clean up the page elements that you don’t need. Your first course of action is to go to Layout and edit the page elements accordingly.
Most templates, like this one, allows you to add your own logo under Header. Otherwise remove anything that you feel is redundant.
However, Blogger might be unable to detect some page elements due to various reasons. For example, in this template there’s no way to remove or edit the navigation items such as Blog and Contact.
In this case, it’s extremely helpful to have some basic knowledge in HTML and CSS so you can edit the XML file yourself. A look at the code should tell you that the navigation bar is identified by its HTML class nav navbar-nav.
As a further example, let’s remove the Blog list item and apply the XML file again; you should no longer see Blog on the main page. In short, knowing HTML and CSS allows you to customize any Blogger templates to create a portfolio site that perfectly meets your needs.
If you are unable to pay for hosting, consider using Blogger to create your portfolio site. It can be troublesome to implement custom templates and edit source codes, but hopefully this guide will make the process a bit easier for you.
Leave a Reply