যোগাযোগ ওয়েডগেট ব্লগার ব্লগের জন্য Floating স্টাইল

আসসালামু অলাইকুম ,  আজকে আমি আপনাদের জন্য নিয়ে এলাম দারুন একটি 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 != &quot;&quot;'>
    <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 + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </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 এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগে দেখুন ।


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


তাহলে আজকের মত এই পর্যন্ত কোন রকম সমস্যা হলে নিচে কমেন্ট করুন । আর হা উপরের নোট টি অবশ্যই পড়ুন ।


পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সাথে সোশ্যাল মিডিয়াতে শেয়ার করুন এবং তাদের কেউ পোস্টটি দেখার সুযোগ করে দিন । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

একটি মন্তব্য পোস্ট করুন

2 মন্তব্যসমূহ

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!