লেখক: কিভাবে এনিমেশন যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? হ্যাঁ আপনি টাইটেল ঠিক দেখেছেন এবং ঠিক পড়েছেন। আসলে আজকে আমি আপনাদের সঙ্গে খুব মজার একটি যোগাযোগ ফর্ম ওয়েডগেট শেয়ার করবো। এই কন্টাক্ট ফর্ম আপনি আপনার ব্লগে ব্যবহার করলে খুব সহজে আপনার ভিজিটর আপনার ব্লগ থেকে আপনাকে মেল অর্থাৎ ম্যাসেজ পাঠাতে পারবো। আশাকরি এটা আমারা সবাই জানি, এর আগেও আমি বেশ কিছু যোগাযোগ ওয়েডগেট নিয়ে পোস্ট করেছি এবং সেখানেও বিস্তারিত আলোচনা করতে চেস্ট করেছি তাই বেশি কিছুই বলব না। কারন এটা নতুন কিছুই না শুধু মাত্র এর স্টাইল এবং সিএসএস ইফেক্ট নতুন, বাকি এর কাজ সব একি। তাহলে চলুন দেখে নেওয়া যাক কিভাবে আপনি আপনার ব্লগস্পট ব্লগে এই সুন্দর এনিমেশন যোগাযোগ ফর্ম ব্যবহার করবেন।
প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন এবার Add a Gadget এ ক্লিক করুন। এখুন যে পেজ আসবে সেখান থেকে আপনি More Gadget এ ক্লিক করুন এবং দেখুন ডান পাশে Contact Form নামে একটি অপশন দেখা যাচ্ছে তাতে ক্লিক করুন।
এবার আপনার ড্যাশবোর্ড থেকে Tamplate অপশনে ক্লিক করুন এবং Edit HTML এ ক্লিক করুন। এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে এই ]]></b:skin> ট্যাগ সার্চ করুন। এই ট্যাগ এর ঠিক উপরে নিচের লাইনটি যুক্ত করেদিন।
কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ?
প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন এবার Add a Gadget এ ক্লিক করুন। এখুন যে পেজ আসবে সেখান থেকে আপনি More Gadget এ ক্লিক করুন এবং দেখুন ডান পাশে Contact Form নামে একটি অপশন দেখা যাচ্ছে তাতে ক্লিক করুন।
এবার আপনার ড্যাশবোর্ড থেকে 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-8_W1UXWsthjpJs-jdVvOFi5qxcrZbgembAUS0_ycxmASTXmLqVChxMc5JkDxIfVYoiUkTbNvX8v1dFUJy-kunrCynsNXiqdAca4mFt8Ar5r8uTlIdJL5l-8ixK0Wa27ClPcWbw2Tdjs/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyZ16eHvio9qLcPQo2XaYAJknPu9-GBvSmAEDB36BjFU-R3xd9UHtlsngyy-1T_Zd36syME64yhYigC7cm0LuiQxi0P20O9OMbxE1RJ_AO3p-bnMb4r2br6sZgWQmEfQuiPZ8emQlVBmA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCRWEaqw9zeHGekSexBbISqRaCd1qh2pJ19w9BVmwVR6Oip8_pfBUiO2NAHbDc2yr4WwuCD-7IGIdlXYjKD8UunTyMGJi8bLn0XgM-9Ogk2jG6m17WQLK7Ty8vncnjLg3H21i9INovr9c/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF46AhHT-7nJh0LMvno-aS4z0M23vdiVbrt3DI6hPBg32B96FcjcDh5jBevc-VTUJIE6lc9tYRvCD6FQ5_hBKBbgcjLrKGY2ZAu8n72dYKshwuQgTI-yoV6m_VDWThq9MKnYvqNp8hWGo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYKGUidZ4q2EwNIseJ-b4tQJu_jCJly1aAly-knBjLFtsWNrvapsqLoVhm0Es2BNA1iaoQWismuM9mJA-j7-5khj-uMjWXL6C78SZ2Gx-BCIUVUpvTcG37jx4XNIJN0Na9fHgWJ5LnLk/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
