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

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

DemoClick here

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

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

• প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template এ ক্লিক করুন

• এবার Edit HTML এ ক্লিক করুন এবং কীবোর্ডের CTRL+F প্রেস করুন

• নিচের ট্যাগটি খুজে বের করুন

]]>

• উপরের ট্যাগের ঠিক উপরে নিচের সিএসএস কোড গুল বসিয়ে দিন

#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 ট্যাবে ক্লিক করে নিচের কোড গুল সেখানে বসিয়ে দিন

 


Contact Us

 Name

  



 Email Address * 

  



 Content *

 

  

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

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

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

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

 #ContactForm1{display:none;}

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


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