Portfolio on a Budget: Blogger

Blogger is a good option if you’re looking to create your portfolio for free. Unlike Imgur, you will actually be able to set up a site that is much more modern and professional.

See also: Portfolio on a Budget: Imgur

But you can’t 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 do just that.


Create a New Blog

Your first step is Create a New Blog on Blogger through your Google account. Do 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 be sure to incorporate that into your address. Since we will be using a custom template, the template you choose doesn’t matter at the moment.

See also: Planning for Success


Portfolio Section on Gooyaabi Templates

It’s time to shop for a custom template. Gooyaabi Templates is definitely a top 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.


Browse Portfolio Templates

iGallery

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, your choice depends on how you want to portray your portfolio site. For the purpose of this guide, we will be using iGallery. Not only is the template simple and elegant, 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, so we have to find a way to access it. One suggestion is to use a code editor such as Notepad++.

Opening the XML File

Once you have a suitable program, open the XML file and copy the code.


Go to Template

Replace the Code

Next, 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.


Success

Finally, Save Template and view your blog. You should see that the template has been successfully implemented and your portfolio site is good to go.


Insert Image

Let’s add some projects to get the ball rolling. Create a New Post and Insert Image to add your images and mockups. You might want to add some text so clients can learn more about the project.


Using Labels

Publish Your Post

Also, notice the ability to add Labels on the sidebar so you can better organize and categorize your projects. Finally, Publish your post and you should see it on your blog. That’s it, now do the same for your other projects.


Editing the Layout

Next, 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.


Removing Page Elements

Most templates, like this one, allows you to add your own logo under Header. Other than that, you can remove anything that you feel is redundant.


However, Blogger is 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.

Identifying the Navigation Class

In this case, it’s extremely helpful that you 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.


Remove the Blog List Item

Blog Removed

To further illustrate the point, let’s remove the Blog list item and apply the XML file again. Once done, you will see that Blog has also been removed on your blog.

In short, knowing HTML and CSS allows you to fully customize any Blogger templates and get the exact site you’re looking for.


If you’re unable to pay for hosting, consider using Blogger to create your portfolio site. At the same time, it is somewhat troublesome since you have to implement custom templates and edit source codes, but hopefully this guide will make the process easier for you.

Leave a Reply