Hindi Help: June 2019

Contact us page for blogger

Author - Sachin Saini Monday, June 24, 2019 2 comments

ब्लॉगर की वेबसाइट में contact us page बनाने के लिए निम्न steps फॉलो करे

~~(toc)~~ #title=(Table of Content)

Step 1: अपने ब्लॉगर अकाउंट में लोग इन करे।
Step 2: ब्लॉगर डैशबोर्ड में pages पर क्लिक करे।

Step 3: new page पर क्लिक करे।

Step 4: पेज का नाम अपनी इच्छा के अनुसार रख दे।

Step 5: html पर क्लिक करे।

Step 6: अब ब्लॉगर के डिफाल्ट कोड को सेलेक्ट करके डिलीट कर दे।

Step 7: अब निचे दिए गए अपनी पसंद के किसी कोड को सेलेक्ट करके पेस्ट कर दे।

Step 8: Right side में optons पर क्लिक करके comments Don't allow कर दे।

Step 9: पेज को पब्लिश करें।

आपका संपर्क पेज तैयार है।

style 1

demo

<div dir="ltr" style="text-align: left;" trbidi="on">

<form name="contact-form">
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"> Name </span></div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  </div>
<div style="text-align: justify;">

</div>
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"> Email Address <span style="background: #333333; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span> </div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  </div>
<div style="text-align: justify;">

</div>
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;">Content <span style="background: #333333; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span></div>
<div style="text-align: justify;">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> </div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  </div>
<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>

<div style="text-align: justify;">
<style scoped="" type="text/css">
/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e6e6e6;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:97%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Roboto', sans-serif;border:1px solid #e6e6e6;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:#666;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Roboto', sans-serif;float:left;background:#fff;color:#aaa;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:0.5px;background-image: linear-gradient(110deg, #1dbf73 0%, #1dbf73 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e6e6e6;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#1dbf73;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:60px;}
.contact-form-error-message-with-border {background:#f36c60;color:#fff;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;padding:0px}
.post-body img{max-width:100%!important;padding:0px}
.contact-form-error-message-with-border
   {
    background:#f36c60;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  .contact-form-success-message-with-border{
    background:#fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  .contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  
</style>
</div>
<div style="text-align: justify;">
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4756312408149898454';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2420919130580284316','//www.bloggerspice.com/','2420919130580284316');
_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': '4756312408149898454', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


</div>
</div>(code-box)

style 2

demo

<style type='text/css' scoped=''>
  /*<![CDATA[*/
    img.contact-form-cross {padding:0px;
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  .contact-form-box {
    width: 100%;
    margin: 20px auto;
    padding: 0
  }
  
  #contactForm .floating-label-form-group {
    font-size: 14px;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus {
    position: relative
  }
  
  #contactForm .floating-label-form-group:after,
  #contactForm .floating-label-form-group:before {
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #e8554e;
    content: "";
    transition: width .4s ease-in-out;
    display: block
  }
  
  #contactForm .floating-label-form-group:before {
    right: 50%
  }
  
  #contactForm .floating-label-form-group:after {
    left: 50%
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {
    width: 50%
  }
  
  #contactForm .floating-label-form-group input,
  #contactForm .floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 400;
    background: 0 0;
    box-shadow: none!important;
    resize: none
  }
  
  #contactForm .floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: 12px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease
  }
  
  #contactForm .floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee
  }
  
  #contactForm .floating-label-form-group-with-value label {
    top: 0;
    opacity: 1
  }
  
  #contactForm .floating-label-form-group-with-focus label {
    color: #e8554e
  }
  
  #contactForm {
    border-top: 1px solid #ddd
  }
  
  #contactForm textarea.form-control {
    height: auto
  }
  
  #contactForm .form-control {
    display: block;
    width: 100%;
    color: #555
  }
  
  #contactForm input:active,
  #contactForm input:focus,
  #contactForm textarea:active,
  #contactForm textarea:focus {
    outline: 0
  }
  
  #contactForm .btn,
  #contactForm .contact-form-button-submit {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 0;
    padding: 0 25px;
    height: 51px;width:100%;
    line-height: 51px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 20px 0 0;
    background-image: none
  }
  
  #contactForm .contact-form-button {
    height: 51px;
    line-height: 51px
  }
  
  #contactForm .btn-default:focus,
  #contactForm .btn-default:hover,
  #contactForm .contact-form-button-submit:focus,
  #contactForm .contact-form-button-submit:hover {
    background-color: #e8554e;
    border: 1px solid #be403a;
    color: #fff
  }
  
  .contact-form-error-message-with-border,
  .contact-form-success-message-with-border {
    background: #fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  

  
  .contact_layout {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99999
  }
  
  .contact_message {
    width: 50%;
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid transparent;
    text-align: center;
    color: #333;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -25%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .contact_message:before {
    content: "\f164";
    font-family: FontAwesome;
    font-weight: 500;
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
  }
  
  @media screen and (max-width:768px) {
    .contact_message {
      width: 90%!important;
      margin-left: -45%!important;
    }
    .contact-form-box {
      width: 100%;
    }
  }
  /*]]>*/

</style> <div class="contact-form-box">
<div>
Please fill in the form below to contact </div>

<form name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>       <input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>       <input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>       <textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>     </div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="send" />     <div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script>
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});
</script>

मुबारक हो आपने अपना संपर्क पेज बना लिया।

यदि आपको पोस्ट अच्छी लगी तो कृपया इसे अपने दोस्तों के साथ शेयर करे तथा हमें subscribe करना ना भूले।

धन्यवाद।

Contact us page for blogger

Author - Sachin Saini Monday, June 24, 2019 2 comments

ब्लॉगर की वेबसाइट में contact us page बनाने के लिए निम्न steps फॉलो करे

~~(toc)~~ #title=(Table of Content)

Step 3: new page पर क्लिक करे।

Step 4: पेज का नाम अपनी इच्छा के अनुसार रख दे।

Step 5: html पर क्लिक करे।

Step 6: अब ब्लॉगर के डिफाल्ट कोड को सेलेक्ट करके डिलीट कर दे।

Step 7: अब निचे दिए गए अपनी पसंद के किसी कोड को सेलेक्ट करके पेस्ट कर दे।

Step 8: Right side में optons पर क्लिक करके comments Don't allow कर दे।

Step 9: पेज को पब्लिश करें।

आपका संपर्क पेज तैयार है।

style 1

demo

<div dir="ltr" style="text-align: left;" trbidi="on">

<form name="contact-form">
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"> Name </span></div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  </div>
<div style="text-align: justify;">

</div>
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"> Email Address <span style="background: #333333; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span> </div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  </div>
<div style="text-align: justify;">

</div>
<div style="text-align: justify;">
<span style="color: #999999; display: inline-block; font-family: &quot;roboto&quot; , sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;">Content <span style="background: #333333; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span></div>
<div style="text-align: justify;">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> </div>
<div style="text-align: justify;">
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  </div>
<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>

<div style="text-align: justify;">
<style scoped="" type="text/css">
/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:96.5%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e6e6e6;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:97%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Roboto', sans-serif;border:1px solid #e6e6e6;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:#666;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Roboto', sans-serif;float:left;background:#fff;color:#aaa;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:0.5px;background-image: linear-gradient(110deg, #1dbf73 0%, #1dbf73 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #e6e6e6;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#1dbf73;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:60px;}
.contact-form-error-message-with-border {background:#f36c60;color:#fff;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;padding:0px}
.post-body img{max-width:100%!important;padding:0px}
.contact-form-error-message-with-border
   {
    background:#f36c60;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  .contact-form-success-message-with-border{
    background:#fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  .contact-form-cross {
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  
</style>
</div>
<div style="text-align: justify;">
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '4756312408149898454';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2420919130580284316','//www.bloggerspice.com/','2420919130580284316');
_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': '4756312408149898454', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>


</div>
</div>(code-box)

style 2

demo

<style type='text/css' scoped=''>
  /*<![CDATA[*/
    img.contact-form-cross {padding:0px;
    height: 11px;
    margin: 0 5px;
    vertical-align: 0!important;
    width: 11px;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -goog-ms-box-shadow: none!important;
    box-shadow: none!important
  }
  .contact-form-box {
    width: 100%;
    margin: 20px auto;
    padding: 0
  }
  
  #contactForm .floating-label-form-group {
    font-size: 14px;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus {
    position: relative
  }
  
  #contactForm .floating-label-form-group:after,
  #contactForm .floating-label-form-group:before {
    position: absolute;
    bottom: -1px;
    width: 0;
    height: 2px;
    background-color: #e8554e;
    content: "";
    transition: width .4s ease-in-out;
    display: block
  }
  
  #contactForm .floating-label-form-group:before {
    right: 50%
  }
  
  #contactForm .floating-label-form-group:after {
    left: 50%
  }
  
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,
  #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {
    width: 50%
  }
  
  #contactForm .floating-label-form-group input,
  #contactForm .floating-label-form-group textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 400;
    background: 0 0;
    box-shadow: none!important;
    resize: none
  }
  
  #contactForm .floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: 12px;
    font-family: Roboto, Arial, sans-serif;
    font-weight: 300;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease
  }
  
  #contactForm .floating-label-form-group::not(:first-child) {
    padding-left: 14px;
    border-left: 1px solid #eee
  }
  
  #contactForm .floating-label-form-group-with-value label {
    top: 0;
    opacity: 1
  }
  
  #contactForm .floating-label-form-group-with-focus label {
    color: #e8554e
  }
  
  #contactForm {
    border-top: 1px solid #ddd
  }
  
  #contactForm textarea.form-control {
    height: auto
  }
  
  #contactForm .form-control {
    display: block;
    width: 100%;
    color: #555
  }
  
  #contactForm input:active,
  #contactForm input:focus,
  #contactForm textarea:active,
  #contactForm textarea:focus {
    outline: 0
  }
  
  #contactForm .btn,
  #contactForm .contact-form-button-submit {
    font-family: Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 0;
    padding: 0 25px;
    height: 51px;width:100%;
    line-height: 51px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    margin: 20px 0 0;
    background-image: none
  }
  
  #contactForm .contact-form-button {
    height: 51px;
    line-height: 51px
  }
  
  #contactForm .btn-default:focus,
  #contactForm .btn-default:hover,
  #contactForm .contact-form-button-submit:focus,
  #contactForm .contact-form-button-submit:hover {
    background-color: #e8554e;
    border: 1px solid #be403a;
    color: #fff
  }
  
  .contact-form-error-message-with-border,
  .contact-form-success-message-with-border {
    background: #fff;
    border: 1px solid #ddd;
    bottom: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    opacity: 1;
    position: static;
    text-align: center;
    margin: 20px 0 0
  }
  

  
  .contact_layout {
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99999
  }
  
  .contact_message {
    width: 50%;
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid transparent;
    text-align: center;
    color: #333;
    position: absolute;
    top: 10%;
    left: 50%;
    margin-left: -25%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .contact_message:before {
    content: "\f164";
    font-family: FontAwesome;
    font-weight: 500;
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
  }
  
  @media screen and (max-width:768px) {
    .contact_message {
      width: 90%!important;
      margin-left: -45%!important;
    }
    .contact-form-box {
      width: 100%;
    }
  }
  /*]]>*/

</style> <div class="contact-form-box">
<div>
Please fill in the form below to contact </div>

<form name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>       <input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>       <input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>       <textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>     </div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" value="send" />     <div class="clear">
</div>
<div style="max-width: 100%; text-align: left; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script>
$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});
</script>

मुबारक हो आपने अपना संपर्क पेज बना लिया।

यदि आपको पोस्ट अच्छी लगी तो कृपया इसे अपने दोस्तों के साथ शेयर करे तथा हमें subscribe करना ना भूले।

धन्यवाद।

stylish notification bar at the top of blogger site

Author - Sachin Saini Saturday, June 22, 2019 3 comments

stylish notification bar at the top of blogger site

make a stylish notification bar at top or bottom at your blogger site

steps:

open your blogger deshbord
click on theme
edit html
click anywhere in coding area and press 'ctrl+f'
find </body>
just above </body> copy and paste this code

save template
your notification bar is ready

demo

<!-- http://bloggershindihelp.blogspot.com Notification Bar start -->
<style type="text/css">
blink {
        animation: blinker 1s linear infinite;
       color: red;margin-right:10px;font-size:20px;
       }
      @keyframes blinker {  
        50% { opacity: 0; }
       }
.hbsclose{display:block; position:absolute; right:15px;top:4px; float:right;}
.hbsclose a{font-size:48px; font-weight:bold;color:red; line-height:30px;text-decoration: none;}
.hbsclose a:hover{color:white;}
#hbsticky{
background-color:black;
color:#ffffff;
text-align: center;
margin:0px;
height:auto;
font-size:13px;
position:fixed;
top:0px;
z-index:999;
width:100%;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display:block;
font-size:20px;
font-family: serif;text-decoration: none;}
.hbsbtn{ background-color: white;
  color: green;
  padding: 2px 8px;
  text-align: center;font-size:20px;margin:5px;border-radius:5px;
  text-decoration: none;
  display: inline-block;}

</style>
<div id="hbsticky">
<blink>HOT!
</blink>New Notification bar
<span class="hbsbtn"><a href="https://bloggershindihelp.blogspot.com/2019/06/httpbloggershindihelp.html" style="color: #ff5527; text-decoration: none;">click here</a></span>


<br />
<div class="hbsclose">
<a href="javascript:hide_cross();">&amp;times;</a></div>
</div>
<script language="JavaScript">
function hide_cross() {
crosstbox = document.getElementById('hbsticky');
crosstbox.style.visibility = 'hidden'
}
</script>
<!-- End of Notification Bar by- http://bloggershindihelp.blogspot.com --> 
(code-box)

change red colored word as you want
change your desigerd page link from green colored link
if you watnt notification bar at bottom than change top into bottom & bottom into top in this code

if you like this post than don't forgot subscribe us

stylish notification bar at the top of blogger site

Author - Sachin Saini Saturday, June 22, 2019 3 comments

stylish notification bar at the top of blogger site

make a stylish notification bar at top or bottom at your blogger site

steps:

open your blogger deshbord
click on theme
edit html
click anywhere in coding area and press 'ctrl+f'
find </body>
just above </body> copy and paste this code

save template
your notification bar is ready

demo

<!-- http://bloggershindihelp.blogspot.com Notification Bar start -->
<style type="text/css">
blink {
        animation: blinker 1s linear infinite;
       color: red;margin-right:10px;font-size:20px;
       }
      @keyframes blinker {  
        50% { opacity: 0; }
       }
.hbsclose{display:block; position:absolute; right:15px;top:4px; float:right;}
.hbsclose a{font-size:48px; font-weight:bold;color:red; line-height:30px;text-decoration: none;}
.hbsclose a:hover{color:white;}
#hbsticky{
background-color:black;
color:#ffffff;
text-align: center;
margin:0px;
height:auto;
font-size:13px;
position:fixed;
top:0px;
z-index:999;
width:100%;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display:block;
font-size:20px;
font-family: serif;text-decoration: none;}
.hbsbtn{ background-color: white;
  color: green;
  padding: 2px 8px;
  text-align: center;font-size:20px;margin:5px;border-radius:5px;
  text-decoration: none;
  display: inline-block;}

</style>
<div id="hbsticky">
<blink>HOT!
</blink>New Notification bar
<span class="hbsbtn"><a href="https://bloggershindihelp.blogspot.com/2019/06/httpbloggershindihelp.html" style="color: #ff5527; text-decoration: none;">click here</a></span>


<br />
<div class="hbsclose">
<a href="javascript:hide_cross();">&amp;times;</a></div>
</div>
<script language="JavaScript">
function hide_cross() {
crosstbox = document.getElementById('hbsticky');
crosstbox.style.visibility = 'hidden'
}
</script>
<!-- End of Notification Bar by- http://bloggershindihelp.blogspot.com --> 
(code-box)