Breaking News

How to add Contact Us Page in Blogger Hindi

How To Add Contact Us Page In Blogger

add contact us page in blogger
How to add contact us page in blogger


हेल्लो दोस्तों अगर आपके पास कोई वेबसाइट अथवा कोई ब्लॉग है तो आपको Contact Us Page की आवश्यकता जरूर पड़ती होगी जिसके जरिए आपके Viewers आपसे कम्युनिकेट कर सके. ब्लॉगर के पास अपना खुद Contact Us Widget है जो ब्लॉगर के डिफॉल्ट Widget में उपस्थित है लेकिन यह देखने में उतना अच्छा नहीं लगता और यह Blog के होम पेज पर आ जाता है. तो चलिए आज इसके बारे में जानते हैं की आप अपने ब्लॉगर में Contact Us Page को कैसे लगायेंगे.
How to add Contact Us Page in Blogger Hindi
Contact Us page for blogger

The process to add Contact Us Page In Blogger


Step 1. सबसे पहले आपको अपने ब्लॉगर में contact Us Widget को add करना होगा जिससे की Contact Us Form Enable हो सके. तो इसके लिए क्या करेंगे ?

  • सबसे पहले आप अपने ब्लॉगर के Daskboard/Overview में जायेंगे.
  •  Menu option में से Layout को select करेंगे.
  • Sidebar से Add a Gadget पर क्लिक करेंगे.
  • एक पॉप उप मेनू खुल के आएगा वह से contact Form को सेलेक्ट करेंगे.
  • इसके बाद सेव कर देंगे.

add contact form in blogger
Add Contact Form in blogger


अब आपने अपने ब्लॉगर में सफलता पूर्वक Contact Form को Add कर लिया है अब आपको इसे hide करना है जिससे आपके ब्लॉग का होम पेज अच्छा दिखे और आपका Contact Us Page Stylish दिखे.

To Hide Default Contact Us Form Follow these step

Step 2.
अब आप अपने daskboard में आएये यहाँ पर आपको templete का आप्शन दिखाए देगा उस पर क्लिक करिए. अब Edit HTML पर क्लिक करिए 
अब HTML area में कहीं भी क्लिक करके Keyboard से CTRL+F key Press कीजिये.
HTML area में ऊपर search बॉक्स दिखाए देगा उसमे यह ]]></b:skin> कोड डालकर ENTER key Press कीजिये.

अब इस कोड ]]></b:skin> के ठीक उपर निचे दिया गयाCSS कोड paste करिए 
अब Save theme पर क्लिक करकर Theme को सेव कर दीजिये.

Code :-

div#ContactForm1 {
               display: none !important;
               }

how to hide contact us fom in blogger
Hide Contact Us form in blogger


अब अपने ब्लॉगर के होम पेज को Reload करिए आप देखेंगे की Contact Us Form ब्लॉगर के होम पेज से हट गया है.

Step 3.

अब हम एक Font का उपयोग करेंगे अपना contact उस पेज को अच्छा look देने के लिए.
इसके लिए HTML Box में </head> लिखकर search करेगे </head> के ठीक उपर निचे दिए गये कोड जो paste जर देंगे. इसके बाद Save Template पर क्लिक कर के Template को सेव कर लेंगे.

Code:-

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

how to add contact us form font in blogger
Add font for contact us Page


अब हम एक अच्छा सा Contact Us Page बनायेगे. इसके लिए Pages पर क्लिक करेंगे New page को सेलेक्ट करेंगे.
Title में Contact Us नाम देकर HTML वाले section में निचे दिया हुआ code Paste कर देंगे.

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>

how to add contact us html for blogger
Add Html code for contact us page in blogger


अब option में जाये Readers Comments को SelectDon’t allow, hid existingकरके करके Save कर दे.
अब अपने पोस्ट को Publish कर देंगे. जब आप अपने पोस्ट को View करेने तो देखेंगे की एक बहुत ही अच्छा contact उस पेज दिखाए देगा.


यह था पूरा प्रोसेस की कैसे अपने ब्लॉगर में Contact Us Page को add करेंगे. आशा करता हु कि यह पोस्ट आपको बहुत पसंद आया होगा तो आप इसे अपने दोस्तों के साथ शेयर करिए और इस पोस्ट से रिलेटेड आपको कोई भी परेशानी आती है तो आप निचे कमेंट करिए मै उसका Reply जरुर दूंगा.



Post a Comment

0 Comments