Sunday, June 11, 2023

Blogging 101 - Create a New Blog

Designing a Simple Blog

Designing a Simple Blog

Simple Blog Design

It is easy to create a blog when we have all the information at one place. To create a blog you need to have a google account, if you have one already you are ready to go. If you don't have it create one

Login with your account in Blogger

Create a New Blog

Choose a title and the blog address that suits your blog. Choosing an address can sometimes be time taking. The blog title and the address can be updated anytime from Settings

Select Theme and Layout

Blog Layout

Select a theme based on your requirement. Some themes don't allow any layout customizations, if you want to customize your layout choose themes that allow layout customizations

The next step is to select the layout, choose one depending on your requirement

Once you select a layout, it can be further customized by rearranging, adding new or removing the gadgets as needed

Customize Layout

Layout customization is a time taking activity and you should invest some here

Once all customizations are done, take a backup of your theme

Create Content for Blog

Content in the blog can be a Post or a Page

A Post is something that always appears on the Home page and every time you create a new Post it replaces the one that is already there on the Home page

A Page is static content which doesn't usually change once created. About Me and Contact Me are a good example for pages, simililarly you can create more pages

As we are discussing about pages, it is now a good time to understand the Pages Gadget

Pages Gadget

This gadget holds all the page names and page url's and creates a menu for navigation. We will look in to it in detail when we create pages

Similar to Pages Gadget there is another gadget called Blog Archive Gadget, this holds all the blog posts that we create

Blog Archive Gadget

Create Post

About Me Page

This page is all about you

Contact Me Page

You might want your blog visitors to contact you, let us create a Contact Me page

First we have to add Contact Form gadget to the layout and then hide it so that it does not appear on all the pages

Then we have to create a new Contact Me page and add it to the list of Pages

Add the below line of code to the blog CSS to hide the Contact Form

#ContactForm1{display:none;}

Update CSS

Hit the Save button after this

HTML for Contact Me Page

Create a Contact Me page with the below HTML

<div class="form">
    <form name="contact-form">
        <p></p>
        Name
        <br>
        <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
        <p></p>
        Email
        <span style="font-weight: bolder;">*</span>
        <br>
        <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text"
            value="">
        <p></p>
        Message
        <span style="font-weight: bolder;">*</span>
        <br>
        <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message"
            name="email-message" rows="5"></textarea>
        <p></p>
        <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit"
            type="button" value="Send">
        <p></p>
        <div style="text-align: center; max-width: 222px; width: 100%">
            <p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
            <p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
        </div>
    </form>
</div>

We are done with all the changes and this is how the New Blog looks like

Finally when you are done with everything, take a backup of your blog content

Backup Blog Content