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.
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.
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.
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 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.
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.
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.
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.
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.
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.
IN CONCLUSION
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