8 Stylish Blogger Contact Form For Static Page

Blogger contact form is very important to give your readers the opportunity to communicate with you. Adding a contact form to your Blogger blog is not so tough. There is a Blogger Contact Form widget available in the list of Blogger’s default widgets. But a few days ago, It was pretty tough because there was no such kind of widget available out there. Today we will learn how to add a stylish Blogger contact form in a static page?

In this way, we will make a contact page for our blogger blog. Blogger’s default contact form widget is very fresh and lightweight. To make it more attractive, I will provide some beautifully designed Blogger Contact Form widget. You will be able to use those in a contact page of your blogger blog. So let’s start.

How To Add/Enable Blogger Contact Form In Blogger?

First of all, we will have to add the blogger contact form widget anywhere in our blogger blog. This will enable the functionality of the contact form. Otherwise, we will not receive emails from our contact forms. To do that, first of all:

1. Sign into your blogger account.
2. Go to the Blogger Dashboard/Overview.
3. Select Layout section from the left menu.
4. Click on the Add a Gadget (Sidebar/ Footer will be better) > More Gadgets.
5. Click on the Blue Plus Button of the Contact Form Gadget and then Save it.

You have successfully added the Blogger Contact Form Widget in your blog. Now it is time to hide this default blogger contact widget because we are going to make our stylish contact form in a static “Contact Us” page.

How To Hide Default Blogger Contact Form?

To hide this default Blogger Contact Form, Go to the “Template section and click on the Edit HTMLbutton”. Now find the style ending code : ]]></b:skin>. Paste this small CSS code just above this. Save your template and you are done. Reload your blog and you will see the default contact widget disappears.

Code :

div#ContactForm1 {
display: none !important;
}

Insert Font Awesome Icons In Blogger:

I have used some Font Awesome icons in these custom blogger contact form. So you will have to insert this style sheet into your blog. To do this:

• Go to the Template section > Click on Edit HTML > Find the ending head : </head>
• Copy the code and paste it right above the “</head>.”

Code :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

• Click on the “Save Template” button. You are done.

Note: If your template has already contained this code then you don’t have to implement this twice.

How To Add Blogger Contact Form In A Static Page?

Now we can create our static Contact Us page for blogger for applying a stylish and eye catching contact us form. For doing this, we must create a contact us page on our blog. If you already have a contact us page, you can use it, but if you don’t have, you can create it in this way.

• Go to the Pages section and click on the New page button as shown below:

• Fill up the Page Title with Contact Us/Contact. (The name of your contact page). Bring this page into HTML mode by clicking on the HTML tab.
• Now go to the Page Settings Options. Click on it. Select Readers Comments “Don’t allow, hid existing”. Click on done button. See the screenshot to become clearer:

• Now choose the Blogger Contact Form design you like most from the list below. Copy the code and Paste it in your contact page as shown above. Publish the page and see the magic.

1. Blogger Contact Form Design 1:

This is a beautiful and responsive blogger contact form. It has a simple and attractive design. Also, this form has some additional features. It has a clear button to make the text area empty with one click. It has some social buttons to notify users about social pages.

Code :

<style>
.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC51CJHUNY7kEmCt5BRt37FnY4zFJO_X4wKOXE3yg3DRwqL7bfgV9VVfrbWixBD9LLngLh-YVqBAaTouV1fB-RrwhUrqHRKcD2yglYoUzaCwRbNWdEar9h_CQ3JZvL5jpKz5GYvRJQxy1P/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}
.srbtn{display:inline-block;}
.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}
.cform-button:hover {background-color: #2980b9;color: #fff;}
.btn-reset:hover {background-color: red;color: #fff;}
.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}
.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}
.b-social-buttons{list-style-type:none;text-align:center;}
.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}
.b-social-buttons li a{color:#333;text-decoration:none;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}
</style>
<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br />
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></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>
<h3>Our Social Sites</h3>
<ul class="b-social-buttons">
<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>
</ul></div></form></div>

Configuration:

• This form uses some font awesome icons. So, you must install the font awesome library as I have shown above.
• If you get the “https” error message while installing this widget then simply “Dismiss” this and click on the update button again because if we use https ever then all of the resources of this form will redirect automatically.
• For using social buttons, simply replace the highlighted “#” with your twitter, facebook and youtube channel URLs.

2. Blogger Contact Form Design 2:

Code :

<style> .contact-form-widget {color: #000;margin-left:auto;max-width: 100%;margin-right:auto;padding: 0px;width: 600px;} .form_name, .form_email {float:left;width:48%;padding:5px;} .form_message {padding:5px;} .contact-form-name, .contact-form-email {font-size:16px;width: 100%;height:40px;max-width: 100%;margin-bottom: 10px;padding:10px;} .contact-form-email-message {height:100px;width:100%;font-size:16px;max-width: 100%;padding:10px;margin-bottom:10px;} .contact-form-button-submit {font-size:16px;height:30px;border-color: #C1C1C1;width: 20%;background: #E3E3E3;max-width: 20%;color: #585858;margin-bottom: 10px;} .contact-form-button-submit:hover{color: #000000;border: 1px solid #FAFAFA;background: #ffffff;} </style> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="form_name"> Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form_email"> E-mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="clear: both;"> </div> <div class="form_message"> Message *: <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br /> <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>

3. Blogger Contact Form Design 3:

Code :

<style> .contact-form-widget { -moz-border-radius: 5px; -webkit-border-radius: 5px;  background-color: #eaeaea; background: -moz-linear-gradient(top, #ffffff, #eaeaea);      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,    #ffffff), color-stop(1.0, #eaeaea));      color: #444;      border: 1px solid #cacaca;      margin: 0 0 25px;      max-width: 96%;      font-size: 1.4em;      padding: 8px 10px; } .contact-form-name, .contact-form-email { width: 50%; max-width: 50%; margin-bottom: 10px; } .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } </style> <div class='widget ContactForm' id='ContactForm2'>   <div class='contact-form-widget'>     <div class='form'>       <form name='contact-form'>         <p>Name</p>         <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>         <p>E-mail *</p>         <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>         <p>Message *</p>         <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>         <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>       </form>     </div>   </div> </div>

4. Blogger Contact Form Design 4:

Code :

<style> #ContactForm2{ background:#98AFC7; } .c-form{ border:1px solid #f5f5f5; padding:0 0 20px 0; overflow:hidden; } .c-form-left{ padding: 20px; } .c-form-right{ padding: 20px; } .contact-form-widget { margin: 0 auto; padding: 10px; width: 400px; max-width: 100%; }.contact-form-email-message {width: 100%;max-width: 100%;margin-bottom: 10px;} </style> <div class='c-form'> <div class='c-form-left'> <div class='form' style='float:left;'>  <div class='widget ContactForm' id='ContactForm2'>   <div class='contact-form-widget'>     <div class='form'>       <form name='contact-form'>         <p>Name</p>         <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>         <p>E-mail *</p>         <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>         <p>Message *</p>         <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br/> <br/>         <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>         <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>         <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>       </form>     </div>   </div> </div></div></div> <div class='c-form-right'> <div style='float: right;'> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1FnGS9U2oOwX3t26MQpcRuCV3lP7c8sAGvppKLZM1xNgy2udQMzpJdg1Dq919L5EVeiL1pNf9UOhMg6OeTRfaz-LII7oVWlUPNe0COmiY6fOsD_jvlz3y2SVBICKujRwsjOcpSJVhWpw/s1600/bo-contact-avatar.jpg" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX1FnGS9U2oOwX3t26MQpcRuCV3lP7c8sAGvppKLZM1xNgy2udQMzpJdg1Dq919L5EVeiL1pNf9UOhMg6OeTRfaz-LII7oVWlUPNe0COmiY6fOsD_jvlz3y2SVBICKujRwsjOcpSJVhWpw/s1600/bo-contact-avatar.jpg" /></a></div> <br />Address Line 1<br />Address Line 2<br />Address Line 3<br />State<br />Telephone: +49 30 47373795<br />E-mail: mail@blogornate.com     </div> </div> </div></div> <div style='clear: both;'></div>

Yellow highlighted section should be your Profile URL. Lime highlighted section should be your Image  URL. Orange highlighted section would contain your Address. Change these sections as the way you want.

5. Blogger Contact Form Design 5:

Code :

<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" />  <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>

6. Blogger Contact Form Design 6:

Code :

<div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p class='text'>Name</p> <input class='name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p class='text'>E-Mail *</p> <input class='email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p class='text'>Message *</p> <textarea class='message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='btn' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </form> </div> </div> <style> .contact-form-widget p.text{color:#fff;font-size:16px;font-weight:bold; font-family: sans-serif;line-height: 0.5em;text-transform:uppercase;} .contact-form-widget {margin-right:auto;margin-left:auto;height: 100%;max-width: 90%;padding:30px;border-radius: 5px;border: 1px solid rgba(0,0,0,.2);background: rgba(0, 0, 0, 0.5);background-clip: padding-box;overflow: hidden;-moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form textarea{background: #afafaf;width: 93%;height: 120px;border: 1px solid #BDBDBD;border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;background-clip: padding-box;-moz-background-clip: padding;-webkit-background-clip: padding-box;display:block;color:#000;font-size:18px;padding:12px 20px 0 15px;margin-bottom:20px;overflow:hidden;} .form input {width: 60%;height: 46px;border: 1px solid #BDBDBD;border-radius: 4px;font-size:18px;color:#333;padding:0 20px 0 20px;display:block;margin-bottom:20px;background-clip: padding-box;-webkit-border-radius: 4px;-moz-border-radius: 4px;-webkit-background-clip: padding-box;-moz-background-clip: padding;} .form input.name {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIkHbqMWPatHx69tR7L4-X0eYaj8c5L_4awP9I47gklUOQGAQFAe1WhwCZ4Q_7klQ2roAjPQ3uoEsdgcerCo-i0dRKSW0ykLEMc11YLgRNBbN8V5S2nzibjK3IUqfXMdT5nA_OdE_Bc2Wz/s1600/pro-pic.png);background-position: 11px 8px;background-size: 28px 28px;background-repeat: no-repeat;padding-left:45px;} .form input.email {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhON6re4kPyuyr-qbppXOOZ7WeiZTBMVyEtc8cgjFlp0OB5leL2sdpnLrPsXSYKiqM_k-ndCa4t2BM6bjFTRFW26OiI0V9o4umZWLCI0DxqXIwRlui6FJmdo0Ut3efheuYxJUoYg7CcaP/s1600/msg-box.png);background-repeat: no-repeat; padding-left:45px;background-position: 11px 8px;background-size: 28px 28px;} .form input.message {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyCOcUYgLoX2V9HPRatNAc4oaKVk9tthteSX1D92Gc5VK-1pVogpHccoNmtW_Ax5V684QVEBv3-KRRp2LxLUBLoti-zl37Ju0euQUXvgRdxx1cmEDZNC-YCvJEvwkNqvDHWszwJ2IV8tKE/s1600/pencil.png);background-repeat: no-repeat;background-size: 30px 30px;background-position: 11px 8px;padding-left:45px;} .form input:focus, .form textarea:focus { -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);box-shadow: 0 0 5px 1px rgba(255,255,255,.5);overflow: hidden;} .btn {background: #416b68;width: 138px !important;height: 45px;border-radius: 4px;border: 1px solid #253737;-webkit-border-radius: 4px;-moz-border-radius: 4px; float:right;background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));background: -moz-linear-gradient(top, #6da5a3, #416b68);background: -webkit-linear-gradient(top, #6da5a3, #416b68);background: -o-linear-gradient(top, #6da5a3, #416b68);background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);background: -ms-linear-gradient(top, #6da5a3, #416b68);padding: 10.5px 21px;box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;text-shadow: #333333 0 1px 0;color: #e1e1e1;} .btn:hover {background: #416b68;border: 1px solid #253737;color: #fff;text-shadow: #333333 0 1px 0;background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));background: -moz-linear-gradient(top, #77b2b0, #416b68);background: -webkit-linear-gradient(top, #77b2b0, #416b68);background: -o-linear-gradient(top, #77b2b0, #416b68);background: -ms-linear-gradient(top, #77b2b0, #416b68);} @media only screen and (max-width: 580px) { .contact-form-widget{width: 88%;left: 3%;margin-left: 0;margin-right: 3%;padding-left: 3%;padding-right: 3%;} </style>

7. Blogger Contact Form Design 7:

Code :

<style>.c-form-name, .c-form-email, .c-form-email-message{padding:10px;margin:8px 0 8px 0;border:1px solid #E5E5E5;width:50%;color:#999999;box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;}
.c-form-email-message{width:95%;height:150px;line-height:18px;}
.tb-contact-form-widget input:hover,textarea:hover,input:focus,textarea:focus{border-color:1px solid #C9C9C9;box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-moz-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;-webkit-box-shadow:rgba(0,0,0,0.2) 0px 0px 8px;}
.tb-contact-form-widget label{margin-left:10px;color:#999999;}
.cform-button {width:100px;height:40px;background-color:#474E70;color:#FFF;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:50%;margin-top:25px;}
</style><div class="tb-contact-form-widget"> 
<form name="contact-form"> 
<div class="name"> 
<input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Your Name"/>
<label for="name">Name</label>
</div> 
<div class="email">
<input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="mail@example.com"/>
<label for="email">E-mail *</label>
</div> 
<div style="clear: both;"></div>
<div class="message"> 
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Write something to us...">
</textarea>
<div class="srbtn">
<input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
</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>

All of these five blogger contact form designs are tested. You can use one of these contact forms in your blog. In my case, these forms are working fine. If your one is not functioning properly, then please let me know through the comment. If this is helpful for you, then please don’t forget to share this with your friend.

Working CONTACT FORM TO PAGE ON BLOGGER

ADD A CONTACT FORM TO PAGE ON BLOGGER

Bloggers contact gadget is a really easy way to add a contact form to your blog, however since it’s a gadget you can only place it in your sidebar or footer which is kind of an awkward place for a contact form. This tutorial will show you how to move it to it’s own page and how to customise it to suit your branding. When a visitor fills out the form, their message will be sent to the email associated with the blog. This is usually the admins email in settings.

HOW TO ADD A CONTACT FORM TO PAGE ON BLOGGER

1. Go to Layout, scroll down to the footer and add a new gadget > more gadgets > contact form > save.
2. Go to Template > Edit HTML > Jump to Widget > ContactForm1
3. Click the arrow on the left twice to expand the code so that you see the following

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

4. Delete the code that is shown above in pink so that all that is left is the following

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>

</b:includable>
  </b:widget>

5. Go to Pages. Create a new page or select your contact page. On the right click Options and under Compose Mode select Interpret typed HTML. Paste the code below into the editor where you want it to appear and save.

<div id='ContactForm1' class='widget ContactForm'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name:</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail: <span id="required">*</span></p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message: <span id="required">*</span></p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

6. Go to Template > Edit HTML and find ]]></b:skin>, if you have trouble finding it check out this post for help. Above ]]></b:skin> add the following CSS

/* CUSTOM CONTACT FORM BY XOMISSE */
.contact-form-widget {
width: 500px; /* CHANGE WIDTH OF CONTAINER */
max-width: 100%;
padding: 10px;
background: #FFFFFF; /* CHANGE BACKGROUND COLOUR OF CONTAINER */
color: #000; /* CHANGE TEXT COLOUR OF CONTAINER */
border: 0px solid #EEEEEE; /* CHANGE BORDER OF CONTAINER */
margin: 0 auto; /* REMOVE IF YOU DON'T WANT IT CENTERED */
}

.contact-form-name, .contact-form-email, .contact-form-email-message { width: 100%; max-width: 500px; /* CHANGE WIDTH OF FORM ENTRIES */ }

.contact-form-button-submit {
border: 1px solid #999999; /* CHANGE BORDER OF SEND BUTTON */
background: #EEEEEE;  /* CHANGE BACKGROUND COLOR OF SEND BUTTON */
color: #333333;  /* CHANGE TEXT COLOR OF SEND BUTTON */
width: 30%;  /* CHANGE WIDTH OF SEND BUTTON */
margin: 10px 0px;
}

.contact-form-button-submit:hover{
border: 1px solid #999999; /* CHANGE BORDER OF HOVER SEND BUTTON */
background: #666666;  /* CHANGE BACKGROUND COLOR OF HOVER SEND BUTTON */
color: #FFFFFF;  /* CHANGE TEXT COLOR OF HOVER SEND BUTTON */
}

.contact-form-widget #required {color: red; /* CHANGE ASTERISK COLOR */}
.contact-form-widget p { margin-bottom: 5px; /* CHANGE SPACE BETWEEN TEXT AND FIELD */}
.contact-form-cross {margin-left: 5px !important;}

.contact-form-error-message-with-border {
background: #eeeeee; /* CHANGE BACKGROUND OF OF ERROR MSG */
border: 1px solid #333333; /* CHANGE BORDER OF ERROR MSG */
bottom: 0;
box-shadow: none;
color: #666;  /* CHANGE TEXT COLOR OF ERROR MSG */
font-size: 12px; /* CHANGE FONT SIZE OF ERROR MSG */
padding: 5px; 
font-weight: bold; /* CHANGE WEIGHT OF ERROR MSG */
text-align: center; 
}

/* END CUSTOM CONTACT FORM BY XOMISSE */

7. Edit the CSS to match your blog and branding. The /* … */ are known as comments, they are there to help you identify what to change. There’s no need to remove them as they won’t appear on your blog.

8. Test your form to make sure everything is working correctly and that the email is being sent. The message will be sent to the email associated with the blog. This is usually the admins email in settings.

Customized Blogger Contact Form

Hide Widget From Sidebar

1. Go To Blogger > Template

2. Backup your template

3. Click Edit HTML

4. Search for </head>

5.just above it paste the following statement that will hide the widget on sidebar.

<style>
#ContactForm1{ display:none!important;}   </style>

The above code will hide the Normal Contact Form on a Sidebar only.

Note:- Don't remove the Widget from the Layout of Blogs. This widget will not show in the sidebar of homepage. Instead it will show only in blog Page.

Show Contact Form On Static Page

Since this is widget which can be kept on the right or left sidebar, also in Bottom at footer.  But many bloggers want to keep in separate page.

The contact form that you created has an ID #ContactForm1   , using this ID you can easily locate the HTML code of the normal form in your blog source file. If you want to add our edited contact form so follow These Steps:

1. Go To Blogger Dashboard >> Pages >>

2. Create a New Blank Page (Add text or media)

3. and in HTML Mode Paste the Following Code.

<style>
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-subject, .contact-form-country {
max-width: 300px;
width: 100%;
font-weight:bold;

}

.contact-form-name {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 10px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box; 

}
.contact-form-email {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;

} 

.contact-form-subject {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;

} 

.contact-form-country {
display: inline-block;
background: #FFF;
background-color: #FFF;
color: #A1A1A1;
font-family: Arial,sans-serif;
font-size: 13px;
font-weight:bold;
height: 30px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
padding: 15px 15px 15px 5px;
vertical-align: top;
border: 1px solid #ddd;
box-sizing: border-box;
}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 15px 15px 15px 5px;

}

 .contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
} 

.contact-form-email-message {
background: #FFF;

background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A1A1A1;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px;
vertical-align: top;
max-width: 500px!important;
height: 120px;
border-radius:4px;

} 

.contact-form-button {
cursor:pointer;
height: 30px;
line-height: 30px;
font-weight:bold;
border:none;

} 

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 10px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(1,1,1,.3);
-webkit-border-radius: .2em; 
-moz-border-radius: .2em;
border-radius: .2em;
-webkit-box-shadow: 0 1px 2px rgba(1,1,1,.3);
-moz-box-shadow: 0 1px 2px rgba(1,1,1,.3);
box-shadow: 0 1px 2px rgba(1,1,1,.3);

}

.contact-form-button:hover {
text-decoration: none!important;
border: none!important;

}

.contact-form-button:active {
position: relative;
top: 1px;

} 

</style> 

<div class="form">
<form name="contact-form">
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p> 
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Subject&quot;;}' onfocus='if (this.value == &quot;Subject&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<input class='contact-form-country' id='ContactForm1_contact-form-email' name='Country' value="Country"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Country&quot;;}' onfocus='if (this.value == &quot;Country&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' type='reset' value='Clear'/>  
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<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>

Write Your Page Title in Title Tab and click on publish button you are done!

Thanks for Reading our Post. Stay tuned by Subscribing our RSS feed 

How To Change and Use Fonts in Blogger

Undoubtedly, Blogger is an amazing platform to create and manage blogs even if you're a newbie as we can see the number of blogs raising rapidly. Okay, everybody know this, but the most common problem with mostly every blogger user is using perfect template for blog as it matters a lot. Template should be user friendly, its font should be eye-friendly and easy to read, it should also be responsive and some more features we want the template.

Everybody have got any blogger template to use in their blogs either they're beautiful or ugly but we're using them. But the main thing is content and there font matters a lot. If you're feeling that your blog doesn't have beautiful font than you should change the font immediately. Because in the blog, the main thing is content or articles and if you've used any bad font that makes the article difficult than definitely it will affect on your blog visitors and you might loose your visitors.

Changing font is blogger is not a big deal. We've great collection of web fonts available on Google Fonts for free from where you can pick up any font and start using it on your blog or web. Google Fonts is one of the most popular place for fonts and almost every website is using fonts from there because there fonts are great and are hosted on Google servers which are really fast. Implementing fonts in our blog is really easy, we just need to add a html link tag below <head> which calls the font to load in our blog and use font-family CSS property to call the font in any web element.

Don't worry, if you're a newbie and don't know how to change and use Google Fonts in your blog because below I'm going to show you step by step that how can we easily do that.

How To Change & Use Google Fonts in Blogger?

Okay, So here I'm going to divide the tutorial in two pieces just to let you understand it easily. In this part, we'll remove the existing font in your blog and in second part, we'll install and use new font. Let's get started.

1. Removing The Existing Font

• Go To Blogger >>  Template >> Backup Your Template
• Click Edit HTML and Search For The Following Code

fonts.googleapis.com

• Mostly, This will be available below <head> of the templates.
• After finding the above code, you'll see it in the html <link> tag like the image below. 

• Just remove that html link tagline.
• Save Template.

2. Installing New Font in Your Blog

• Go to Google Fonts and find the best font that you want to use.
• After choosing font, click on "Quick use" button, shown in the image below.

• Tick mark all the styles

• Scroll down and copy the html link tag code.

• Go To Blogger >> Template >> Edit HTML
• Search For <head>
• Paste The Code Below It and Save Template.
• If it gives error, try adding / before > at the end, after that ending will be like />.
• Okay, now font is installed and lets call it in our template.
• Come back to Google font page and scroll down more.
• There, you'll see the block like below.

• Copy that code and Go To Blogger >> Edit HTML
• Search for body { or body{
• There you'll see font-famiy:bla-bla-bla;
• Remove that font-family property till semicolon and paste the new one there.
• Save Template.
• If the font is not working properly now than add the following code above ]]></b:skin>

body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}

•  Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
• Save Template 
• You're Done!

Final Keystrokes

Seems like your blog is looking awesome after installing fresh font. Hope you successfully did this through this guide as we've tried to make it step-by-step. Even if you got stuck anywhere than feel free to ask below in comments. Please leave your views in comments, share this article with your friends and keep visiting us for more easy tutorials. Have a nice day!

How To Make Your Blogger Template Responsive

About some months ago, We had published the basic guide to create blogger template which helped many of our readers to become blogger developer and it also went viral, but still its rolling there. It was basic guide and we left many things than can make you pro blogger developer and today we're back with one of the most important thing that every blogger template should have. We're gonna discuss that how can we make our blogger templates responsive. Don't know about responsiveness? Don't worry, we're here to tell you all.

What Is Responsive Web Design?

Either it is blogger template or any other web template, we can generally call it "Responsive Web Design". Let me describe in simple and common words, Responsiveness is a feature of the web theme that allows the design to fit in any screen size. In the today's technology world, people use different devices like laptop, tablet, mobile to surf the internet which have different screen sizes and our web themes must be optimized for all screen sizes to fit automatically in any device so that users may not face any issue while surfing our blog or site.

These days, almost everyone have updated their web themes to fit in every screen but some old websites and lazy designers like me don't have updated yet. Yeah! Blogger Yard is not yet responsive because we're busy right here but soon we'll introduce the totally new version of Blogger Yard which will also be responsive.

There are several reasons for making our blog themes responsive, the first and simple, it improves the user interface, it can increase tablet and mobile users and we can also generate more money with it if we display responsive ads that can appear in every screen size. 

Things To Know Before

Before we start the tutorial, let me know either you will be able to turn responsiveness in your blogger template or not. 

1. CSS Skill : Do you have cascading style sheet skill? Yes? Great! Bringing responsiveness to blogger template is all CSS work and if you've skill in it than you might not face any issue in it.
2. Template Structure : Do you know the structure of your blogger template? If the template is designed by you than you must know how you've wrapped the header, content and other sections. While making responsive blogger template, we play with each HTML element and for that we must know how the template is structured. If the the template is not designed by you than you can take a look on its structure and study it than you may continue making it responsive.
3. Useful Chrome Extension : This is not the thing to be known before but we're recommending a useful chrome extension here that will help you a lot to work on responsiveness. Its Resize Window chrome extension that will help you to resize browser window with the size of different device screens. I recommend to work on every screen size that is listed in this extension.

How To Make Responsive Blogger Template?

So, Its time to learn responsiveness and we'll take a lot of time of you because we're gonna make this guide as long as we can. Let's start it.

As you know that responsive web design can be made by using CSS only and there is an special tag in CSS that we can use for responsiveness. You can use Media Queries (@media) and its just simple like drinking water if you know CSS very well. These media queries acts like If Else Statements in JavaScript and also Conditional Tags in Blogger. We make many media query tags for each and every device screen size and put CSS content in it. The CSS content that will be added in these media query tags will only work in the specified screen size. 

Its not end here friend! There is one more thing that we forget to mention. Before working with media queries, we should add a meta tag below head that helps the browser to detect the screen size and work properly with media queries.

Adding Meta Tag For Responsiveness

1. Go To Blogger >> Template >> Backup Your Template
2. Click Edit HTML >> Search For <head>
3. Paste The Following Code Below It.
4. Save!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

There is nothing much difficult with this viewport meta tag. You have to just add it below your <head> and it will start working.

Working With Media Queries 

Okay! So, I've prepared the simple media queries code with different screen sizes on which you must work.

@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}

@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}

@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}

@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}

@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}

@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}

Look, how the code is written. Its simple. Starting with (@media screen and), adding screen size (max-width:1280px) and brackets where the CSS will be stored. It simply tells the browser that if the screen size is less than max-width than apply the code in brackets. Yes! If the screen size will be exact max-width or less than it will work until it reaches to another media query. You can also change the max-width size according to your own.

Some Advanced Tips 

Tip #1 : While you're writing the code for media queries, try to specify web elements in the way we're showing you. You should use "em" instead of "px" for font-size, padding, margin etc, use percentage for defining with of columns and use box-sizing, max-width and min-width properties.

Tip #2 : Try to cover the whole design in wrapper by making div and give it different widths in every screen size or you can also do this body tag. By this, things might mess up in initial in different screen sizes but the ending corners will re-size and become responsive in other screens.

Tip #3 : Put some margin in the left and right sides of the whole body. For example if we put margin of 100px in the media screen of 768px than the design will be responsive till the 668px of screen size.

Tip #4 : While making the navigation menu, try to put label 3 lined clickable button with it for small screen sizes like mobile that shows the navigation menu after clicking on the button. If you can't do this than try to add class tags in every list item but not drop downs and hide the list items in different screen sizes where there are not suiting by calling with class.

Tip #5 : Keep doing practice with it and if you stuck than try to get help from seniors. You can also get some responsive web designs and study them to learn making blogger template responsive.

Final Keystrokes

That's how we can make responsive blogger template and we hope this complete guide won't let you face any issues but you get them, comment below and lets discuss. We're active now! 

How To Add Google Custom Search Engine in Blogger

Few days ago, We had discussed that how can we add next and previous pagination buttons in blogger that actually helps to improve the user interface and user navigation of blog and today again we're going to share a widget that will also improve the navigation a bit more. Today, we're going to show you that how can we add Google custom search engine in Blogger blog. Most of the blogger templates these days comes with built-in default blogger search boxes that are not much powerful to give exact result because their factor of finding the result is not good as it should be but adding Google custom search engine will be better because it gives accurate result and also has some more useful functions.

Google Custom Search Engine? Tell me a bit more.

Just like YouTube, Blogger and Gmail Google products, custom search engine is also a product developed by Google to let sites display the search box for inner site search only. If you run a website that has tons of pages with huge data and its really difficult to set the perfect navigation than you could use search engine that will help your visitors to navigate easily just by searching the thing that they in search box and search box will automatically give them the path of the content that they want. It's totally easy. 

Do you know how Google custom search engine works? You'll be amazed by knowing it. You know how much powerful Google is and it's whole search engine. Google uses various natural factors to bring up the exact and correct search results and in custom search engine, Google uses same formula. That's why we're recommending to implement this in your blog and enjoy its facilities. 

Google custom search engine also allows you to monetize the search result pages but for that you'll need to have normally approved Google AdSense account. You can easily sign in to custom search engine with your AdSense account and enable monetization in monetize page. It might take time to activate but later it will start working. Google displays ads in the search result pages and ads are also relevant to the every keyword that user may search and you're easily paid for clicks on ads and also impressions.

Other than this, Google custom search engine has functions to customize the theme of search box, enable voice search, image search and many more options. Even you can change the layout style of search box and search results or use your own search box and display custom search engine's result somewhere else. There is a lot you can do with this. It's simply amazing.

How To Add Google Custom Search Engine in Blogger?

• Go To Custom Search Engine 
• Click on "Create a search engine"
• Insert your blog URL in "Sites to search"
• Choose Language, Pick up engine name and click "Create"

• You'll see the message like above which means you've successfully created custom search engine.
• Now click on "Get code"
• Copy the code 
• Go To Blogger >> Layout >> Add a Gadget
• Choose "HTML/JavaScript"
• Paste the copied code in "Content Box"
• Save It
• Congratulations! You've successfully added custom search engine in your blog.

There is a lot you can do now with your custom search engine like customizing the theme that may suite with your blog design, enabling monetization, disable or enable voice search and image search, changing layout and much more. Just navigation through left vertical menu bar and you can easily do all from there.

Final Words

So, That was Google custom search engine and we hope you've enjoyed today's article and if you like than don't forget adding this search box in your blog because its full of profit. Even I also removed the previous default Blogger search box and implemented this custom search now. Also share this article with your friends and Have a nice day!