How to create a free website for my business with BlogSpot

March 28, 2022 Updated: March 28, 2022
How to create a free website for my business with BlogSpot
Create a free website in one minute with BlogSpot

Creating a website is the first step to start your online business, Many people find it challenging to take the step to create a personal website, But the fact that creating a website can be free and take only a few minutes may remove this challenge, after just a few minutes of research online, we find a lot of ways How to create a free website for my business, including blogger, WordPress, Google firebase,... and much more.

In this article we will focus on the easiest one, totally free, we will show you step by step how to create a free website with Blogger.

Blogger, also known as Blogspot, is a platform that allows you to build and host a website for free, it is owned by Google so you do not have to worry about server downtime and other issues. You can create up to 100 blogs under 1 Google Account for free.

How to create a free website for my business with Blogger


Step 1: Login to Blogger


Go to blogger.com and sign in with your Gmail account, if you don’t have one, you can create it for free. Blogger belongs to Google that’s the reason you would have a Gmail account.

After creating Google Account if you don't already have one, click on CREATE YOUR BLOG

Create your blog

Step 2: chose a name for your blog (Title)

Enter your website or blog name in "Title", in this example we will create a website about drone fishing we will simply put "drone fishing" we can edit everything later, and then click NEXT

choose blog name

Step 3: Provide your Website’s domain name

Since these domain names are free, they would be suffixed with blogspot.com by default. Blogspot, also provides us the option of having a custom domain name and we would see how to add a custom domain name later.

But in this example, we will use the free domain "fdrones" since it’s a free domain our blog URL will look like this : https://fdrones.blogspot.com/

After writing your Website’s domain name, click NEXT

choose blog URL

Step 4: Confirm your display name

Put the name that will be displayed to readers of your blog, then click FINISH.

Blog displayed name

That's all, congratulation, now you have your own website. Isn’t that simple, you can do it in less than one minute, only four click: CREATE YOUR BLOG→ CHOSE A NAME FOR YOUR BLOG → PROVIDE YOUR WEBSITE’S DOMAIN NAME → CONFIRM YOUR DISPLAY NAME →FINISH.

You can always view your website by clicking on view blog

Your website now is ready for publishing your first post, but maybe you want to do a few customizations before publishing your first Article.

Install a Theme on your free blogger website

If you don’t like the default theme, click on Theme

Change your blog theme

then chose from the displayed list.

Choose theme for your blog

You can preview and customize theme before applying it to your website.

If the displayed list does not fulfill your wish, you can always choose from some of the most pro-looking free Blogger templates outside Blogger.com and download a theme for your free Blogger website then upload it.

Once you chose a theme for your website click APPLY

Change Logo

The default logo will be that of Blogger, of course. Now you need to upload your logo to make your free Blogger site look pro. To do this, click on LayoutEdit on Header block
Change your Blogspot logo Click on choose file to upload image → choose Image placementsave

Change your Blog logo

Change Favicon

To Change Favicon, click on settingsFavicon
Change your Blogspot Fivicon Click on Choose file to upload image → SAVE

Change your Blog Fivicon

On settings you find a lot of parameters that you can edit anytime you need to, like: Privacy, Publishing, Permissions, Posts, Comments, Formatting, Errors and redirects, Crawlers and indexing...etc.

To design your logo and Favicon there is no place better than CANVA; CANVA is a convenient designing tool for non-designers, you’ll need it a lot later, for almost every post to design post's featured images.

Create the basic pages (Privacy Policy, Terms & Conditions, and Contact us)

To create a page (not post) click on PagesNEW PAGE then write your page title and content then Publish, but before that lets prepare page content first.

You don't need to write Privacy Policy or Terms & Conditions there are a lot of free websites that can generate these pages for you, like Free Privacy Policy Generator and Terms And Conditions Generator

Privacy Policy

Go to Free Privacy Policy Generator; write your Company Name, Website Name, and Website URL, then click Next.

If you don't have a company registered, enter the website name in Company Name field

Free Privacy Policy Generator

Click the answers depending on your future activities, and then click Next

Free Privacy Policy Generator

Enter your country and email address

Free Privacy Policy Generator

Click Generate my Privacy Policy

Free Privacy Policy Generator

Your privacy policy has generated based on informations you entered, Click Copy text to clipboard.

Go to your Blog dashboard on Blogger.com, Click on PagesNEW PAGE

Blogspot new page

Put in the Title " Privacy Policy " and in page's content click on <> to switch to HTML view

Blogspot switch to HTML

Blogspot switch to HTML

Then past the generated HTML Privacy Policy already in clipboard and Publish the page.

Terms & Conditions

Go to Terms And Conditions Generator; do the same steps as before on Free Privacy Policy Generator, write your Company Name, Website Name, and Website URL, then click Next.

If you don't have a company registered, enter the website name in Company Name field
Enter your country and email address.
Click Generate my Terms & Conditions.
Your Terms & Conditions has generated based on the informations you entered, Click Copy text to clipboard.

Go to your Blog dashboard on Blogger.com, Click on Pages→ NEW PAGE, write in the Title "Terms & Conditions" and in page's content switch to HTML then past the generated HTML Terms & Conditions already in clipboard and Publish the page.

Contact us

For contact us page, we have two methods, first one by using the Contact form in blogger.com. To do that, go to LayoutAdd a Gadget (under slidebar-right-1)→Contact form.

Blogspot Contact us

Blogspot Contact us

The downside here is you cannot put this Contact form on separate page, the contact form will appear in the right sidebar or footer or other place on all pages and posts.

Contact us on separate page for blogspot (blogger)

To solve this problem, we use the second method, in this method we still need the contact form inside blogger created with Gadget, but we will hide it later, so you have to add contact form as above.

Click on Pages→ NEW PAGE, write "Contact us" in Title, and in page's content switch to HTML then past this code taken from helplogger with a little modification, then Publish the page:

Blogspot custom Contact us

Contact us HTML code:
<style type="text/css">
.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{
font: 16px Arial;
text-transform: capitalize;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
position: relative;
background: #6B5F53;
color: #fff;
text-align: center;
margin: 0;
padding-top: 1em;
padding-right: 2em;
padding-bottom: 1em;
padding-left: 2em;
}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #42362A transparent transparent
}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="ribbon"><strong class="ribbon-content">Shoot Me an Email</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Your name:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" size="30" type="text" value="Name" onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' /></div><div class="contactf-email">E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message">Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="" placeholder="Type your message here..." value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form></div></div></div>

You can search internet to find the contact form that fulfill your wish and copy HTML code instead of the above code.

Now we need to hide the contact form that we created with Gadget, just hide it, if we delete it, the contact form in contact us page will not work. To do that, go to theme click the arrow beside customize.

Blogspot hide contact form

Then click on Edit HTML.

Blogspot hide contact form

Then Search for the following code:

]]></b:skin>

Blogspot hide contact form

First click anywhere in HTML code, then Ctrl+F search inside HTML code appear, then past the above line and click enter.

Paste the following CSS code just above it.

div#ContactForm1{display: none !important;}

Now, click the floppy icon to save the changes.

Blogspot hide contact form

Finally, we get a clean separated contact page, instead of a contact form that appears on every page.

blogspot clean customized contact us page VERY IMPORTANT

Blogspot doesn’t let you change URL of page, for example if you created “Contact us” page and for any reason you deleted it, and created it again, Blogspot will generate URL like this:
contact-us_11.html
you’ll better create Privacy Policy, Terms & Conditions, Contact us or any other page one time and only one, if you don’t like it, you can always edit it, you can ever delete title and content and rewrite them again, that’s better for you than keeping url like this (contact-us_11.html) or using redirection or javascript to solve the problem.

To better understand this, just click here or search for blogspot contact-us_11.html in google you will find a lot of website with contact-us_11.html as url to Contact us which is unprofessional.

Create the Menu in Blogger

We have created three pages (Privacy Policy, Terms & Conditions, and Contact us), but they didn’t appear in our website, now it’s time to create MENU.

We will put our pages on two locations, Home and Contact us in Menu under image header, then Home-Contact us-Terms-Privacy Policy in footer as links.

Click Layout→Add a gadget (under Cross-Column)

Blogspot Add Menu

→Pages

Blogspot Add Menu

→ADD A NEW ITEM

Blogspot Add Menu

→Click on page name, a list of pages you have will appear plus Home.

Blogspot Add Menu

Click on home then save, do it again for Contact us then save.

Blogspot Add Menu

Now we have created a simple menu with two links: Home and Contact us.

Click Layout→Add a gadget (this time under Footer-1) →Pages→ADD A NEW ITEM→click on page name, a list of pages you have will appear plus Home. Repeat the previous step, but this time we will add Home plus all pages.

Congratulation, now you have your own website with logo and fivicon and static pages, to start publishing click on Posts then NEW POST, a new post editor open similar to page editor with more settings on the right

Blogspot Add Posts

Add a Custom Domain to Your Free Blogger Website

Now I create a free website for my business and its ready to start publishing articles, but we may want to cut off the ‘.blogspot.com’ part from site's URL, till now that was totally free, but a custom domain doesn’t cost a lot and its look professional.

You can buy your own domain .COM for only $0.98 instead of $8.98 by clicking here and using the promo code 98DOTCOM at the checkout to get your discount.

If this offer is no longer available, you can always buy your own domain .COM for only $5.98 instead of $8.98 on the same famous website Namecheap.

To add a custom domain click on setting then custom domain then add your own domain with www in our example it will be www.tastetrout.com then click save.

Blogspot doesn’t accept naked domain without www, but you can do redirection later to finally have one unique domain with https and www like our case: https://www.tastetrout.com/

tastetrout.com domain

When you click save you’ll get an error with two CNAMEs like this:

tastetrout.com domain

Go to your domain provider’s website and find the Domain Name System (DNS) in the control panel, go to advanced DNS (depend on your domain provider), enter the two CNAMEs appear in error, not this in the image above of course, in the error that appear to you. Then go to Set up a custom domain – Blogger help Add the 4 A-records that point to Google IPs in Step 3

For more information on how to setup your custom domain for blogspot blog here is some useful links: Set up a custom domain – Blogger help and 404. That’s an error. The requested URL / was not found on this server. That’s all we know. - Blogger Community and Turn on HTTPS for your blog

Conclusion

Create a free website for my business using blogspot is very simple, even simpler than creating an email and anyone can do it in less than one minute, its consist of four click giving only two shorts information: blog name and blog domain (CREATE YOUR BLOG→ CHOSE A NAME FOR YOUR BLOG → PROVIDE YOUR WEBSITE’S DOMAIN NAME →FINISH).

Customize your blog by adding logo, fivicon, and static pages may take 5 to 20 minutes and then you can start publishing.

But that’s not all; this only the first steps, what you need to start, there are a lot of work to do like publishing posts, SEO enhancement, getting visitors…

Click here to read more about digital marketing and making money online.

If you find this article useful, we still have more for you, click the alert button on the right bottom corner to be notified if you haven't yet done so