Portfolio on a Budget: Blogger

Blogger is a good option if you are thinking about creating your portfolio for free. Unlike Imgur, you will be able to set up a site that is more modern and professional.

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 to turn your blog into a portfolio site.

A Quick Guide to Creating Your Portfolio on Blogger

LET’S GET STARTED

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.

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

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

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++

Go to your blog on Blogger and select Template in the 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

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

NEXT STEPS

Let’s add substance by adding a few of your projects. Create a New Post and Insert Image to add images and mockups. You might want to include some context as well so clients can understand the project better. 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

Now it’s time to clean up the page elements that you don’t need. Your first course of action should be to go to Layout and edit the page elements accordingly.

You can edit the page elements in Layout

Most templates, like this one, allow you to add your own logo under Header. Otherwise remove anything that you feel is redundant.

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

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 template to create a portfolio site that perfectly meets your needs.

Blog has been removed through coding

IN CONCLUSION

If you are unable to pay for hosting, consider creating your portfolio site on Blogger. 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

Ad - Starter Web Hosting from SiteGround - The easiest start for your website. Click here to learn more.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *