क्या आप भी एक Blogger हो और क्या आप भी Google Blogger में आपने अपना कोई भी Site या Blog बनाया है | और आप भी अपने Blog में Custom Contact Form Add या Page Create करना चाहतें | तो ये Post आपको जरुर पढ़ना चाहिए | क्यों की इस पोस्ट में आप जानेगे | की आप Blogger के लिए Contact Form या Page कैसे बनाते हैं|
Contact Page किसी भी Website और Blog का एक मुख्य भाग होता हैं | जिसमे उस Website का महत्वपूर्ण जानकारी होती हैं | जैसे Email Mobile Number या Phone Number जिससे किसी Bussiness को Contact किया जा सकता हैं | और अपनी सुझाव भी दे सकते हैं | यदि आपका कोई Blog या Website हैं | और यदि आपके Website को देखने वाले आपसे कुछ बातें या कुछ जानकारी लेना या देना चाहते हैं | तो यही पर आपका Contact Page काम आता हैं | जिससे Website Owner और Viwer को आपस में जोड़ने का काम करता हैं |
Blogger में Contact Page कैसे बनाएं |
Blogger Contact Page बनाने के लिए आप सबसे पहले अपने Blogger में Login कर ले फिर Pages Option पर Click कर ले फिर New Page पर Click कर एक New पेज Create कर ले |
जैस ही आप Page Create करेगे | तो आपको कुछ इस प्रकार के Option मिलेगा | जैसा की आप Post लिखने के Time देखते हैं | इस पर आपको पेज का Titile Contact-Us लिख देना हैं | फिर आपको left में दिख रहे PenTool पर Click कर देना हैं | फिर आपको HTML View पर Click कर देना हैं | इसे अच्छे से समझने के लिये आप निचे चित्रों को देख कर समझ सकते हैं |
 |
| Blogger के लिए Contact Page कैसे बनाए ? || Create Contact Form (Contact Us Page) For Blogger ? |
जैसे ही आप इस Option पर क्लिक करोगे तो आपके सामने दो Option लिखा हुआ मिलेगा | HTML View And Compose View तो आप जब भी Blogger पर First Time आते हैं | तो आपको Default रूप में यही Compose View देखने को मिलता हैं | जहा पर आप अपना Pages और Post लिख सकते हैं | यदि आपको Web का ज्ञान हैं \ तो आप अपना Post HTML से भी लिख सकते हैं | इसके लिये आपको Left में दिख रहे PenTool पर Click कर देना हैं | और फिर HTML View पर Click कर देना हैं | फिर आपको हमने इस पोस्ट में जो Contact Us Page का HTML और Css से बने Page का Demo और Source Code दिया हैं | जिसमे से जो आपको ठीक लगे उसका Source Code को Copy कर HTML View पर जा कर नीचे Paste कर के Publish पर Click कर दे | फिर आपका Contact Us Page बन जायेगा अब आप इसे View कर इसका Link कही भी अपने Blog पर बना सकते हैं | या Use कर सकते हैं | जैसे Menu या Footer पर | नोट:: यहां पर आपको Preview वाला Link को नहीं Use करना हैं | अपने Blogger के Pages में जा कर View करना हैं |
Blogger Contact Form Design Source Code 1
<span align="center" style="color:red; font-family:arial;">
<h3>Contact-Us</h3>
</span>
<hr />
<div dir="ltr" style="text-align: left;" trbidi="on">
<form name="contact-form">
<span style="font-family: inherit; font-size: x-large;"><i class="fa fa-pencil-square-o"></i> Name </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Enter Your Full Name Here..." /> <br />
<br />
<i class="fa fa-envelope-o"></i><span style="font-family: inherit; font-size: x-large;"> Email Address</span> <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Enter Your Email Here..." /> <br />
<span style="font-size: x-large;"><br /></span><span style="font-size: x-large;">Messages</span> <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" placeholder="Enter Your Messages Here..." ></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>
</div>
<hr />
<p align="center">
<b><span style="font-size: x-small;">© 2019-2021 All Rights Reserved By<a href="https://www.seeon-tech.com/"> www.seeon-tech.com </a></span></b> <p></p>
</p>
<hr />
<br />
Blogger Contact Form Design Demo OutPut 1
Contact-Us
© 2019-2021 All Rights Reserved By www.seeon-tech.com
- Bootable USB कैसें बनाएं ?
- Top 10 Windows Run कमांड |
- CMD से Bootable USB कैसें बनाएं ?
- Windows 10 ISO कैसें डाऊनलोड करे ?
Blogger Contact Form ( Page ) Design Source Code 2
<!--Copy This Code -->
<span align="center" style="color:red; font-family:arial;">
<h3>Contact-Us</h3>
</span>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: lightgray; padding: 20px;">
<form name="contact-form">
<span style="font-family: "all"; font-size: 33; font-weight: bold;">Name</span> <sub style="color: red;">impotent</sub>
<br />
<input class="input-name" name="name" placeholder="Enter Your Name Please" size="30" type="text" value="" />
<br />
<span style="font-family: "all"; font-size: 33; font-weight: bold;">E-Mail</span> <sub style="color: red;">impotent</sub>
<br />
<input class="input-email" name="email" placeholder="Enter Your E-Mail Please" size="30" type="email" value="" />
<br />
<br />
<span style="font-family: "all"; font-size: 33; font-weight: bold;">Messages</span> <sub style="color: red;">impotent</sub>
<br />
<textarea class="message" cols="25" name="email-message" placeholder="Enter Your Messages Please-----" rows="5"></textarea>
<br />
<input class="button" type="button" value="Send" />
</form>
<style type="text/css">
.input-name,.input-email
/* name and email input css code with class */
{
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;
}
.message
/* textarea tag use all css code messages*/
{
width:80%;
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;
}
.button
/* summit button use all css code in this page*/
{
font-family:all;
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;
}
</style>
<br />
<br /></div>
<hr />
<p align="center">
<b><span style="font-size: x-small;">© 2019-2021 All Rights Reserved By<a href="https://www.seeon-tech.com/"> www.seeon-tech.com </a></span></b> <p></p>
</p>
<hr />
<div>
</div>
</div>
Blogger Contact Form Design Demo OutPut 2
Contact-Us
तो हम उम्मीद करतें हैं | की आपको इस पोस्ट से Hepl जरुर मिला होगा यदि आपको ये जानकारी अच्छी लगी हो तो आप इस पोस्ट Blogger के लिए Contact Page कैसे बनाए ? || Create Contact Form (Contact Us Page) For Blogger ? || वाला पोस्ट को अपने Blogger दोस्तों को जरुर Send करे | और यदि आप इसी तरह की जानकारी पाने के लिये यदि आप हमसे जुड़ना चाहते हैं |तो आप हमारे Telegram Channel को जरुर ज्वाइन करे | 
Post a Comment