How to create Portfolio Website on Blogger – Storm Blogger Template Customization

how to create portfolio website in blogger

One of the most popular types of personal website is a portfolio website. If you are a freelancer or a digital creator, then you need a portfolio website. A portfolio website will allow you to gather more freelance orders without relying on a specific platform. As you know, no one is allowed to share his/her details with clients on Fiverr and Upwork. So you need to share a portfolio website with your client that portrays your previously completed projects. You can also rank your portfolio website with good SEO (Search Engine Optimization) with which clients can reach you directly and contact you through your social media link. You can create a portfolio website for free by the help of Blogger.com.

In this blog, we will discuss how to build a Blogger portfolio website. Download the Storm Blogger Theme from the download button. It is the Blogger Portfolio theme which we will use to make a free portfolio website on Blogger. Click on download button and download the XML file.

Now go to blogger.com, create an account by signing up through your Gmail account, choosing the name and domain for your portfolio website. After the creation of an account, your website will be live. Although, it will not seems attractive to visitors, so we will upload the XML file that you download from the above download button. Go to the theme option, click on the customize button, and paste the XML file from the restore option.

edit html

Select the XML file from your computer/laptop memory and paste it. This theme will make your portfolio look attractive. However, you will need to make several adjustments and edit various sections to enhance its professional appearance. Now we will make changes in every part of our website including header, footer, profile options, and background images.

You can replace the header name with your name or your client name. To change the header name, go to the header section and copy the heading “Hi, I am”. Return back to the HTML portion, click ctrl+f and paste the copied text. Replace the default name “John Smith” with your desired name and save it. Save it and it will change the default name with your desired name.

header changing in portfolio

Go to your Blogger Portfolio website, refresh it, and check if your changes works perfectly or not. Now you need to replace the default mentioned services with your services. Copy the “I am a”, go to HTML section, press ctrl+f, paste the copied text, and the search result will appear. Replace the Front End Developer, Creative Lover, Blogger, Photographer, and Writer with your desired services. Remember that the service written after “typist-element” will be appear firt when someone open your portfolio. Writer will be written by default after “typist-element”, which you can replace with your desired service.

service setting

After changing your name and services, you may also need to replace the default social media links with your or your client links. You can find the social media list at the very next to service portion. You can add the links of Facebook, Twitter, Google Plus, and LinkedIn. To add your social media links, you just need to replace # sign with your social media links.

social media links replacement in blogger portfolio

If you want to change the Google Plus icon with Instagram or any other social media, just replace fa-google-plus with fa-instagram and save it. It will replace the Google Plus icon with Instagram.

google plus replace with instagram

We will now edit About me section. To edit your name on about me section, copy the default name “John Doe”. Go to the Blogger HTML section, press ctrl+f, and paste the copied text. Now replace the John Doe with your name from the searched area.

replace john doe with your name

After replacing the name, just scroll down and replace the default bio with your bio. Scroll down and you will find Account Info list which contain address, phone number, email address, and website respectively. You can replace the address, phone number, email address, and website URL with your details respectively. Make sure to place the details in proper manner.

personal details in blogger portfolio

Now edit the “My Professional Skills” section. Copy “My Professional Skills”, open blogger edit HTML section, click ctrl+f, and paste the copied text. Replace the text with your desired text. You can also replace the default services details with your details.

Also read: How to create LMS website on Blogger

You can also add your social media links in the social icons. Just follow the same instruction mentioned above. Replace the “#” sign with your social media links. You can also remove these social media icons because there is no need to place social media links here as you have placed them above. Select all the social media links from <div> to </div> and remove it. After removing the social media icons, just place <br/> to create a gap of one line.

inserting gap of 1 line in blogger portfolio website

You can also edit the Progress bar area and services.

Leave a Reply

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