Easiest Steps on How to Add Contact Form or Contact Us to Blogger

Adding a contact us form in Blogger is a long process but we'll take the steps one at a timeas it we know that blogger does not support plugins like WordPress.

What most of the Blogspot bloggers does is to seek the help of third-party sites (foxyform, jotform, 123contactform, etc.).

But today I'll be showing you how to add this without the use of third-party sites.

Note: It is possible to get third-party codes to be inserted in new pages like a walk in the park. Yet, the official contact form is far better than those.

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

Step 1: Visit blogger.com and log in to your account


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

Step 3: 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

Step 4: Then, choose More gadgets from the left side. Now, you will see Contact Form. Just add the same.

Adding is just the first part of the equation you are also going to have to learn how to hide the contact gadget.


Step 5: We need to play with the template section here. So, click on Templates from the left menu.

Step 6: Then, click on Edit HTML and you will be provided with the whole code of your blog in a large field.


Step 7: Search for ]]></b:skin> and place the following code just before it.

div#ContactForm1 {
display: none !important;
}

Then, click Save to retain the changes.

After the this step,plese note you won't still see Contact widget on your blog until you've completed the entire step.


You will get the customized official blogger contact form code here to be added to be shown on a separate page.

Step 8: Go to Pages and click on New page.

Step 9: Paste the following code into the HTML post editor after removing everything in it.

<div id="custom_ContactForm1" class="widget ContactForm"> <div class="contact-form-widget"> <p>Get in touch with us by filling out the form below.</p> <div class="form"> <form name="contact-form"> <p></p> Name <br> <input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name"> <p></p> Email <span style="font-weight: bolder;">*</span> <br> <input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email"> <p></p> Message <span style="font-weight: bolder;">*</span> <br> <textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea> <p></p> <input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit"> <p></p> <div style="text-align: center; max-width: 222px; width: 100%"> <p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p> <p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p> </div> </form> </div> </div> <div class="clear"></div> <span class="widget-item-control"> <span class="item-control blog-admin"> <a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" class="quickedit"> <img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt=""> </a> </span> </span> <div class="clear"></div> </div>



Step 10: Add a title (like Contact Us) and then change the settings given right as given below.

Step 11: Finally, click the Publish button. That’s all.

The messages send from this contact form will be delivered to the admin email. If the blog has more than one admin, all of them will get it.


I hope you find it helpful and if you encountered any problem or difficulty while doing this, comment.

Read More »

Blogger:Download Free SEO Optimized and Mobile Friendly Template for Blogger

It's your lucky day. Today I will be giving you a template  which I know will be of benefit to you as it will optimize your SEO (Search Engine Optimization), give you the chance to get AdSense approved because of its light weighted features, enable you to get approved on free basics and it is mobile friendly. I will be doing all this without collecting a dime. I saw this on a friend's site and decided to share it with you guys,hope you find it useful.All thanks to...........

My name is Prince Adewaley, I am the CEO of myedujobnews.com - A blog about school news. So, I am here to share you Bloggers, a brand new template of Peoplesgist.com which is being used by Victor chioke and Emasoga Priscilla of Emasblog.com
But first of all,lets see the templates features.

Features of The Template

•Fast in loading

•Social media sharing tools

•Equipped with voting functionality

•Compatible with Google algorithms

•Quality  codes

•It has Built In Reviews and Social Media Markup

•Very fast and easily accessible   contents.

•Well optimized SEO (Search engine optimization.

Peoplesgist Template Review

•The widget supports footer column where you can add your copyright links and others.

•It has Related contents that will enable your visitors stay longer on your web to reduce bounce rate.

•You can display advertisements with article and sidebar on the template.

•You can also earn more by showing advertisements banners at various locations on the template.

•Like i said, is user friendly or mobile friendly to all mobile phone users as well as PC. So, it will improve user experience with super quick fast page loading structure that can even enable you to be approved on free basics and better for users.

•It has Built-in review system which is powered by myedujobnewsIt is SEO friendly and your blog will get crawled faster by Google.

•It is responsive for mobile phones and on low connectivity devices.

•It comes with special tools such as; Import, Export settings and many others.

•It has good options panel and good navigation system; Control header, sidebars, Styling and various tabs that will give users easy ways to navigate through your blog.

•Wow! Google Rich Snippet support.

•It uses custom CSS box as it is customized.

•It has Infinite background pattern

Benefits of Peoplesgist Template

•Faster Loads times = Higher Conversion = More Earnings

•The template has a stable and secure code = Higher Quality Score

•More Page views = Visitors love your site

•Improved User Experience (remember that your main aim is to provide information for your users)

•Cross Browser and Device Compatibility = You do not miss out on any traffic

•Increase in Social Media Shares - Social Media Signal/Social Proof

Download Template

It is easy and simple. Just download the Peoplesgist template by clicking here and see DEMO


Steps to Install Peoplesgist Template on Blog

•After successful download, go to your blogger dashboard.

•Tap on THEME and at the right upper side,

•Click on BACKUP/RESTORE.

•Then upload the Peoplesgist template you downloaded earlier

Hope you find this template interesting. If you did, share your experience here and if you didn't or you have any question,share them using the comment box.

Read More »

Blogger:How to Fix Google Adsense Async Error Code

Are you facing async error message issue while saving Google Adsense code? This error is so common to those using Google Adsense because when placing an Adsense code to your blog HTML, your generated Adsense code will surely give an error, if you place it raw.

I am quite sure that most bloggers have faced this issue but I am yet to face as you guys know and can see that I haven't added any Adsense to my site. But when I do I don't think I'll face with the help of such a discovery. lets continue

The worst part of this is that some of them think the solution to this, is by parsing the Adsense code, NO!. It can't be resolved in that way, you only have to edit or modify the Adsense generated asynchronous code otherwise, you will receive an error message saying; "Error Parsing XML Code Attribute name "async" associated with an element type "script" must be followed by the ' = ' character.".


Now, the solution to fix the async error message while integrating Adsense code in your template is here. You just have to modify the JavaScripts Adsense code. As shown below.


Normal Adsense code;

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-5780971656268987",
    enable_page_level_ads: true
  });
</script>


Modified Adsense code;

 <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-5780971656268987",
    enable_page_level_ads: true
  });
</script>


Now this is how to modify it. Just add ="async" to the normal adsense code. Then, paste the modified Adsense code into your blogger template and Save.

I hope you've been enlightened and when you encounter such a difficulty you know just what to do and if you don't, Just visit EmmyTechBlog

Read More »