101Helper.Com: Blogger

Top Menu [Pages]

    Social Links

Articles Update
Loading...
How To Create Contact Page On Blogger Blog
Blogger is very robust and easy to operate CMS platform, you don't have to be a geek to operate the dashboard or settings. But with easiness, there comes some limitations, By default you can't create a Contact us page, you have to either you have to use any third party plugin or have to tweak blogger's official contact widget, so that it can work on static pages. Creating a separate page for contact purpose is very professional and also makes your blog clean by hiding unnecessary widgets and plugins thats’s why , Lets move further and see How to create Contact Us page without Adding Contact Form Widget in Blogger Blog.

Hiding The Widget (If already Added Contact Form Widget in your template).

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to Blogger Dashboard > Theme > Edit HTML and search for the ending ]]></b:skin>tag and just Above it paste the following code.


.sidebar .widget.ContactForm {
    display: none!important;
}


Creating a Page

To Create Contact Us Page Go to Blogger Dashboard.

How To Create Contact Page On Blogger Blog

Click on the Pages

How To Create Contact Page On Blogger Blog

Click on the New Page Button.

How To Create Contact Page On Blogger Blog

  • Give The title Contact Us
  • Click On HTML and Copy and Paste the following Html Code



<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" /> </div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" /> </div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea> </div>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>


Add the following CSS Code.


<style type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(//1.bp.blogspot.com/-EjaivrciJ2E/XpiXp1OyCWI/AAAAAAAAALI/2Qor5dfvEV8ISc4t9ENpjefSc9hThcwvQCLcBGAsYHQ/s1600/Mail-me.PNG);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){
  .formcolumn1,.formcolumn2{width:100%;padding:0}
}
</style>


If you want to add this CSS Code in the Template, add right just bellow the code ]]></b:skin>. With the Blogger’ Conditional Tag.
<b:if cond='data:view.isPage'>
..........
..........
</b:if>


Add the Following JavaScript Code.


<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != 'undefined' &amp;&amp; BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = 'templatesV1';window['blogger_blog_id'] = '<data:blog.blogId/>';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>','<data:blog.url/>','<data:blog.blogId/>');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '<data:blog.blogId/>', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script>


If you want to add this Javascript Code in the Template, add right just Above the code </body>. With the Blogger’s Conditional Tag.
<b:if cond='data:view.isPage'>
..........
..........
</b:if>


  • Click on the Search Description and write the description.
  • Then, click on the Option Select Don't allow, hide existing and click on the Done. After that, Publish the Contact Us Page.

How To Create Contact Page On Blogger Blog

How To Add Stylish Contact Form Widget On the Blogger Blog
Basically Contact Form widget will give your visitors and readers a medium to contact you easily. Blogger doesn't supports plugins like wordpress so it becomes very hectic job to find a better looking and better working contact widget for your blog.

There are a lot of third party widgets available but most of them are premium or very limited to access, But if you use blogger's default one, it becomes easy to manage messages you will receive through this widget as it will forward the message to your same email id which you are using to access the blog.


Create Contact Us Widget On Blogger’s Blogspot Website


Follow the steps given below to add a contact us gadget on your blog.

Go to blogger.com and log in to your account. If you are running multiple blogs, you need to choose the desired blog from the list from your blogger dashboard.

How To Add Stylish Contact Form Widget On the Blogger Blog

Click on Layout from the left sidebar to get an option to add gadgets.

How To Add Stylish Contact Form Widget On the Blogger Blog

You can see an Add a Gadget link on the main panel on the right side. Clicking on it will bring you to a list of gadgets.

How To Add Stylish Contact Form Widget On the Blogger Blog

There are more gadgets. Now, you will see Contact Form. Just add the same to add Contact Form Widget. Then, you will see popup.

How To Add Stylish Contact Form Widget On the Blogger Blog

Click on the Save Button to save Contact Form Widget.

Next, please open Template Dashboard > Theme > Edit HTML >  apply the code below before  </style> or ]]></b:skin>.

/* Contact Form */
#ContactForm1_contact-form-widget {
    max-width:100% !important
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#ContactForm1_contact-form-name {
    width:47.7%;
    height:50px
}
#ContactForm1_contact-form-email {
    width:49.7%;
    height:50px
}
#ContactForm1_contact-form-email-message {
    height:150px
}
#ContactForm1_contact-form-button-submit {
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#ContactForm1_contact-form-button-submit:hover {
    background:#2c3e50
}
#ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email-message:focus {
    box-shadow:none !important
}
@media screen and (max-width:640px) {
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width:100%;
}}


Then, Save Template.

How To Add Stylish Contact Form Widget On the Blogger Blog

Breadcrumb is an important part of blogger blog, First it helps in easy navigation and then it also helps in case of SEO. this widget is very clean and easy to use, comes in very minimal state with elegant appearance it enhance your blog looks. The benefit of this breadcrumb widget is that it shows only one label in between, in terms of seo google shows only one label in the search results, So we have maintained it in a same way, We have managed the number of labels displayed on Breadcrumbs is only one. No matter how many labels are added to each blog post, still only one label will appear on the breadcrumbs.

Some time ago I got an email notification from Google Search Console about the problem of breadcrumb data-vocabulary.org schema deprecated with the contents of the message as shown below.


Google announced support for vocabulary data on April 6, 2020 !, about "data-vocabulary.org schema deprecated"

As of April 6, 2020, http://data-vocabulary.org  markup will no longer be eligible for Google rich result features.  You can read more about this news on google's official blog, through below link. Check Here : -
https://webmasters.googleblog.com/2020/01/data-vocabulary.html

But you don't need to panic. Now this is a crucial step and you need to carefully do this to convert vocabulary-data.org to schema.org, otherwise, you won't be able to fix the issue.

First open the Blogger page> Click the Themes menu and click the Edit HTML button.

In the template, search for the below code. <b:includable id='comment-form' var='post'>

Once you will find the code, right above the code look for the HTML post code like this,

<b:includable id='breadcrumb' var='posts'>
..............
...............
</b:includable>


Replace it with below code.


<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
                  <span itemprop='name'>Home</span></a>
                  <meta content='1' itemprop='position'/>
               </span> / <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'> / </b:if>
               </b:loop> / <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>


Then add the following CSS code before the code ]]></b:skin>


/* Breadcrumbs */
.breadcrumbs{padding:0;margin-bottom:20px;border:0;display:inline-block;font-size:12px;color:#888}
.breadcrumbs a,.post-info a{color:#888}
.breadcrumbs a:hover{color:#f24a4a}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#888}
.homebread{margin:0 2px 0 0}


Next, find the code <b:includable id='main' var='top'> and add this code <b:include data='posts' name='breadcrumb'/>directly below the code <b:includable id='main' var='top'>

After that, click Save theme and finish.

The next step is to check back on your https://search.google.com/search-console blog and click on the Breadcrumb menu.


Click on the writing Error section , after that click on the button Validate Fix


Then, just wait for the repair message to be sent via email after it is validated.

How To Fix data-vocabulary.org Schema Deprecated Breadcrumb Error in Blogger Search Console

To create your Blogspot blog go to the www.blogger.com on your internet address bar.


STEP 1. Click on create your blog.



STEP 2. To continue to blogger enter your email address to sign in then click on Next button. if don't have a Google account (Gmail Id) create one.
  • To create a Google account (Gmail Id) Click on the link below.
How to Create a Google Account (Gmail Id)?


STEP 3. Enter your Gmail Account password. Then, click on the Next button.

STEP 4. For a first time user, you will see an option to use the identity from your Blogger profile.


Type your name and click on Continue to Blogger button.


STEP 5. Click on Create your blog button.


  1. The first thing you need to do is add a title and select your preferred blog domain name. Choose a short domain name that is relevant to your blog topic.
  2. Avoid using your personal name as the domain name, and instead, use some generic domain name that you can brand later with a custom domain.
  3. You can then select a suitable blog template (decides how your blog will look on the front end and don’t worry you can change it anytime) and click on “Create Blog ”
  • Finally, you have created a free Blogspot blog.


STEP 6. Now you can Customize or Edit HTML of your blog. you can write posts, you can add pages. you can change the layout and upload a new theme also.
Most importantly, you should change your blog’s template at first. to change the theme you can Edit HTML otherwise you can use third-party blog template. There are too many blog templates available free version and the premium version on the third-party website. You can download and install. to install the third-party template Click on Backup / Restore button on the right side corner.
Free download Premium Version of Blogger Template Click Me


  • Browse downloaded XML file then Click on the Upload button.


To change Layout click on Layout. You can add an icon, header and you can add or remove the gadget.


STEP 7. To optimize your blog Click on Setting.
  • Basic
  1. Add or Change your Blog Title.
  2. Add a description. Adding a description to your blogger blog helps readers and search engines know what your blog is about. You can set it by selecting the basic settings option under the main “settings panel.”
  3. To get a free SSL certificate, choose HTTPS Redirect "Yes".
  • Posts, Comments, and Sharing.



  1. You can set up Posts, Comments, and Sharing option.
  • Emails



  • Languages and Formatting.


  1. You can set up language and Time format.
  • Search Performance.



  1. Add Description, You will write a good summary of your blog here. This will appear on search engines and will attract readers to your blog.
  2. Add Custom Page Not found, When people land on your website through a URL that no longer exists, you can set a message to them that the page doesn’t exist. You can set any custom text or HTML message instructing them on what to do next.
  3. Custom redirects, If someone links to any of your posts or pages, and you happen to delete that page, or the link to a wrong URL that doesn’t exist, you can use this option to redirect all such backlinks to any single page. Ideally, this should be your homepage URL here.
  4. Add Robots.txt, Robots.txt is a text file webmasters create to instruct web robots (typically search engine robots) how to crawl pages on their website. The robots.txt file is part of the robots exclusion protocol (REP), a group of web standards that regulate how robots crawl the web, access and index content, and serve that content up to users. The REP also includes directives like meta robots, as well as page-, subdirectory-, or site-wide instructions for how search engines should treat links (such as “follow” or “no follow”). In practice, robots.txt files indicate whether certain user agents (web-crawling software) can or cannot crawl parts of a website. These crawl instructions are specified by “disallowing” or “allowing” the behavior of certain (or all) user agents.
  • Others



  1. Setup Other Feild.
  • User settings


  1. You can set up the Blogger user profile and language.
STEP 8. Add Pages
  • Add About us page describing who you are and what your blog is about.
  • Add Privacy Policy and Disclaimer pages for legal clarifications as to how your site uses your visitor data and to what factors you are liable to them and whatnot.


  • Click on Pages => New Page


Write your page title and content and click on the Publish button.
STEP 9. Write Post



  • Click on Post => New Post


  1. Enter your Post title and content.
  2. Give the Label Name.
  3. Set up Permanent address.
  4. Write Search Description.
  5. Click on Options and choose reader comments to allow or disallow.

Create Free Blog on Blogger.com

Get the latest in your inbox.

Signup to be the first to know when we publish updates, best-practices, tips and tricks.