ব্লগারে যেভাবে Dialog Box যুক্ত করবেন

স্বাগত জানাচ্ছি ব্লগার ওয়েবসাইটের উইজেট বিষয়ক আরেকটি টিউটোরিয়ালে। আজকে আপনাদেরকে দেখাবো কীভাবে আপনার ব্লগার ওয়েবসাইটে একটি আকর্ষণীয় ডায়ালগ বক্স যুক্ত করবেন।

Dialog Box in Blogger Website

এই উইজেটটির অনেকগুলো বৈশিষ্ট্য, সুবিধা ও ব্যবহার রয়েছে। নিচে এমন কয়েকটি কারণ উল্লেখ করা হলো যে জন্য আপনি আপনার ওয়েবসাইটে Dialog Box অপশন যুক্ত করবেন।

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

এছাড়াও আপনার সৃজনশীলতা ব্যবহার করে এই ফিচারটি অন্যা উদ্দেশ্যেও প্রয়োগ করতে পারেন।

ব্লগারে Dialog Box যুক্ত করার নিয়ম

মাত্র কয়েকটি ধাপ সঠিকভাবে অনুসরণ করলে আপনি সফলভাবে এই উইজেটটি আপনার ব্লগার ওয়েবসাইটে ইন্টিগ্রেট করতে পারবেন।

ধাপ-১: HTML কোড লিখুন

ডায়ালগ বক্স অপশনটি যুক্ত করতে প্রথমেই নিচের HTML কোডটি কপি করুন। তারপরে আপনার ওয়েবসাইটের Theme Editor অপশনে যান এবং </body> ট্যাগের উপরে পেস্ট করুন।

<div class='blanternotif'>
<div class='blantertitle'>Notification</div>
<div class='notiftext'>
Write Your Detailed Message Here.</div>
<a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>Close</a>
<a class='waves-effect icx close-sf' href='javascript:;'/>
</div>
<div class='matilampu'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.close-sf&quot;).click(function(){$(&quot;.blanternotif,.matilampu&quot;).removeClass(&quot;aktif&quot;)})}),$(document).ready(function(){$(&quot;.shownotif&quot;).click(function(){$(&quot;.blanternotif,.matilampu&quot;).toggleClass(&quot;aktif&quot;)})});
</script>

ধাপ-২: CSS কোড লিখুন

নিচের কোডটি কপি করুন। এবার থিম এডিটরের মধ্যে লিখে সার্চ করুন এবং এর ঠিক উপরে কপিকৃত CSS কোডটি পেস্ট করে দিন। এরপর থিমটি Save করুন।

/* Material Design Dialog Box */
a.waves-light.close-sf{font-size:14px;color:#fff}
.blanternotif,.matilampu{visibility:hidden;opacity:0}
.blanternotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.blanternotif button{border:none;position:absolute;margin-top:30px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}
a.waves-light.close-sf{background:#097744;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase}
.matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.blantertitle{margin-bottom:15px; font-size:18px;}
.blanternotif.aktif,.matilampu.aktif{visibility:visible;opacity:1}
.blanternotif.aktif{top:25%}
.notiftext{font-size:14px;line-height:1.5}
@media screen and (max-width:768px){.blanternotif{left:10%;right:10%}}

/* Notification button style */
.notification-button {position: fixed;width: 45px;height: 45px;bottom: 100px;right: 20px;background-color: #FF8C00;color: #ffffff;border-radius: 50%;text-align: center;font-size: 25px;z-index: 100;display: flex;justify-content: center;align-items: center;text-decoration: none;}

ধাপ-৩: উইজেট ইন্টিগ্রেট করুন

এবার আপনি Dialog Box দেখানোর জন্য যেখানে বাটন যুক্ত করতে চান সেখানে নিচের কোডটি লিখুন।

<li><a class='shownotif' href='javascript:;' title='Notification'>Show Notification</a></li>

আর যদি আমাদের এই ওয়েবসাইটের মতো স্ক্রিনের ডানপাশে নিচের কোণে একটি বাটন যুক্ত করতে চান যেটাতে ক্লিক করলে ডায়ালগ বক্সটি দৃশ্যমান হবে তাহলে নিচের কোডটি কপি করুন। এরপরে Theme Editor অপশনে গিয়ে </body> ট্যাগের ঠিক উপরে কোডটি পেস্ট করুন।

<div class='notification-button'><span><a class='shownotif' href='javascript:;' title='Notification'><svg fill='#fff' height='30' viewBox='0 2 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M21 19v1H3v-1l2-2v-6c0-3.1 2.03-5.83 5-6.71V4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.29c2.97.88 5 3.61 5 6.71v6zm-7 2a2 2 0 0 1-2 2 2 2 0 0 1-2-2'/></svg></a></span>
</div>

যেভাবে কাস্টমাইজ করবেন

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

১. আইকন পরিবর্তন

Notification icon পরিবর্তন করতে চাইলে সর্বশেষে যে কোডটি প্রদান করেছি সেখানে ব্যবহার করা SVG আইকনটি পরিবর্তন করতে হবে।

আপনি যদি প্রোডাক্ট বা সার্ভিসের ডিসকাউন্ট বিষয়ক কোনো বার্তা দেখাতে চান তাহলে Dollar icon, Label icon, Hot icon টাইপের কোনো SVG আইকন ব্যবহার করতে পারেন।

২. ডায়ালগ বক্স কাস্টমাইজেশন

ডায়ালগ বক্সের ডিজাইন বা যেকোনো কিছু পরিবর্তন করতে চাইলে ২য় ধাপে প্রদানকৃত CSS কোড পরিবর্তন করতে হবে।

সর্বশেষ কথা

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

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

ব্লগার টেমপ্লেটে Google CDN এর মাধ্যমে jQuery যুক্ত করতে নিচের কোডটি কপি করুন এবং Theme Editor-এ গিয়ে </head> ট্যাগের ঠিক উপরে পেস্ট করুন।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

এরপরেও যদি কোনো সমস্যা ফেইস করেন তাহলে নিচের কমেন্ট অপশনে জানান। আপনার সমস্যাটি সমাধানের সর্বোচ্চ চেষ্টা করবো।

পরবর্তী আর্টিকেল পূর্ববর্তী আর্টিকেল
কোনো কমেন্ট নেই
কমেন্ট লিখুন
comment url
নোটিফিকেশন
আমাদের ওয়েবসাইটের জন্য গেস্ট পোস্ট আহবান করা হচ্ছে। আপনি যদি গেস্ট পোস্ট করে ব্যাকলিংক নিতে আগ্রহী হোন তাহলে যোগাযোগ করুন।
বন্ধ করুন