CSS স্টাইল Contact Form - যোগাযোগ ওয়েডগেট ব্লগস্পট ব্লগের জন্য !!

আমারা বাংলাই যোগাযোগ ওয়েডগেট এবং ইংরেজিতে Contact Form বলি যাকে সেটা নিয়েই আজকের পোস্ট । এই Contact Form নিয়ে আমি বেশ কিছু পোস্ট করেছি তবে আজকের স্টাইল সেগুলোর থেকে ভিন্ন এবং এটা সম্পূর্ণ নতুন স্টাইল আপনি দেখলেই বুঝতে পারবেন । এটা সম্পূর্ণ সিএসএস CSS দ্বারা করা হয়েছে । যোগাযোগ ওয়েডগেট একটা ব্লগ বা ওয়েবসাইটে থাকে খুবি জরুরি ভিজিটর দের ভাল সার্ভিস দেওয়া নই আপনি যদি গুগল অ্যাডসেন্স এ আবেদন করেন তারা এই সব বিসয়ের দিকে যথস্ট লক্ষ রাখে তাছাড়া আপনি কোন প্রফেশনাল কাজ করলে আপনাকে এই ওয়েডগেট অবশ্যই ব্যবহার করতে হবে । তাহলে চলুন শুরু করা যাক কিভাবে ব্যবহার করবেন ।

Demo
Click here

লাইভ ডেমো দেখা হয়েগেলে এবার নিচে থেকে দেখে নেওয়া যাক কিভাবে এই যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন । খুব সহজ নিচের সাধারন স্টেপ গুল দেখুন

CSS স্টাইল Contact Form - যোগাযোগ ওয়েডগেট ব্লগস্পট ব্যবহার নিয়ম :

• প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে 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 এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগার ড্যাশবোর্ড থেকে Pages অপশনে ক্লিক করুন এবং একটি নতুন পেজ নিন এবং সেখানে 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> 

এবার কাজ প্রায় শেষ তবে এটা স্টাইল মানে যোগাযোগ ওয়েডগেট এর ডিজাইন এর কাজ দেখুন এটা কাজ করবেন না , এরা জন্য আপনাকে যা করতে হবে -

• আপনি আপনার ব্লগার ড্যাশবোর্ড থেকে Layout → Add a Gadget এ ক্লিক করুন 

• এবার যে পেজ আসবে সেখান থেকে More Gadgets এ ক্লিক করুন 

এবার দেখুন সব উপরে Contact Form নামে একটি অপশন আছে সেখানে যেকোনো স্থানে Save করে নিন , ভয় পাবেন না এটা আপনার ব্লগে দেখা যাবে না কারন আগেই আমারা নিচের কোড ব্যবহার করে নিয়েছি সিএসএস কোড এর সঙ্গেই ।

 #ContactForm1{display:none;}

যাই হোক কাজ শেষ এবার আপনি এই যোগাযোগ পেজকে আপনার ব্লগ টেম্পলেট এর যেকোনো স্থানে ব্যবহার করতে পারেন এর জন্য সুধু মাত্র লিঙ্ক কপি করুন এবং ব্যবহার করুন ।


তাহলে আসাকরি বুঝতে কোন রকম সমস্যা হলনা কোন রকম সমস্যা হলে নিচে কমেন্ট করুন । পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে শেয়ার করুন আমাদের কেউ কমেন্ট করে জানাতে পারেন । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

পোস্ট রেটিং করুন

আরও নতুন পোস্ট পুরানো পোস্ট