How to create contact us page for blogger website

সবাই কেমন আছেন। আশা করি ভালো আছেন।

টিউটোরিয়ালের বিষয়ঃ কিভাবে আপনার ব্লগের জন্য একটি যোগাযোগ ফরম তৈরি করবেন।

• যোগাযোগ ফরম আপনার, ব্লগের জন্য খুবই গুরুপ্তপুর্ন। কারণ এই যোগাযোগ না থাকলে আপনি গুগল এ্যাডসেন্স পাবেন না। আর গুগল এ্যাডসেন্স না পাইলে আপনার ব্লগিং করে আর মজা পাবেন না। মানে আপনি অনলাইন থেকে উপার্জন করতে পারবেন না।
• আপনার ব্লগে জন্য যে পেইজ গুলা থাকা আব্যশক।
• প্রথমত,

1. About Us
2. Contact Us
3. Parivcy Policy
4. Terms and Condition

• এই পেইজ গুলো আপনার ব্লগে থাকা আব্যশক। যাইহোক,আজকে শুধু আমি Contact Us Page কিভাবে তৈরি করবেন, এইটা দেখাবো।

How to create contact us page for blogger

© চলুন দেখে নিই কিভাবে যোগাযোগ ফরম তৈরি করবেন ©

• প্রথমে আপনার ব্লগারে Login

করুন

তারপর dashboard থেকে

Template ক্লিক করুন। 

এখন Edit Html এ ক্লিক করুন। 

এবার কিবোর্ড থেকে Ctrl+F এ ক্লিক করুন।

© এই কোডটি ]]></b:skin> সার্চ করুন। সার্চ করে কোডটি পাওয়ার ঠিক উপরে নিচের কোডটি পেস্ট করে দিন। 

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{

width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #e9e9e9;transition:all 1s ease-in-out;}

#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #e9e9e9;transition:all 1s ease-in-out;}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;border:1px solid #c8c8ad;background:lightyellow;color:#444;}

#ContactForm1_contact-form-submit {font-family:'Ruda';float:left;border-radius:3px;

background:#2D94CA;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;

padding:10px 18px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:double #fff;transition:all 0.4s ease-out;}

#ContactForm1_contact-form-submit:hover {background:#0C1316;}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{

width:450px;margin-top:35px;}

#ContactForm1{display:none;}

© এখন Save Template দিয়ে বের হয়ে আসেন।

• আবার ব্লগার dashboard থেকে Pages অপশানে ক্লিক করুন। এবার নতুন একটি Page create করুন। Page sccren Open হওয়ার পর, HTML ট্যাব করন।
• ট্যাব করার পর নিচের কোডটি পেস্ট করে দিন।

<div id="contact_wrap"><h3>
Contact Us</h3>
<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user" style="color: #dc843d;"></i> Name</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope" style="color: #fbe213;"></i> Email Address <span style="color: red; font-weight: bolder;">*</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil-square-o" style="color: #2398e2;"></i> Content <span style="color: red; font-weight: bolder;">*</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></div>

© এবার কাজ প্রায় শেষ। এখন আপনাকে যা করতে হবে।

• ব্লগার dashboard থেকে Layout এ ক্লিক করতে হবে। এখানে দেখেন Contact Form নামে একটা অপশান আছে, এইটাকে সেট করে দিন। ব্যাস কাজ শেষ।
• কোন সম্যাসা হলে কমেন্ট করুন। সবাই ভালো থাকেন।

-_আল্লাহ হাফেজ-_

Newer Next Posts