TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly সাইটে তথ্য বার্তা বাক্স যোগ করবেন?

1

একটি নিবন্ধে গুরুত্বপূর্ণ তথ্য তুলে ধরা ব্যবহারকারীদের কাছে সফলভাবে বার্তা পৌঁছে দিতে সাহায্য করে। সাধারণত, আপনি টিপস, সাহায্য, সতর্কতা, সতর্কতা এবং অন্যান্য অনেক ধরনের তথ্য প্রদর্শনের জন্য বার্তা বাক্স ব্যবহার করতে পারেন। বুটস্ট্র্যাপের মতো ফ্রেমওয়ার্কগুলি এই তথ্য বার্তা বাক্সগুলি যোগ করার জন্য পূর্বনির্ধারিত সতর্কতা উপাদান সরবরাহ করে। একইভাবে, আপনি ওয়ার্ডপ্রেসের মত কন্টেন্ট ম্যানেজমেন্ট সিস্টেমে প্লাগইন ব্যবহার করতে পারেন। Weebly তে, আপনি সাধারণ CSS ব্যবহার করে তথ্য বার্তা বাক্স তৈরি করতে পারেন। এই নিবন্ধে আমরা বুটস্ট্র্যাপ সতর্কতা উপাদানটির উপর ভিত্তি করে ওয়েবলি সাইটে তথ্য বার্তা বাক্স যুক্ত করার ব্যাখ্যা করব ।

তথ্য বার্তা বাক্স

আমরা দুটি ভিন্ন শৈলী সহ বার্তা বাক্স তৈরি করব।

  • ফন্ট আইকন ব্যবহার করে
  • ছোট আইকন ছবি ব্যবহার করে

আপনি যদি আপনার সাইটে ফন্ট অসাধারণ ব্যবহার করেন তবে ফন্ট আইকনগুলি ভাল বিকল্প । অন্যথায়, আপনি ফন্ট আইকনগুলির পরিবর্তে ইমেজ বিকল্পটি চয়ন করতে পারেন।

তথ্য বার্তা বাক্সের বৈশিষ্ট্য

তথ্য বার্তা বাক্সে নিম্নলিখিত বৈশিষ্ট্য থাকবে:

  • মোবাইল ডিভাইসে CSS এবং সম্পূর্ণরূপে প্রতিক্রিয়াশীল স্বয়ংক্রিয় অ্যালাইনিং দিয়ে তৈরি।
  • শৈলীতে তথ্য, সাফল্য, সতর্কতা, বিপদ, টিপস, সাহায্য এবং ঘোষণা বার্তাগুলির জন্য বার্তা বাক্স অন্তর্ভুক্ত রয়েছে। আপনি কোডের উপর ভিত্তি করে আপনার নিজস্ব কাস্টম মেসেজ বক্সও নির্ধারণ করতে পারেন।
  • আপনার প্রয়োজনের উপর ভিত্তি করে পৃথক বার্তা বাক্স যোগ করুন। উদাহরণস্বরূপ, যখন আপনি একটি টিপ প্রদর্শন করতে চান তখন "টিপ বার্তা বাক্স" ব্যবহার করুন এবং একটি সতর্কতা ব্যবহার করার জন্য "সতর্কতা বার্তা বাক্স" ব্যবহার করুন। এটি "এম্বেড কোড" উপাদানটির ভিতরে আটকানো এইচটিএমএল -এর মধ্যে নিয়ন্ত্রণ করা যেতে পারে।
  • আপনার প্রয়োজন অনুযায়ী রঙ এবং ফন্ট কাস্টমাইজ করা যায়।
  • বিজ্ঞপ্তি বাক্সের প্রস্থ স্ক্রিনের সম্পূর্ণ প্রস্থে বাড়ানো যেতে পারে বা সামগ্রীর দৈর্ঘ্যের সাথে সামঞ্জস্য করতে পারে।

ফন্ট আইকন সহ 1 তথ্য বার্তা বাক্স

নীচে পাঠ্যটির আগে বাক্সগুলি কীভাবে CSS রঙের বাক্স এবং একটি ফন্ট আইকন ধারণ করবে তা দেখাবে ।

কিভাবে Weebly সাইটে তথ্য বার্তা বাক্স যোগ করবেন?

এই তথ্য বাক্সগুলি তৈরি করার প্রথম ধাপ হল আপনার সাইটের হেডার বিভাগে ফন্ট অসাধারণ আইকন CSS লিঙ্ক করা। এটি করার জন্য, আপনার Weebly সাইট এডিটরে "সেটিংস> এসইও> হেডার কোড" বিভাগে নীচের কোডটি যোগ করুন।

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

কিভাবে Weebly সাইটে তথ্য বার্তা বাক্স যোগ করবেন?

Weebly সাইট পর্যায়ে হেডার কোড যোগ করুন

দ্বিতীয় ধাপ হল "main.less" ফাইলের নিচে কোডের নিচে CSS যোগ করা।

.webnots-notification-box { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ffffff; font-family: verdana, 'open sans', sans-serif; margin-bottom: 25px; padding: 10px 14px 10px 44px; position: relative; box-shadow: 0px 1px 5px #999; /* width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; */ } .webnots-notification-box:before { font-family: FontAwesome; font-size: 21px; left: 14px; position: absolute; } .webnots-success { background-color: #2ecc71; } .webnots-success:before { content: "f00c"; margin-left: -2px; } .webnots-failure { background-color: #e74c3c; } .webnots-failure:before { content: "f00d"; } .webnots-warning { background-color: #e67e22; } .webnots-warning:before { content: "f12a"; margin-left: 5px; } .webnots-information { background-color: #3498db; } .webnots-information:before { content: "f129"; margin-left: 4px; } .webnots-question { background-color: #f1c40f; } .webnots-question:before { content: "f128"; margin-left: 2px; } .webnots-tip { background-color: #16a085; } .webnots-tip:before { content: "f0eb"; margin-left: 2px; } .webnots-notice { background-color: #bea474; } .webnots-notice:before { content: "f0a1"; margin-left: -1px; }

কিভাবে Weebly সাইটে তথ্য বার্তা বাক্স যোগ করবেন?

Weebly এ প্রধান CSS ফাইল সম্পাদনা

একবার আপনি সিএসএস কোড যোগ করলে, যে পৃষ্ঠায় আপনি তথ্য বার্তা যোগ করতে চান সেখানে যান। একটি " এম্বেড কোড " উপাদান টেনে নীচের HTML কোডটি অনুলিপি করুন এবং আটকান :

<div class="webnots-information webnots-notification-box">This is the info box - You can input as much or as little information!</div> <div class="webnots-question webnots-notification-box">This is the help box - You can input as much or as little information!</div> <div class="webnots-tip webnots-notification-box">This is the tip box - You can input as much or as little information!</div> <div class="webnots-notice webnots-notification-box">This is the notice box - You can input as much or as little information!</div> <div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div> <div class="webnots-failure webnots-notification-box">This is the danger box - You can input as much or as little information!</div> <div class="webnots-warning webnots-notification-box">This is the warning box - You can input as much or as little information!</div>

প্রতিটি

ট্যাগ বিভিন্ন ধরনের বার্তা কভার করে। উদাহরণস্বরূপ, একটি সাফল্য বাক্স যোগ করতে শুধু নীচের HTML কোড যোগ করুন:

<div class="webnots-success webnots-notification-box">This is the success box - You can input as much or as little information!</div>

আমরা এই উদাহরণে ফন্ট অসাধারণ 4.7 ব্যবহার করেছি। আপনি HTML এ CSS এবং সংশ্লিষ্ট ক্লাস প্রতিস্থাপন করে 5 বা 6 সংস্করণ ব্যবহার করতে পারেন।

আইকন ছবি সহ 2 তথ্য বার্তা বাক্স

দ্বিতীয় শৈলীর বার্তা বাক্সগুলি ফন্ট আইকনগুলির পরিবর্তে ছোট ছবি ব্যবহার করে এবং নীচের মত দেখাবে:

কিভাবে Weebly সাইটে তথ্য বার্তা বাক্স যোগ করবেন?

এই উইজেটের জন্য নিম্নলিখিত চারটি আইকন ইমেজ প্রয়োজন, ডান ক্লিক করুন এবং আপনার স্থানীয় পিসিতে ছবিগুলি ডাউনলোড করুন।

আপনার Weebly সাইটের "থিম> HTML / CSS সম্পাদনা করুন> সম্পদ> ফাইল আপলোড করুন …" এর অধীনে ছবি আপলোড করুন। একটি আপলোড করা Weebly ছবির ফাইল পাথ হবে ” https://your-site-name.com/files/theme/info.png " এর মতো। বিকল্পভাবে, আপনি আপলোড করা ফাইলে ডান ক্লিক করতে পারেন এবং সেই চিত্রের সঠিক ফাইল পাথ পেতে পারেন।

একবার আপলোড করা ছবিগুলির সঠিক ফাইল পাথ হয়ে গেলে, আপনার "main.less" ফাইলে নীচের CSS কোড যোগ করুন। আপনার Weebly সাইট ইমেজ ইউআরএল দিয়ে ছবির ইউআরএল আপডেট করতে ভুলবেন না।

.info_alert { background-image: url(https://img.webnots.com/2015/10/info.png); border: 1px solid #CCCCCC; background-color: #E0E0E0; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; } .warning_alert { background-image: url(https://img.webnots.com/2015/10/warning.png); border: 1px solid #FE7736; background-color: #FFBD59; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 10px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .danger_alert { background-image: url(https://img.webnots.com/2015/10/danger.png); border: 1px solid #FF0F0F; background-color: #FF8080; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: white; } .success_alert { background-image: url(https://img.webnots.com/2015/10/success.png); border: 1px solid #83CD52; background-color: #8DE182; padding: 15px 15px 15px 45px; background-repeat: no-repeat; background-position: 10px 12px; border-radius: 3px; box-shadow: 0px 1px 5px #999; margin: 10px 0px; color: #060; }

আপনি যে পৃষ্ঠায় বার্তা বাক্স যোগ করতে চান তাতে যান এবং একটি "এম্বেড কোড" উপাদানটির মধ্যে নীচের HTML কোডটি সন্নিবেশ করান।

<p class="info_alert">This is an information alert - You can input as much or as little information as you like within this section!</p> <p class="warning_alert">This is an warning alert - You can input as much or as little information as you like within this section!</p> <p class="danger_alert">This is an rejection alert - You can input as much or as little information as you like within this section!</p> <p class="success_alert">This is an acceptance alert - You can input as much or as little information as you like within this section!</p>

আপনি যদি শুধুমাত্র একটি বাক্স ব্যবহার করতে চান, তাহলে

ট্যাগের মধ্যে সংশ্লিষ্ট কোড ব্যবহার করুন।

দ্রষ্টব্য: সাইটের "সেটিংস" এর হেডার বিভাগের অধীনে CSS কোড যোগ করার পরিবর্তে আপনার কাছে আরও দুটি বিকল্প রয়েছে। একটি হল "main.less" ফাইলের অধীনে কোড সন্নিবেশ করানো এবং অন্যটি নির্দিষ্ট পৃষ্ঠার হেডার বিভাগের অধীনে কোড যোগ করা যা শুধুমাত্র সেই পৃষ্ঠায় কার্যকর হবে। উভয় ক্ষেত্রেই কোডটি ট্যাগের মধ্যে যোগ করা নিশ্চিত করে।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত