Website Ke Liye Contact Us Page Banakar Blog Par Add Kaise Kare The Ultimate Guide

ब्लॉग में contact us का page कैसे बनाये और ब्लॉग में add करे ? बहुत से blogger ऐसे होते है , जो blog बनाकर छोड़ देते है . और उसमे important page नही लगाते है . क्योंकि ये पेज बनाना ही नही आता . नमस्कार मेरा नाम Bunty है . आज मै उन लोगो के लिए एक Page लेकर आया जो है contact us page .

मैंने कई बार देखा है की हम किसी blog या website पर contact करना चाहते है तो किसी किसी blog या website में तो इनके page बने ही नही होते है .

friends आज मै आपका ज्यादा time बर्बाद नही करते हुए सीधे अपनी post पर लेकर आता हु . आज की post का title तो आपने पढ़ा ही होगा की blog में contact us page कैसे बनाये और अपने blog में set करे .

Blog में social follow button कैसे add करे ?

Blog में search box कैसे add करे ?

Blog की settings कैसे करे ?
Blog में simple contact form लगाये  :--

• सबसे पहले blogger.com में log in करे . अपना blog select करके layout पर click करे .


• जहा Add a Widget पर click करे . और more gadgets पर click करके Contact Form पर click करे .


• save पर click करे और save arrangement पर click करे .


• आपका simple contact form  add हो गया .

 

 

 Contact Form के look को अच्छा बनाये और page में set करे:--

• सबसे पहले इस नीचे वाले code को  copy कर ले :--

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

• सबसे पहले blog में log in करे . उसके बाद Theme या Template पर click करे .


•  अब Edit HTML पर click करे . अब jump to widget पर click करे .और contact form1 पर click करे .


• अब code के left arrow पर click करके full code open करे .

 

• अब <b:includable id='main'> और </b:includable> के बीच के code को delete कर दे .


• अब जो code copy किया हुआ है उसे  इन <b:includable id='main'> और </b:includable> के बीच paste कर दे .

 

• अब निचे दिए गये code को copy कर ले :-

<pre>/* Contact technologhindi*/
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 400px;
max-width: 50%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 50%;
max-width: 50%;
margin-bottom: 10px;
height:30px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 80%;
height:200px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #f9f9f9;
background: #1aeb00;
color: #222;
width: 100%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #f56c7e;
color: #444;
border: 2px solid #222;
}</pre>

•  अब Ctrl + F दबाकर ]]></b:skin> code search करे . उसके बाद copy किये हुए code को ]]></b:skin> के उपर paste कर दे .

 

• save theme या save template पर click करे .

अब एक contact us का अलग page बना लेते है :--

• सबसे पहले निचे दिया हुआ code copy कर ले .

<pre><script>
var blogId = '1111111111111111111';//replace it the text with your blogID
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name="contact-form">
<div>
Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<div>
Your Email: <em>(required)</em></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<div>
Your Message: <em>(required)</em></div>
<textarea class="contact-form-email-message" 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" onclick="sendEmailMsg()" type="button" value="Send" />
<div style="max-width: 450px; 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></pre>

• आप पहले से ही blogger.com में log in हो . अब  page पर click करके new page पर click करे .


• अब title में contact us लिखे और contant में HTML पर click करे और copy किया हु code paste कर दे .


• इस code  को paste करने के बाद 1111111111111111111 ID की जगह अपने Blog की ID लिखे .


• अब publish के button पर click करे .

आपने contact us का page बनाना सिख लिया है , अगर किसी भी प्रकार की problem आये तो हमें comment के माध्यम से जरुर बताये .

*************