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

কিভাবে Weebly তে প্রশংসাপত্র উইজেট যোগ করবেন?

3

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

উভয় উইজেটের নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

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

কিভাবে Weebly তে প্রশংসাপত্র উইজেট যোগ করবেন?

এই নিবন্ধে ব্যাখ্যা করা উভয় উইজেট ব্যবহারকারীদের ছবি আছে, অতএব প্রথম পদক্ষেপ হল "থিম> সম্পাদনা HTML / CSS > সম্পদ> ফাইল আপলোড করুন …" এর অধীনে ফটো আপলোড করা । আপলোড করা ছবির ফাইল পথ হবে যেমন:

http://your-site-name.com/files/theme/testimonial-image1.jpg

সহজ প্রশংসাপত্র উইজেট

সহজ প্রশংসাপত্র উইজেটটি নীচের মত দেখাবে এবং আপনি এখানে লাইভ ডেমো দেখতে পারেন । এটি একটি সম্পূর্ণ প্রস্থ হিসাবে বা একটি দুই কলাম বিন্যাসে স্থাপন করা যেতে পারে।

কিভাবে Weebly তে প্রশংসাপত্র উইজেট যোগ করবেন?

উইজেটটিতে নিম্নলিখিত অংশগুলি রয়েছে যা মন্তব্যগুলি ব্যবহার করে CSS এও হাইলাইট করা হয়েছে:

  • প্রশংসাপত্র সামগ্রী ".tm-content" শ্রেণী ব্যবহার করে সংজ্ঞায়িত করা হয়
  • নিচে তীর ব্যবহার করে সংজ্ঞায়িত করা হয়েছে: ছদ্ম উপাদান পরে ".tm- বিষয়বস্তু: পরে"
  • ছবি, নাম এবং শিরোনাম ".tm-pic" ক্লাস ব্যবহার করে সংজ্ঞায়িত করা হয়
  • ছবিটি ".tm-pic ফটো" ক্লাস ব্যবহার করে সংজ্ঞায়িত করা হয়েছে
  • ".Tm-pic p: nth-child (2)" ক্লাস ব্যবহার করে নাম সংজ্ঞায়িত করা হয়েছে
  • শিরোনামটি ".tm-pic p: nth-child (3)" ক্লাস ব্যবহার করে সংজ্ঞায়িত করা হয়েছে

সহজ প্রশংসাপত্র উইজেটের জন্য CSS

আপনার Weebly পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে নীচের CSS কোড যোগ করুন । প্রশংসাপত্রের পটভূমির রঙ #ebf3f5 হিসাবে সংজ্ঞায়িত করা হয়েছে যা আপনার প্রয়োজন অনুসারে যে কোনও রঙে পরিবর্তন করা যেতে পারে।

<style type="text/css"> /* Testimonial Content */ .tm-content { background: #ebf3f5; padding: 15px 20px 5px 15px; border-radius: 5px; margin-bottom: 30px; } /* Down Arrow */ .tm-content:after { content: ''; width: 0px; height: 0px; border-style: solid; border-width: 20px 18px 0 18px; border-color: #ebf3f5 transparent transparent transparent; position: relative; top: 37px; left: 20px; } /* Picture, Name and Title */ .tm-pic { margin-left: 25px; margin-bottom: 80px; } /* Testimonial Picture */ .tm-pic .photo { background-color: #ccc; border-radius: 100px; width: 60px; height: 60px; float: left; margin-right: 10px; } /* Name and Title Paragraph*/ .tm-pic p { position: relative; top: 5px; text-transform: uppercase; line-height:30px; } /* Name */ .tm-pic p:nth-child(2) { font-size: 16px; font-weight: 600; margin-bottom: 0; } /* Title */ .tm-pic p:nth-child(3) { font-size: 14px; color: #777; } </style>

সহজ প্রশংসাপত্র উইজেটের জন্য HTML

ডামি কন্টেন্ট আপনার নিজের দ্বারা প্রতিস্থাপন করে একটি " এম্বেড কোড " এলিমেন্টের ভিতরে নিচের HTML কোডটি যোগ করুন । কোডটি একটি একক প্রশংসাপত্র ব্লকের জন্য যা সম্পূর্ণ প্রস্থে দেখানো হবে এবং আপনি ব্লক কোড যুক্ত করে একাধিক প্রশংসাপত্র যোগ করতে পারেন। আপনি যদি দুটি কলামে প্রশংসাপত্র দেখাতে চান তাহলে "এম্বেড কোড" উপাদানগুলি পাশাপাশি ব্যবহার করুন এবং ভিতরে HTML কোড ব্লক পেস্ট করুন।

<div class="tm-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p> </div> <div class="tm-pic"> <div class="photo"><img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width=60px height=60px> </div> <p>Diana Mary</p> <p>Important person, some Company</p> </div>

রঙিন প্রশংসাপত্র উইজেট

দ্বিতীয় প্রশংসাপত্র উইজেটটি প্রথমটির অনুরূপ যা আরও উজ্জ্বল রঙের নিচে দেখানো হয়েছে। এই উইজেটের সাথে পার্থক্য হল যে একাধিক "এম্বেড কোড" উপাদান ব্যবহার না করে HTML কোডের ব্লকটি স্বয়ংক্রিয়ভাবে দুটি কলাম লেআউটে সংযুক্ত হবে। নীচে এটি দেখতে কেমন হবে:

উইজেটটিতে নিম্নলিখিত অংশ রয়েছে যা CSS- এ মন্তব্য সহ হাইলাইট করা হয়েছে:

  • একক ব্লক-"। টেস্টিমোনিয়াল-মোড়ানো" শ্রেণীতে সংজ্ঞায়িত প্রশংসাপত্র মোড়ক
  • বিষয়বস্তু – প্রশংসাপত্র বিষয়বস্তু ".testimonial" শ্রেণীতে সংজ্ঞায়িত
  • নাম এবং শিরোনাম-প্রশংসাপত্র তথ্য ".testimonial-info" শ্রেণীতে সংজ্ঞায়িত
  • ছবি – “.হেডশট" শ্রেণীতে সংজ্ঞায়িত ব্যবহারকারীর ছবি
  • তীর-"তীর-নিচে" শ্রেণীতে সংজ্ঞায়িত করা তীর

রঙিন প্রশংসাপত্র উইজেটের জন্য CSS

আপনার Weebly পৃষ্ঠার " হেডার কোড " বিভাগের অধীনে নিচের CSS যোগ করুন, কোডটি সাইট লেভেলে কার্যকর হওয়ার জন্য ট্যাগ ছাড়াই আপনি এটি "main_style.css" ফাইলের অধীনেও যোগ করতে পারেন।

<style type="text/css"> /* Testimonial Wrapper */ .testimonial-wrap { padding:30px; float:left; } /* Testimonial Content */ .testimonial { background:#54acd2; color:#fff; font-size:32px; padding:20px; width:400px; font-family:nixie one; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* Testimonial Info - Name and Title */ .testimonial-info { font-family:sans-serif; font-weight:bold; margin-top:25px; float:left; } .testimonial-info h4 { font-size:18px; margin:5px auto; color:#333; text-transform:uppercase; } .testimonial-info h4 span{ font-size:18px; margin:5px auto; color:#999; text-transform:none; } .testimonial-info p { font-size:14px; color:#df0a81; margin:0px; } /* Testimonial image */ .headshot { width:100px; height:100px; background:#333; float:left; color:#fff; margin-top:10px; border:3px solid #ccc; margin-right:20px; -webkit-border-radius: 100px; border-radius: 100px; overflow:hidden; } .headshot img{ width:100%; height:100%; } /* Down Arrow */ .arrow-down { width: 0; height: 0; margin-left:35px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #54acd2; } </style>

রঙিন প্রশংসাপত্র উইজেটের জন্য HTML

নীচে "এম্বেড কোড" উপাদানটির ভিতরে যুক্ত করা একক প্রশংসাপত্র ব্লক। যদি আপনি একাধিক ব্লক যোগ করেন তাহলে প্রশংসাপত্রগুলি স্বয়ংক্রিয়ভাবে দুটি কলামের বিন্যাসে সংযুক্ত হবে। আপনার নিজের সঙ্গে ডামি কন্টেন্ট প্রতিস্থাপন করতে ভুলবেন না।

<div class="testimonial-wrap"> <div class="testimonial"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra." </div> <div class="arrow-down"></div> <div class="headshot"> <img src="https://img.webnots.com/2015/08/Testimonial3.jpg"></div> <div class="testimonial-info"> <h4>Principal Van Kirk</h4> <p>Finger Lakes Christian School</p> </div> </div>

মনে রাখবেন যে ব্যবহৃত ছবিগুলি শুধুমাত্র ডেমো উদ্দেশ্যে এবং বাস্তব ব্যবহারকারীদের নির্দেশ করে না।

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

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