Horizontal Scrolling Menu For Blogger Mobile Site



Mobile screen being small can't hold a wide horizontal menu so people add vertical menu for mobile site specially bloggers do so but there is a simple way of install a horizontal menu in blogger mobile site that is making a scrollable menu so it will show some tabs of the menu and others can be seen by touching and scrolling. As you know that almost everyone is now using a touch screen mobile so it is a good menu for your mobile site. So in this post I am going to share 4 different types of horizontal scrolling menus. Follow below steps to add any of the menu in your blog's mobile site.


Live Demo (Open In Mobile For Best Experience)

How To Add Horizontal Scrolling Menu For Blogger Mobile Site?

Step 1: Go to blogger and open Layout.

Step 2: Add a gadget just above your "Blog Posts Gadget" as shown in below image and click on Html/Javascript.

how-to-add-code-in-blogger

how to add a gadget in blogger

Note: If you are not able to add gadget above Blog Posts then simply add it in sidebar and drag it above Blog Posts because its important to keep it there

Step 3: Copy code of desired menu from below and paste it into Html/Javascript window you just opened in step 2.

Simple Scrollable Nav Without Logo.


<style>
.nav-scroll {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    position: relative;
}
.nav-scroll a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
.nav-scroll a:hover {
    background-color: #777;
}
</style>
<div class="nav-scroll">
  <a href="https://www.blogger.com">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

Horizontal Scroll Nav With Scrollable Logo.

horizontal-nav-with-scrolling-logo-mobile-blogger

<style>
.nav-scroll {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    position: relative;
}
.nav-scroll a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
.nav-scroll a:hover {
    background-color: #777;
}
.nav-scroll img {
    width: 100px;
    float: left;
    height: 48px;
    background: #fff;
}
</style>
<div class="nav-scroll">
<img alt="logo" src="https://www.servicetrade.com/wp-content/uploads/2016/04/your-logo-here.png"/>
  <a href="https://www.blogger.com">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>


Horizontal Scroll Nav With Fixed Logo On Left.

horizontal-nav-with-logo-mobile-blogger

<div class="nav-mob">
<img alt="brand" id="brand" src="https://www.servicetrade.com/wp-content/uploads/2016/04/your-logo-here.png"/>
<div class="nav-scroll">
  <a href="https://www.blogger.com">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div></div>
<style>
#brand {
    position: static;
    float: left;
    width: 105px;
    height: 50px
}
.nav-scroll {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    position: relative
}
.nav-scroll a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none
}
.nav-scroll a:hover {
    background-color: #777;
}
.nav-scroll img {
    width: 100px;
    float: left;
    height: 48px;
    background: #fff
}
.nav-mob {
    position: relative;
}
</style>



Horizontal Scroll Nav With Fixed Logo On Top.

horizontal-nav-with-fixed-logo-on-top-mobile-blogger

<div class="nav-mob">
<div id="slogo">
<img alt="logo" src="https://www.servicetrade.com/wp-content/uploads/2016/04/your-logo-here.png" /></div>
<div class="nav-scroll">
  <a href="https://www.blogger.com">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div></div>
<style>
.nav-mob {
    position: relative;
}
#slogo img {
    float: none;
width:100px
}
#slogo {
    position: static;
    width: 100%;
    text-align: center;
    padding: 2px 0px;
    background: #eaeaea
}
.nav-scroll {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
    position: relative
}
.nav-scroll a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none
}
.nav-scroll a:hover {
    background-color: #777
}
.nav-scroll img {
    width: 100px;
    float: left;
    height: 48px;
    background: #fff
}
</style>

Step 4: Save the gadget and note its ID or name it so that you can find it in your template for next steps.

Read: How To Find ID Of A Widget In Blogger

Step 5: Go to template and click on Edit Html.

how-to-add-edit-html-in-blogger

Step 6: Find your "Mobile Nav Gadget" in your template you just added in above steps with the help of its ID or name using Ctrl + F on your keyboard. You can directly jump to your gadget also.

how-to-search-blogger-template

Step 7: After finding the gadget copy below piece of code and paste it after locked='false' as shown in below image:

mobile="only"

how-to-show-a-gadget-in-blogger-mobile-view


Step 8: Save your template and again go to Blogger > Template > Mobile.

How-to-optimize-blogger-blogs

Step 9: Change Default template to Custom and click on Save.
mobile-templates-blogger-101helper

That's it. Now open your mobile site in your mobile to see your menu working.

I hope you liked this tutorial, for more menu tutorials go to Blogger menus

Thanks for visiting 101Helper, Share this tutorial with others.

Search Keywords: Horizontal Scrolling Menu For Blogger Mobile Site, menu for blogger mobile site,pure css menu for blogspot blog,how to add css,javascript menu in blogger mobile view,101helper menus for blogger,blogging tutorials.

How to Create a Blogger Account?

Are you wondering how to create a Blogger account? Many of us do, because Blogger is one of the most popular blogging platforms out there and it can provide us with an extraordinary, fun way to express ourselves in the online world. Not only is it Blogger a very large blogging website, but it's also full of categories that you can blog on. You have complete control over what you want to blog, and that does make Blogger an amazing platform to begin with. Yet you do have to wonder how to create a blog on Blogger! We are here to help you understand all of that and so much more as fast as possible, thanks to a detailed guide that will showcase all the necessary instructions in a very easy to read manner.

Creating a Google account

What you need to know here is that Google owns Blogger, and because of that you will need to use a Google account to sign in to this platform. You can create a Google account now and then you will be able to continue to the platform without a problem. By creating a Google Account you will be able to access a wide range of Google apps and services like Drive or Mail for example. Visit the page above and share all the necessary information in order to create the necessary Google Account. Thankfully, the process is very easy and it will take only a few minutes of your time. In case you already have a Google Account, you will need to sign on the Blogger page.

create a google account

Creating your blog

Once you are located on the Blogger page, you will need to press the New Blog button in order to start a blog. You will receive a new window where you will learn how to create a Blogger account. This will enable you to share all the necessary information.
  • Make sure that you add a title for your blog in the Title area. This is very important because it will allow you to entice the visitor to read more about you and your content. So, try to make the title relevant and appealing
  • In order for users to find your blog, you will need to create an Address for it. Your blog will have a blogspot.com address, but you will need to choose what goes before blogspot.com. Basically, you can opt for something like abcdef.blogspot.com or anything like that. Remember that this can be modified in the long run. The great thing here is that you will immediately be able to see if that address is available or not. This means you will have the ability to check the address availability really fast.
  • The next step will require you to choose from any of the presets that are available at this point. Starting with a Template is a good idea, but do remember that this can be modified afterwards as well. So it's a good idea to just pick a template and move onward.
create a blogger account

Once you have the blog title, address and template ready to go, you will have to press the Create blog! button. This process will take a little bit until it's completed properly, so just wait for a few seconds as the new blog will soon be added to the blog list. So, if you were wondering how to create a blog on Blogger, this is the simplest way to do it.

Maybe the best thing about how to create a Blogger account is that the entire process is very easy to do. Even beginners will have no problem creating and setting up an account. The customization options are plentiful here, so you shouldn't have any problem setting your account really fast!

Starting to post

Although the blog address will be available, you can't call that a blog unless you start writing content in there. Obviously, you will need to learn how to write a post on Blogger, and we are here to help you with that right now.

In order to start writing, you will need to click the Create a new post link or you can press the New Post button. Once you do that, you will gain immediate access to the post editor and here you can write the blog as well as make any necessary changes to content that you already wrote.

create new blogger post

Write a title for your post

Your post needs to have a title. Towards the top of the Blogger editor you will see that there is a Post title box. Add in the desired post title there. This shouldn't eat up a lot of your time, just try to come up with a post title that is enticing, very easy to use and a delight to read for your audience. A catchy title can be great. Don't opt for the clickbait title that you can see nowadays, make your title feel informative and fun to read as that's what you want. If you want to write a first post, you need to make it introductory. Write about the goals you have, the type of content you want to add and so on. It will not be easy to write down the first words, but if you create a good title it will be easier for you to translate thoughts into words!

create blogger post title

Start the writing process

You can create a Blogger post in 2 ways. You can either write the post in HTML or you can use the word processor included here. You have a button located in the top left corner which helps you switch between any of these two writing models. The HTML editor helps you create better web content and you can also use it to insert some special web functions. On the other hand, the word processor is more than qualified to offer you all the extra help you might need here.

blogger post compose html

Customizing text

If you want, you will be able to customize the text you want without a problem. You will have the ability to use the toolbar located on top of the editor to modify the text as you see fit. This includes formatting, color, size, alignment and so on. You have a Normal drop-down that helps you change the type of content you want to add, so you should consider changing between the desired heading type as you see fit. This also changes the way search engines process your content, so keep that in mind.  If possible, try to break the content into easy to read pieces. Use the Headings in a strategic manner.

blogger post heading

Add an image to your post

If you want to make your blog post enticing, you should try to add at least an image. These images make posts a lot easier to read and it's a good idea to make the most out of images if you want to share a great experience for your audience. You will have an "Insert Image" button right above your text editor, on the toolbar. There are multiple options, you can either upload them from your PC/Mac, you can share a link or you can use your webcam to take a picture if you want. However, if you link to other websites, make sure that you showcase their copyright or just refrain from doing that to begin with. There are many sites who do not agree with the idea of having their content stolen, so try to stay away from that!

insert image in Blogger post

Modify the post settings

If you look on the right side of your Post Editor, you will be able to access some Post settings. Remember that these make it easy for you to customize your post right before you choose to publish it!

blogger post settings
  • Labels are useful if you want to group multiple posts which are very similar to one another.
  • Schedule allows you to publish your content at a later date. It can come in handy if you don't want to share multiple articles at the same time.
  • Permalink is an option that allows you to select the way your post will be linked to in the future. Usually it will maintain the title structure, but there are other link types you can choose from as well.
  • Location enables you to add a location tag for your post. It's a very good tool for those that move/travel often
  • Options allows you to modify some features like the user ability to comment on a post for example. You can also choose the way your HTML code is interpreted here as well.

Previewing

A great thing about previewing your post is that you will be able to see how it looks when a reader will access it. This is the right time when you need to check your post for any errors, be it grammar or structural ones.

preview blogger post

Save the post for later

This is not the same as scheduling. When you save the post for later, it means that the post just isn't finished at this time and you will continue to work on it at a later time. You can see this as a draft for your future post.

save blogger post

Publishing the post

If you double or triple checked the post and there are no errors, then you are good to go. Still, it's a good idea to go through it at least one more time to ensure that all the content you want is there and you don't have to make any more changes. Add all the necessary labels and tags, make sure that you inserted any links, images and other information that you might need.

Once everything is ready, you will just have to press the Publish button located at the top of the panel. This is when Blogger will automatically redirect you to the Posts page. Here you will see the post right on top.

publish blogger post


Don't believe that your work is done at this point. In fact, it's far from that. You still have a long way to go before you properly optimize and improve your blog. After all, people won't be drawn in to your blog if you have just a single one to begin with. Work hard to write great posts as they will be able to make your blog stand out in the long haul.

Of course, you do need patience. Writing a good blog does require time and you shouldn't rush the content creation. Prioritize quality over quantity all the time. If you don't do that, the experience will be very well worth it in the end.

How can you expand your blog?

As we mentioned earlier, writing a single post is great but it won't draw in a lot of traffic. If you want to write a good post, one that will bring in lots of readers and views, you want to post as often as possible.

Quality content will always bring in traffic. Update the blog as often as you can. If you can share at least a post per week, you should do that. A good stream of posts will always come in handy, so make sure that you always write some good, enticing content that will help populate your blog.

If possible, we recommend you to create a post Schedule as this will help you better optimize the way you post. This way you will be able to prepare your content beforehand, so you can have it ready when you want to create a new post. The best approach is to write more than 1 post at a time. One can be posted and the others can be kept for a later date if you so desire.

create blogger posts

Write for a niche

Generalized content works but it won't really deliver good results for your audience. If you want to get the best results, we recommend you to find a niche as fast as possible. Not only does a niche help you target specific users, but it will also help you become an authority on that topic. We recommend you to research a niche and become an expert on it. This is the best way to create a large audience for a niche and from here to reaching success in blogging will be just a small step.

Don't rush the content creation process, especially if you write for a niche. Creating redundant content will just keep people away. As long as you take your time and focus on results for your audience, the experience will be an amazing one. Of course, use the proper content structure in order to cater to the needs of search engines, all while maintaining the content relevant for humans as well!

Reader interaction

Once you learn how to create a blog on Blogger you can create more than a blog in order to reach multiple audiences. But the idea here still remains, you will need to interact with the audience. The community will grow more and more as you put out content, so make sure that you always interact with the audience.

Read the comments and moderate them, make sure that you remove spam. Also, reply to people that are interested in what you write. This will help create and nurture a community around your content, which can be very interesting to do!

blogger comments

Advertising your blog

Your blog will need advertising if you want it to grow really fast. One of the best ways you can do that is by sharing it with people anywhere you can. From social networks to social media or any other location, all of these are great places where you can share your blog. We recommend you to try and do the following:
  • Post a short headline and a link to your article on Twitter
  • Single Blogger is a Google Product, make sure that you use the Google buttons in order to share on Google Plus and perform other similar actions.
  • Encourage readers and friends to share your Blogger posts on Facebook and anywhere they can. This will help you reach a large audience really fast.
  • Make sure that you comment on forums and other blogs. Link to your post there if it's meaningful for that particular topic. This type of practice is called backlinking and it's very good for SEO.

Place ads

Ads are very important if you want to monetize the blog. You won't be able to monetize your blog with AdSense unless you have a blog active for around 6 months, so keep that in mind. You also need to have at least 18 years of age and you also have to obey the TOS. AdSense allows you to receive payments based on the amount of impressions generated by your blog.

sign up for AdSense

Blog customization

You can modify just about anything you want on Blogger, it all comes down to you to make the right changes! For example, you will be able to press Layout and then you can modify the block content for each section of your blog. You also have the ability to Add a Gadget if you want. Blogger has lots of add-ons to choose from, all of which can help you better define your blog!

If you want to customize your Template, keep in mind that there are multiple customization options to choose from. You can also keep the template you have now. Programmers can press the Edit HTML button so they can modify the CSS and HTML code.

blogger template edit HTML

Stat tracking

Blogger has a dedicated option named Stats where you have the ability to monitor the blog performance. Here you have the ability to see the amount of views you get. This way you can identify what posts are performing better than others. As a result, you know what content works great for your audience in the longer term!

Learning how to create a Blogger account is really easy and you can feel free to create multiple blogs if you want. Just make sure that you write content for all of them. Plus, you can also monetize each one of your blogs if you so desire. Take your time and make sure that you provide valid information for your readers. This should be the main reason to create a Blogger account in the first place!

How To Add HTML Tables In Blogger Posts

HTML tables are simple tables which gives a summery of something and are mostly used by those bloggers who own blogs about money so they show there content e.g info about ad networks in the form of tables. But not all bloggers know how to add HTML tables in blog posts and blogger does not have any option to create HTML tables so it can be added only manually. And that's actually the reason of writing this post. In this post I will share with you how to create an HTML table and add it in your blog posts. I will show you only simple one because there are a number of types of HTML tables and I can't share each and every type of HTML table so I will share a simple HTML table with text Like this!So lets get started!

How To Add HTML Table In Blogger Posts?

Step 1: Copy code of HTML table from below:

<style>
#mytable{
width:100%
}
#mytable, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
#mytable th, #mytable td {
    padding: 5px;
    text-align: left;
}
</style>
<table id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Step 2: Go to blogger > Posts > Edit a post Or Create a new post.

Step 3: Switch to Html view of the post editor and paste the copied code after a certain text or in the beginning of the post or after an image, where ever you want to show your HTML table in the post.

how to switch to HTML editor In blogger.png

Step 4: Make changes according to your choices and publish your post to see your HTML table.

Understanding The HTML Table Code:
html table blogger


After adding above code for HTML Table, you need to make changes in the text and the table code and for that you need to understand the code because without it you can't add a new row in your table and can't add custom info in the rows and columns of your table. so read out below to know what the code is doing.

Here is the CSS code of your table:

<style>
#mytable{
width:100%
}
#mytable, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
#mytable th, #mytable td {
    padding: 5px;
    text-align: left;
}
</style>

It gives your table the borders for each row and column and if you want, you can add your own decorations to your table for example to add a background color you need to add this:

background: yellow;

You have to add above piece of code in this part of code:

#mytable{
width:100%;
background: yellow;
}

Now its time to make changes in the info which is added in your table's row and columns. Here is the overall code for your table:

<table id="mytable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

In this code blue one is the first row of your table, orange is the second, green is the third and yellow is the fourth row of your table. Now you can change text according to your choices.

To add a new row you need to add a simple piece of code below the yellow one, here is the simple piece of code that is need to be added for new row:

<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

For more HTML tables visit w3schools. Or search for online HTML table generator and create one for you.

I hope you found this post helpful. If you have any question ask me in comments or contact me. Thanks for visiting 101Helper.

Search Keywords: How to add HTML Table in blogger posts, html tables with rows and columns for blogger, how to add html table in blogger with CSS style, show content in table form in blogger posts.

How to Get a Disabled Gmail Account Back

It can be a frustrating experience when you find your Gmail account is no longer active. Having your Gmail account disabled means losing access to the products by Google that were linked. There are several reasons why your account may have been ended that are mostly due to the Terms of Service policies by Google itself. So, if you have violated one more of the polices either intentionally or not, you can find yourself with a disabled Gmail account.

Adding to the frustration is that Google will often disable the account with no warning. However, the good news is that there are simple methods for getting your account back online.

Gmail Account Temporarily Disabled

This is generally the easiest to overcome as Google believes that your account may be compromised. To rectify the situation, you will be asked to provide your mobile number or recover email identification. If you do either, they will send you a text message that will allow you to access your account quickly. You will need to do so within a 48-hour period otherwise it will become more difficult to get back your account.

Gmail Account Disabled Due To Perceived ToS Violation

If your Gmail account disabled included a terms of service (ToS) violation warning, then you will need to fill out their contact form so the process of getting your Gmail account back can begin. You should read the ToS thoroughly so that the violation will not happen again and provide the email address. If you do not get a response, repeat the step every two days until you do.

gmail account disabled
Gmail account disabled - Google contact form screenshot

Once they have responded, the next step should be to get your Gmail back so that you can gain automatic access to all the Google products including AdSense. You can also visit the help forum where you can open a 'Gmail account disabled' topic. Just focus on the Gmail account itself first as that is the key to the rest of your Google services. You'll want to discuss the issues that you are facing and why this needs to be resolved as quickly as possible. If the Top Contributor pings your thread to the staff at Google, then you should expect your account to be back online in 48 hours or two business days.

Gmail Account Disabled Due To Serious ToS Violations

If the Gmail account disabled was due to a serious violation of the Terms of Service agreement, as well as the Google policies that oversee your account, then you will have considerable difficulty in getting your account back. Such violations would include your AdSense account being involved in click fraud, for example. Serious violations that are clear will make it virtually impossible for your account to be restored.

If what happened was not considered a serious violation, then you should be able to get your account up and running within 24 to 48 hours depending on the circumstances. It pays however, to keep all your important data and information outside of your Google accounts in case of getting a Gmail account disabled result. By protecting yourself, the impact will be easier to handle until you can get your account back online.

5 Best Custom Blogger Contact Form Widgets

In the past, adding a custom contact form for Blogger was quite a complex process, and many bloggers were forced to use third party websites. However, even after Blogger launched its own contact form gadget, it was still considered as highly inadequate. This is because the official gadget would only be implemented on the footer the sidebar. Most bloggers preferred having a separate blogger contact form placed on its own page to make their blogs appear well arranged and more professional as well.

Having a well laid-out Blogger contact form is very important. This is the tool that visitors, companies, and brands can use to contact you and it is simply a must-have feature for every blogger. If you are not comfortable with sharing your main email address directly on your blog, then a custom Blogger contact form offers an effective way in which people can easily reach you.
5 Best Custom Blogger Contact Form Widgets

Why you should use a Blogger Contact Form?

If you are still stuck on third party providers, you should definitely consider switching to the official custom contact form for Blogger since it has various unique benefits, like:
  • Messages are delivered immediately - As the blog administrator, you will receive a message immediately the visitor clicks send.
  • Reliable - It is the official form developed by Blogger, which makes it more trustworthy and reliable way to initiate contact as compared to using third-party services.
  • Questions - The contact form offers a platform for your visitors to ask specific questions that they might have regarding the blog you wrote or your business in general. It can be an excellent way of capturing leads and even lead to conversions if you are selling a certain product or service.
  • Feedback - Visitors can easily comment on your blog by leaving their feedback through your contact form. This feedback can help you determine which post to do next or what areas to address based on the visitors' comments.
  • Information or service request - For those who are using the blog as a way of marketing a product or service, potential clients can use the custom contact form for Blogger to reach out and request additional information.

How to Add Blogger Contact Form Gadget

Before adding a custom Blogger contact form to a static page, we need to add the default contact form in the blog's sidebar to make it functional:

1. Log into your Blogger dashboard and go to "Layout" > click on the "Add a gadget" link on the page elements area.

2. Select "More Gadgets" below the "Basics" tab and click the "+" button to add the Contact Form Gadget.

blogger contact form

Hiding Blogger Contact Form from the Sidebar

Once the contact form has been added, next step is to hide it so that it will appear only in the static page.

1. Go to "Template" and press the "Edit HTML" button. Once the code editor opens, click anywhere inside the code area and press CTRL + F keys (or Command + F for mac) to open the search box.

2. Type or paste the following tag inside the search box and hit Enter to find it:
]]></b:skin>
3. Just above the ]]></b:skin> tag, add this CSS code:
#ContactForm1{display: none !important;}
4. Click the "Save template" button on the upper left side and view your blog. The contact form widget should be gone.

Adding Custom Blogger Contact Form in a Static Page

Finally, now that we enabled the functionality of the contact form, let's add a custom contact form in our Blogger blog...

1. Go to "Pages" and click the "New page" button. If you already have a Contact us page, just click the "Edit" link below the page title.

2. Once the Page editor opens, fill up the page title with Contact/Contact Us or any title you want to show. It is recommended doing this before anything in order to make the permalink SEO friendly.

3. Click on the HTML tab as there we will add the code to make the custom Blogger contact form work. On the right site, change the Page settings to hide ("Don't allow" or "Don't allow, hide existing") the reader comments, then click the "Done" button:

contact static page

4. Below are 5 custom Blogger contact form styles. Pick your favorite and copy the code provided, then paste the code inside the HTML box of your page editor:


Simple Contact Form

custom blogger contact form

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.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:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.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"><div class="form"><form name="contact-form"><div class="contactf-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"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></form></div></div></div>

Contact form with CSS rainbow divider

colorful contact form for Blogger

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.5%}.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:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.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"><hr><div class="form"><form name="contact-form"><div class="contactf-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"><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"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" type="text" 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>

Blogger Contact Form with CSS Ribbon

contact form with ribbon

<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;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.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>

Minimal Contact Form

minimal contact form for Blogger

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.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:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie8AmFJUXNBxOLGf0J6p0jbOy2ikxKO4h6O9qHDABb8GppIItOH1a8Bd7gwxtDSJMH8TeNKp3BW369mITS_-DFmvxyUmxZdili2ZFsCWFJ4flDEpBmaHki23tItSMS1u0YRx8MRUBnXJXp/s1600/avatar%25281%2529.png" width="16" height="16" /></div><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"><div class="email-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii6lajfCShiTmxJawxzyaUdPuEa56hDMPJH2VOiFrpAKcgnTsz7os-RDrzoSO-GSDgFnSEkWaE1lQi0_yEDHPPTKxEwxW53UWNGIMQHQ5koxcHhMVI0t_6Z3tCBTyXwK71aAPMlr9Fa3A8/s1600/envelope%25281%2529.png" width="16" height="16" /></div><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"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" 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" /><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>

Contact form with speech bubble



<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.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:0 0 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
</style>
<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Message" rows="5" value="Message" onblur='if (this.value == "") {this.value = "Message";}' onfocus='if (this.value == "Message") {this.value = "";}'></textarea></div><div class="cbluebutton"><span><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span></div><div class="contactf-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"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}'/></div><div style="clear:both"></div><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>

5. After you added the code, click the "Publish" button on the upper right side. Now you should be able to see the Blogger contact form live on your static page. To ensure that everything works fine, you can send a message as a test. The message should be delivered to your inbox in a matter of seconds, just make sure that you're checking the email that you're using with your Blogger account.

Frequently Asked Questions about the Custom Contact Form for Blogger

Where do the messages go?

Once a visitor asks a question or sends feedback through the Blogger contact form, it is instantly delivered to the email associated with your Blogger account. If a blog has several administrators, then all the individual administrators will receive the comments or questions asked by the visitor.

What is the benefit of using a separate "Contact Us" page?

Even though it all comes down to your personal preferences, your blog will look more professional if it has a separate page for the custom contact form for Blogger. It gives you credibility and also offers you the chance to add a specific call to action in the new "Contact Us" page.

Is it possible to add extra fields?

Unfortunately, no. You can't add custom fields such as website, phone number or mailing address since Blogger uses special tags in order to transfer data. In any case, the default fields are well laid-out and will help you to get the basic information you need about your visitors.

I have installed the Blogger contact form, but it is not working. What could be the problem?

There are several reasons why you may be having trouble setting up your contact form. The simplest way to troubleshoot is to countercheck the email you linked to the blog and also reinstall the form again.

Ultimately, by using the custom Blogger contact form you gain from consistency in the type of information you request and also reduce spam since you will not have to display your email directly on the blog.

How To Start Blogging - Full Guide To Become A ProBlogger

How-to-start-blog-101helper


There is nothing new which I am going to tell you about blogging in this post. Its just a path for those who are new to blogging and in this post I will tell you how to start blogging, how to build audience, how to choose niche for your blog, how to get your blog on search engines, how to start earning and how to become a professional blogger. So we have following topics in this post.

Topics(You Can Jump To Certain Topic By Clicking On It):

1. How to choose niche / Topic for my blog?

2. What should I choose as blogging platform(Wordpress Or Blogger)?

3. How to create / start a blog ?

4. How to build audience for my blog ?

- Social audience

- Webmaster tools

- Search engine optimization

- Email audience

5. How to earn money from my blog ?

6. How to upgrade my blog to domain ?

1. How to choose niche / Topic for my blog?

Choosing a niche for your blog is actually the base on which your blog will stand. In case of any mistake you can't be a successful blogger. So before creating a blog you need to decide what you should blog about.

To choose a niche for your blog first you need to search what trending on internet or blog about what you know. For example if you know about how to make money online, start blogging about it. It will surely bring you a big audience. Furthermore if you know about cooking then you can start blogging about cooking and share your recipes with others.

Also if you know about programming you can start a blog about it. But the thing is you must know about the thing about which you are going to start blogging.

So the bottom line is start blogging about something you know or what is trending but first know about it.

2. What should I choose as blogging platform(Wordpress Or Blogger)

Before we judge whether we choose wordpress or blogger for blogging let me share features of both:

Features of blogger:

  • The first feature of blogger is overview where you can see latest updates of your blog such as comments, today page views, total posts, followers and a graph which shows your traffic stats.
  • The second one is post where you can see how many posts are in draft or published. You can edit them here.
  • After posts other option is comments which shows you how many comments you have approved to show and how many are spam.
  • The fourth is Google+ where you can manage where to share your updates whether on your on profile or any page you created on Google+.
  • After Google+ there is another option of stats which describes your blog's traffic briefly. It shows today's traffic, yesterday's traffic, Last month page views, all the time traffic, countries of visitors, the pages they have visited and traffic sources.
  • Other option is earnings, if you have a Google AdSense account your earnings will show up here.
  • A new feature is also added which is campaigns where you can create ads of your posts which will show up in Google searches. It is very easy way to increase your blog traffic but its worth.
  • After campaigns there is a layout option where you can change favicon of your blog, select a navigation bar, add description,title or image to header, edit blog posts settings and add or remove a gadget to your blog. 
  • After layout there is Template option with which you can customize or edit your blog template and can choose another template for your blog.
  • After all options there is a last and very important option of settings which helps you to control posts and comments settings, basic settings, search preferences, language, time zone, date and other.

Features of Wordpress:

  • Build a blog, a full website, or a combo. Personal blog, portfolio, business site — it’s up to you.
  • Start free. Upgrade for advanced customizing or business tools. Or stay free!
  • Add a custom domain to carve out your own space on the web, and manage it right from WordPress.com.
  • Over 25% of the web runs on WordPress. WordPress.com is home to everyone from brand-new bloggers to Time, CNN, TechCrunch, and more.
  • Choose from hundreds of customizable themes, with new additions weekly.
  • Create a mobile-friendly site with a click, or choose from a wide selection of responsive themes that look great everywhere.
  • Get friendly, expert help — our team of Happiness Engineers is standing by.
  • Support is available 24-7 via email and our community forums. For folks with an upgraded plan, Happiness Engineers are available via live chat for real-time assistance.
  • Wordpress's editor is fast, intuitive, and saves your work every few seconds, so you never miss a word.
  • Drag-and-drop images into posts and pages. Create designer-worthy photo galleries. Embed audio, video, and more.
  • Update your site from anywhere with mobile and desktop apps for iOS, Android, Mac, Windows, and Linux systems.
  • Whatever you create on WordPress.com is yours alone. Export your content at any time
  • Automatically send new posts to Twitter, Facebook, and more, and add social tools to help readers share their favorites.
  • Make it easy for new fans to find you with built-in SEO. All you have to do is publish.
  • Learn more about your visitors — where they’re from, what they read, when they visit — with rich, easy-to-read stats.
All the above features are from wordpress.

But In my opinion blogger is better than wordpress. So I would prefer blogger to wordpress because of its easy interface and so much popularity.


3. How to create / start a blog ?

Its very easy to start a blog using blogger. All you need is a gmail account. Here are the steps to create your first blog. You can watch a video too!


(1). Create a Gmail account first and build your profile.

(2). Now go to https://www.blogger.com and sign in to your account.


(3). After signing in you will see below page.


How to create a blog or site on blogger | 101Helper

(4). Click New blog to create blog,when you click it a popup window will open as shown below.


How to create a blog or site on blogger | 101Helper

(5). Now give a title to your blog which will be the name of your blog, and select a url or web link for it. Sometimes your desired urls are not available. Take care of having a title similar to blog's url as it will be helpful for seo( search engine optimization). For example your blog's title is 101Helper then select a similar link as I selected https://www.101helper.blogspot.com

(6). Below the Address option you can see Template which means how your blog will look? there are many templates such as simple, Dynamic, picture windows, Awesome inc, Travel etc. Select one of them which you like, I prefer simple as it looks good.

(7). After filling and selecting your choices click Create blog! Congratulations! your blog is created and ready to use.

4. How to build audience for my blog ?

This is the hard part of blogging because no matter how useful your content is, how meaningful posts are you writing, how better are your writing skills, you can't build a big audience is a day or in a month because it may take a month, 6 months or a whole year. Because building audience doesn't entirely depend on your content because even if you have golden content in your blog you can never get big audience until your posts are social, bookmarked, indexed in search engine results.

So to get a big audience you need to do following things.

- Social audience

To build social audience you need a platform so create a Facebook page, Twitter profile, Google+ page and other social profile if you need them.

After creating your profiles on social networks, share every post of your blog on your social profiles and ask your visitors to like your page, follow you on twitter or Google+ or Pinterest.

You can use gadgets for this, here are some which can bring you followers which really want to read your blog posts.

For Facebook Likes:

➥ Facebook Pop-up Like Box With Lightbox For Blogger

➥ How To Add Facebook Page Plugin/Like Box In Blogger

➥ Animated Slideout Facebook Follow/like Box For Blogger

➥ How To Add Pop Up Page Take Over Follow Buttons In Blogger


For Twitter Followers:

➥ How To Add Twitter Follow Box In Blogger Blog

➥ How To Add Pop Up Page Take Over Follow Buttons In Blogger

➥ Twitter Flying Bird For Blogger

For Google+ Followers:

You can generate your own Google+ follow button as well as you can add Google+ Follow box in your layout.

➥ How To Create Google+ Page And Connect It To Blogger

➥ Social Follow Box Slider Widget For Blogger

For more follow buttons, follow boxes you can search 101Helper!

- Webmaster tools

Webmaster tools are really really important to build a big audience because it is the way by which you tell search engines to send there robots to your blog, scan your site, get your post titles, description, images and links and show them in the search results when a proper keyword is searched by someone.

Here is a picture which will tell you what actually webmaster tools are.

what-are-webmaster-tools

So after creating your blog your first step should be submitting your blog's sitemap to all webmaster tools e.g Google, Bing and Yandex.

Here are some posts that you might like to read:

➥ How To Blogger Sitemap To Google Webmaster Tools

➥ How To Submit Blogger Sitemap To Bing Webmaster Tools

➥ How To Submit Blogger Sitemap To Yandex

- Search engine optimization

After submitting your site to webmaster tools you need to optmize your posts and blog for search engines. Get a seo friendly template for your blog and install it or read out search engine optimizations tutorials to make your blog ready for search engines.

➥ Blogger Seo Tutorals

- Email audience

Growing your email subscribers list can increase your blog's traffic and also promotes your blog. So you should have a feed burner's feed for your site or you can use MailChimp for your blog and send your subscribers emails about your new posts. Here are some posts that I want you to read for email audience.

➥ How To Set Up An Rss Feed For Your Blogger Blog

Later, after setting RSS feed for your blog, you can let your visitors to subscribe to your news letter for new posts.

➥ Email Subscription Widget With Follow Buttons For Blogger

➥ How To Add E-mail Subscription Gadget In Blogger


5. How to earn money from my blog ?

how-to-make-money-blogging

Well most of blogger start blogging just to earn money but I recommend not to add a single ad in your blog until you have at least 150 page views per day because if you have less traffic but still you have ads on your blog, you will not earn good and this will decrease your interest in blogging and at a time you will quite blogging because you will start thinking its a waste of time. So I advice you not to add ads in your blog until you get 150 page views per day.

And after having atleast 150 page views per day you can start earning money from your blog. But the point is "Traffic is money" so never place pop up ads because people never visit a blog which have so many pop up ads. You can install interstitial ads and slider ads etc.

To start earning money read:

➥ How To Earn Money From Blogger Blog

For more tutorials about money go here

6. How to upgrade my blog to domain ?

upgrade-to-com-blogger


Every blogger has a question when he is having success in blogging that "should I upgrade to a domain ?" because most of bloggers think that after upgrading to a domain you can get more traffic and earn more money but this is a wrong concept so the answer is obvious that if your blog is doing well don't upgrade and if you are going to upgrade then start from a domain, don't start blog because the time that you spent on your blog is wasted when you upgrade to domain because you have backlinks from other blogs and social networks and all these are not wasted but they are not of that value that would be when you have a blog not domain.

So in my opinion I advice you to avoid upgrading. But if you still want to upgrade to a domain, follow any of the tutorial on other blogs.

I hope you like this post and you found what you came for. If you have any problem or something is missing in this post you can share it with me in comments below or by contacting me.

Thanks for visiting 101Helper. Share this post with your friends and other bloggers.

Search keywords: How to start a blog, how to create a blog, blogger or wordpress benefits,how to start blogging steps,how to create a free website, how to become a problogger,newbies to blogging,blogger guide,how to use blogspot.