Blogger Blog Me Beautiful Contact US Page Kaise Banaye Hindi Me

Friends Blogger दिनों दिन SEO Friendly होता जा रहा है, और इसकी Awesome Latest Updates के द्वारा अब आप Contact Form को आसानी से बस Widget Add करके बना सकतें है. अब आप Contact Page और Form सिर्फ CSS और HTML Code को Blogger Template या Page में Add करके Create कर सकतें है. So Friends आइये जानते है की Blogger Blog Me Contact US Page Kaise Banaye or Blogger Blog Me Contact Us Page Kaise Banaye.

Friends सिर्फ Website बना लेने से आपका काम पूरा नही होता. बल्कि हमें अपने Visitors को एक आसान Navigation Menu और Settings भी प्रदान करना होता है. और इस हिसाब से किसी भी Blog या Website की UI और UX बहुत अच्छा होना चाहिए.

So Friends आज हम इस पोस्ट में आपको दो चीजें बताने वालें है.

  • Blogspot में Widget के द्वारा Contact Form Add करना. (Default Blogger Template)
  • Blogger में Professional Customized Awesome & Beautiful Contact Us Page बनाना (Custom Template) के लिए.

यदि आप Default Blogger Template का उपयोग कर रहे है तब आपको कुछ भी करने की आवश्यकता नही होती. क्योंकि Blogger हमें Contact US Widget प्रदान करता है. जिसे आप आसानी से Add कर सकतें है.

Friends इस पोस्ट में हम आपको Step by Step बता रहें है जिसके द्वारा आप अपने Blogger Template में Professional Looking Customized Contact Form Add कर सकतें है.


Blogger Blog Me Professional Customized Beautiful Contact US Page Form Kaise Add Kare.


सबसे पहले हम Default Blogger Template जो की Blogger के द्वारा ही दिया जाता है में Contact Form Add करने के बारें में बता रहें है. So Friends बस नीचे दिए गए Steps को Follow करें.

Blogger में Contact Form Widget Add करना – Blogger Me Contact Form Widget Add Karna

Step 1. Blogger Dashboard पर जाएँ.

Step 2. इसके बाद Blogger Layout पर जाएँ.solvemyhow.com1

Step 3. अब “Add a Gadget” पर Click करें.

अब आप देख सकतें है की आप “Add a Gadget” पर Click करके दाएँ तरफ Footer में इस Form को लगा सकतें है. आप चाहें तो इसे Sidebar में भी लगा सकतें है. तो बस उस जगह को Select करें जहाँ आप Contact Form Add करना चाहतें है.solvemyhow.com2

Step 4. अब Contact Form के सामने दिए गए “+” पर Click करें.

इसके लिए “Add a Gadget” पर क्लिक करने के बाद नयी Popup Window पर Click करें. इसके बाद बायीं तरफ दिए गए “More Gadget” पर Click करने के बाद First Option “Contact Form Widget” पर Click करें इसके बाद “+” पर Click करके इसे Add करें.

नीचे इसका Screenshot दिया गया है.

बस अब Save करें और अपने Blog को Open करें. यह Contact Form दिखाई देने लगेगा.

Blogger में Custom Professional Contact US Page बनाना – Blogger Me Cutom Professional Contact Page Banana.

अब यदि आप Custom Blogger Template का उपयोग कर रहें है. तब आपको HTML & CSS Code को एक खाली Page पर Add करना होगा.

इसके लिए नीचे दिए गए Steps को Follow करें.

Step 1. सबसे पहले Default Blogger Contact Form को छिपायें.

यदि आपने Default Contact US widget Add किया हुआ है तब आपको इसे छिपाना होगा. इसके लिए सबसे पहले Blogger Dashboard पर जाएँ. इसके बाद Template >> Edit HTML पर जाएँ.

अब CTRL+F दबाकर ]]></b:skin> ढूंढे और अब नीचे दिए गए Code को ]]></b:skin> के ठीक ऊपर Paste करें.

div#ContactForm1 {
display: none !important;
}

ठीक इस तरह.Blogger Blog Me Beautiful Contact US Page Kaise banaye Hindi Me

Step 2. अब Blogger >> Pages पर जाएँ.Blogger Blog Me Beautiful Contact US Page Kaise banaye Hindi Me

अब आपको यहाँ नया Page बनाना है इसके लिए “New Page” पर Click करें. और Page के Title में Contact US या Contact Me नाम दें.

Step 3. अब Options में Settings में बदलाब करें.

इसके लिए Page में दिए गए Options को चुने और इसमें ठीक नीचे दी गयी Settings की तरह Same बदलाब करें.Blogger Blog Me Beautiful Contact US Page Kaise banaye Hindi Me

यह Contact US Form पर Users को Comment करने से Block कर देगा.


Blogger Blog Me Beautiful Contact US Page Kaise banaye Hindi Me


Step 4. अब HTML Mode पर Switch करें.

मतलब Compose mode से HTML पर Switch करें और इसके बाद CTRL+A दबाकर सब कुछ Delete कर दें.

Step 5. अब नीचे दिए गएँ “Responsive Contact US Form Code” को New Page में HTML editor में Paste करें.

<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
Do you have any query or do you want to give any suggestion/feedback about TechAndTweet ? Then, please drop me a mail, I’ll get back to you as soon as possible 🙂
<br />
<style>
.SMH_blogger_cntct_form_wrap {
margin: 0 auto;
max-width: 840px;
padding: 0 10px;
position: relative;
background-color: #FDFDFD;
}
.SMH_blogger_cntct_form_wrap:after, .SMH_blogger_cntct_form_wrap:before {
content: ”;
display: table;
clear: both;
}
/*—-Change Contact Form Background Color Here—-*/
div#SMH_blogger_cntct_form {
padding: 20px 20px 10px 20px;
background: #FA540B;
border-radius: 2px;
margin: 20px auto 20px;
color: #FFF;
font-size: 16px;
max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
padding: 5px;
box-shadow: none!Important;
min-width: 186px;
max-width: 260px;
width: 100%;
border: 0 !important;
line-height: 1em;
min-height: 31px;
background: #FCFCFC;
margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
background: #FA540B;
font-size: 20px;
letter-spacing: 2px;
cursor: pointer;
outline: none!important;
color: #FFFFFF;
border: 2px solid rgba(255,255,255,1);
border-radius: 50px;
min-width: 186px;
max-width: 260px;
width: 100%;
text-transform: uppercase;
height: 46px;
margin-top: 10px!important;
transition: all 300ms ease-;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
border: 2px solid;
color: #FFFFFF;
background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
border-color: #FFFFFF;
box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
background: #f9edbe;
border: 1px solid #f0c36d;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #666;
font-size: 12px;
font-weight: bold;
padding-bottom: 10px;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
}
</style>
<br />
<br />
<div class=”SMH_blogger_cntct_form_wrap”>
<div id=”SMH_blogger_cntct_form”>
<form name=”contact-form”>
Your Name<br />
<input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”name” placeholder=”Enter your name here…” size=”30″ type=”text” value=”” /><br />
<br />
Your Email*<br />
<input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”email” placeholder=”Enter your email here…” size=”30″ type=”text” value=”” /><br />
<br />
Your Message*<br />
<textarea class=”contact-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Write your message here…” rows=”5″></textarea><br />
<input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” type=”button” value=”Send” /><br />
<div style=”max-width: 260px; 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>
<br />
</div>
</div>
</div>

अब लाल रंग में दिए गए Highlighted Part को Change करें. आप Send बटन की Styles को कुछ बदलाब करके Change कर सकतें है.

Step 6. अब इस Page को Publish करें.

इसके लिए Publish बटन पर क्लिक करें. और अब Contact US Page को Test करें और खुद को Message Send करकें देखें. की Message Send हो रहा है या नहीं.

That’s It. So, Friends इस पोस्ट में हमने Blogger Blog में Professional Customized Beautiful Looking Contact US Page बनाने के बारें में पढ़ा So Friends यह पोस्ट आपको कैसी लगी हमें Comment के माध्यम से जरूर बताएं और हमें Facebook पर Join करें.

Leave a Reply

CommentLuv badge