আসসালামু অলাইকুম , আজকে আমি আপনাদের জন্য নিয়ে এলাম দারুন একটি Floating স্টাইল যোগাযোগ ওয়েডগেট ইংরেজিতে যাকে ব্লগে Contact Us ওয়েডগেট । যাই হোক ইতি মধ্যে একাধিক পোস্ট করেছি এই Contact Us ওয়েডগেট নিয়ে সেগুল সব ভিন্ন ভিন্ন স্টাইলের এবং আজকের টাও একটু বিভিন্ন টাইটেলে আমি বলেছি এটা Floating স্টাইল স্টাইল যদি বুঝতে না পারেন Floating স্টাইল স্টাইল কোন টাকে বলে তাহলে নিচে থেকে ডেমো দেখে আসুন ।
যোগাযোগ ওয়েডগেট যেভাবে যুক্ত করবেন ঃ
- প্রথমে আপনি আপনার ব্লগার ব্লগে লগইন করুন ।
- এবার ড্যাশবোর্ড থেকে Layout এ ক্লিক করেন ।
- এবার Add a Gadget এ ক্লিক করে Contact ওয়েডগেট যুক্ত করেনিন ।
- এবার এই পোস্ট দেখে সেই Contact ওয়েডগেট টিকে হাইড করুন ।
- এবার আপনার ব্লগের ড্যাশবোর্ড থেকে Template → Edit HTML এ ক্লিক করুন ।
- এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগটি খুজে বের করুন ।
]]></b:skin>
উপরের ট্যাগ এর ঠিক উপরে নিচের সিএসএস কোড গুল কপি পেস্ট করে বসিয়ে দিন ।
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #00A7FF;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}
এবার একি ভাবে আপনার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগটি খুজুন ।
<body> or </body>
এবার উপরের যেকোনো একটি ট্যাগ এর ঠিক নিচে নিচের JavaScript কোড গুল কপি পেস্ট করে বসিয়ে দিন ।
<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>
- Save Template এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগে দেখুন ।
তাহলে আজকের মত এই পর্যন্ত কোন রকম সমস্যা হলে নিচে কমেন্ট করুন । আর হা উপরের নোট টি অবশ্যই পড়ুন ।
পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সাথে সোশ্যাল মিডিয়াতে শেয়ার করুন এবং তাদের কেউ পোস্টটি দেখার সুযোগ করে দিন । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।
Thanx a lot parvez. I just used your tgbox code in my blog and its just awesome.
উত্তরমুছুনJust modified some images and codes but thanx a lot.
my blog AhsanCy
ধন্যবাদ ।
মুছুন