Portfolio on a Budget: Blogger

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

Creating a new blog on Blogger
creating a new blog on Blogger

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.

Gooyaabi Templates offers a range of styles for you to choose from
Gooyaabi Templates offers a range of styles for you to choose from

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.

iGallery, a clean and responsive template
iGallery, a clean and responsive template

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.

Opening the XML File in Notepad++
opening the XML File in Notepad++

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.

Go to Template, Customize HTML, and replace the code
go to Template, Customize HTML, and replace the code

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.

Your portfolio site looks much better after implementing the template
your portfolio site looks much better after implementing the template

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.

Use Labels to manage and organizae your projects
use Labels to manage and organizae 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.

You can edit the page elements in Layout
you can edit the page elements in Layout

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.

The HTML class that identifies the navigation bar
the HTML class that identifies the navigation bar

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.

Blog has been removed through coding
Blog has been removed through coding

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.

Spread the love

Leave A Comment