কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট ব্লগার ব্লগে যুক্ত করবেন !

কিভাবে এনিমেশন যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? হ্যাঁ আপনি টাইটেল ঠিক দেখেছেন এবং ঠিক পড়েছেন। আসলে আজকে আমি আপনাদের সঙ্গে খুব মজার একটি যোগাযোগ ফর্ম ওয়েডগেট শেয়ার করবো।

কিভাবে এনিমেশন যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? হ্যাঁ আপনি টাইটেল ঠিক দেখেছেন এবং ঠিক পড়েছেন। আসলে আজকে আমি আপনাদের সঙ্গে খুব মজার একটি যোগাযোগ ফর্ম ওয়েডগেট শেয়ার করবো। এই কন্টাক্ট ফর্ম আপনি আপনার ব্লগে ব্যবহার করলে খুব সহজে আপনার ভিজিটর আপনার ব্লগ থেকে আপনাকে মেল অর্থাৎ ম্যাসেজ পাঠাতে পারবো। আশাকরি এটা আমারা সবাই জানি, এর আগেও আমি বেশ কিছু যোগাযোগ ওয়েডগেট নিয়ে পোস্ট করেছি এবং সেখানেও বিস্তারিত আলোচনা করতে চেস্ট করেছি তাই বেশি কিছুই বলব না। কারন এটা নতুন কিছুই না শুধু মাত্র এর স্টাইল এবং সিএসএস ইফেক্ট নতুন, বাকি এর কাজ সব একি। তাহলে চলুন দেখে নেওয়া যাক কিভাবে আপনি আপনার ব্লগস্পট ব্লগে এই সুন্দর এনিমেশন যোগাযোগ ফর্ম ব্যবহার করবেন।


animation-contact-form-blogger



কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? 



প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন এবার Add a Gadget এ ক্লিক করুন। এখুন যে পেজ আসবে সেখান থেকে আপনি More Gadget এ ক্লিক করুন এবং দেখুন ডান পাশে Contact Form নামে একটি অপশন দেখা যাচ্ছে তাতে ক্লিক করুন।


animation-contact-form-blogger


এবার আপনার ড্যাশবোর্ড থেকে Tamplate অপশনে ক্লিক করুন এবং Edit HTML এ ক্লিক করুন। এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে এই ]]></b:skin> ট্যাগ সার্চ করুন। এই ট্যাগ এর ঠিক উপরে নিচের লাইনটি যুক্ত করেদিন।


#ContactForm1 {display:none}


আপনি যদি আগে থেকেই আপনার ব্লগে এই সিস্টেম ব্যবহার করে থাকেন তাহলে দ্বিতীয় এই কাজ করবেন না এমন কি আপনি উপরের Contact Form উপরের মত Already added দেখাবে তাই সেটা লক্ষ রাখুন এবং উপরের কাজ আগেই করে থাকলে উপরের কোন কিছু না দেখে নিচের স্টেপ দেখুন। 


এবার ড্যাশবোর্ড এ ফিরে আসুন এবং Pages অপশনে ক্লিক করুন অর্থাৎ আপনি যেখানে যোগাযোগ ফর্ম দেখাতে চান সেখানে যান। এবার New page এ ক্লিক করুন। পেজ এসে যাবে সেখান থেকে HTML ট্যাবে ক্লিক করুন এবং নিচের দুই বক্সের কোড গুল ফাকা ঘরে বসিয়ে দিন।


 <style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('http://3.bp.blogspot.com/-cmD_gxIBhmo/Ugp1CmUG5xI/AAAAAAAAF9Y/5CUD_WnjOvw/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('http://4.bp.blogspot.com/-Ufp_JwBgLhE/Ugp1OAYZRPI/AAAAAAAAF9g/nWV0YQrBP8o/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#0277bd; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #00b0ff; box-shadow: 0px 0px 5px #00b0ff; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#FFFFFF; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#00b0ff; text-shadow: 1px 0 0 #ede7f6; border:1px solid DodgerBlue ; } #ContactForm1_contact-form-submit:hover { background:#000000; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style> 

 <div id="wrap-contact">
<div id="form_wrap-contact">
<form id="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Content" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<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>
</div> 


ব্যাস Publish এ ক্লিক করুন এবং পোস্ট করে দিন। এবার পেজে ভিজিট করুন দেখুন আশাকরি কাজটি করতে আপনি সফল হয়েছেন।


Live Contact Form Demo


See the Pen zvBOrQ by MD Aslam parvez (@okpt123) on CodePen.


আশাকরি ফর্মটি আপনাদের পছন্দ হয়েছে এবং কাজটি করতে কোন সমস্যা হয়নি! যদি কোন রকম সমস্যা হয় অবশ্যই নিচে কমেন্ট করুন। পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন। পোস্টটি সত্যি ভাল লেগে থাকলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন এবং নিচে কমেন্ট করে যানাতে ভুলবেন না। ভাল থাকবেন সুস্থ থাকবেন।

COMMENTS

নাম

অনলাইন ইনকাম,11,অন্যান্য,13,অ্যাডসেন্স,3,অ্যান্টিভাইরাস,9,আইটি নিউজ,11,আলেক্সা,6,ইন্টারনেট,63,ইসলামিক,8,উইন্ডোজ,36,উইন্ডোজ ১০,3,উবুটু,1,এইচটিএমএল,60,এনড্রয়েড,56,ওয়ার্ডপ্রেস,11,ওয়ালপেপার,12,ওয়েডগেট,77,ওয়েব ব্রাউজার,7,ওয়েব হোস্টিং,1,কবিতা,1,ক্র্যাক,18,খবর,3,গুগল অ্যাডসেন্স,2,গেম,8,টিপস অ্যান্ড ট্রিকস,122,টেম্পেলেট,53,ডাউনলোড,75,নোটিফিকেশন,1,পিসি টিপস,15,পোর্টবেল,3,ফীডবার্নার,4,ফেসবুক,29,ফ্রীলান্সিং,1,বাংলা ইবুক,11,বিনোদন,8,ব্লগার,419,ব্লগার টিপস,194,মিডিয়া,1,মিডিয়া প্লেয়ার,1,মুভি,2,সফটওয়্যার,16,CSS ( সিএসএস ),8,Mp3 গান,1,SEO,27,WhatsApp,2,
ltr
item
এসো বন্ধু: কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট ব্লগার ব্লগে যুক্ত করবেন !
কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট ব্লগার ব্লগে যুক্ত করবেন !
কিভাবে এনিমেশন যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? হ্যাঁ আপনি টাইটেল ঠিক দেখেছেন এবং ঠিক পড়েছেন। আসলে আজকে আমি আপনাদের সঙ্গে খুব মজার একটি যোগাযোগ ফর্ম ওয়েডগেট শেয়ার করবো।
http://3.bp.blogspot.com/-a8bG3rSMIM4/Vf1mXRAjOqI/AAAAAAAAK9I/2kinsy7qr2g/s1600/animation-contact-form-blogger.jpg
http://3.bp.blogspot.com/-a8bG3rSMIM4/Vf1mXRAjOqI/AAAAAAAAK9I/2kinsy7qr2g/s72-c/animation-contact-form-blogger.jpg
এসো বন্ধু
http://www.esobondhu.com/2015/09/how-to-add-animation-contact-form-blogger.html
http://www.esobondhu.com/
http://www.esobondhu.com/
http://www.esobondhu.com/2015/09/how-to-add-animation-contact-form-blogger.html
true
8212991989234450027
UTF-8
Loaded All Posts Not found any posts আরও দেখুন বিস্তারিত পড়ুন Reply Cancel reply Delete By মূল পাতা PAGES POSTS View All আরও কিছু পোস্ট ARCHIVE সার্চ করুন সকল পোস্ট সমূহ Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy