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

Weebly তে টিম মেম্বার উইজেট কিভাবে যোগ করবেন?

0

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

Weebly টিম সদস্য অ্যাপ

আপনি উইবলির অ্যাপ সেন্টার থেকে আপনার সাইটে একটি ফ্রি “টিম কার্ড" অ্যাপ সংযুক্ত করতে পারেন । এটি একটি সহজ বিকল্প কারণ অ্যাপটি উইবলি ডেভেলপারদেরও।

Weebly তে টিম মেম্বার উইজেট কিভাবে যোগ করবেন?

Weebly টিম কার্ড অ্যাপ

যাইহোক, অ্যাপ্লিকেশনটিতে অনেকগুলি বাগ রয়েছে এবং আপনি যখন সম্পাদকের বিষয়বস্তু সম্পাদনা করার চেষ্টা করেন তখন খারাপ ব্যবহারকারীর অভিজ্ঞতা তৈরি করে। সেটিংসের জন্য পপ-আপ আপনি যে সামগ্রী সম্পাদনা করতে চান তা লুকিয়ে রাখবে এবং আপনাকে সর্বদা বিরক্ত করবে। এটি 5 বছরের বেশি হয়ে গেছে এবং ওয়েবেলি এই অ্যাপটি সংশোধন ও অপ্টিমাইজ করেনি। সুতরাং, Weebly অ্যাপটি আপডেট করার অপেক্ষা করার পরিবর্তে, আপনি নীচের টিম মেম্বার কার্ডগুলি ব্যবহার করে দেখতে পারেন।

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

Weebly তে টিম মেম্বার উইজেট কিভাবে যোগ করবেন?

দলের সদস্য প্যানেল উইজেট

টিম মেম্বার উইজেটের বৈশিষ্ট্য

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

টিম মেম্বার উইজেট যোগ করার ধাপ

আপনার Weebly সাইটে টিম মেম্বার উইজেট যোগ করার ধাপ নিচে দেওয়া হল।

  • লিঙ্কিং আইকন CSS
  • CSS কোড যোগ করা হচ্ছে
  • প্রোফাইল ছবি আপলোড করা হচ্ছে
  • HTML কোড যোগ করা

ধাপ #1 – লিঙ্কিং আইকন CSS

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

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

Weebly তে টিম মেম্বার উইজেট কিভাবে যোগ করবেন?

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

ধাপ #2 – CSS কোড যোগ করা

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

.team { position: relative; min-height: 1px; width:330px; } .person-details figure { display: block; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(216, 216, 216, 0.73); border-radius: 5px; margin: 0; } .person-details figure figcaption { padding: 15px; } .margin-bottom-10 { margin-bottom: 10px; } .person-details figure small { font-size: 65%; } .h4 small { font-weight: normal; line-height: 1; color: #b3b3b3; } .person-details-icons { background: #bc5e43; padding: 10px; text-align: center; margin: 0; } .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } .person-details-icons [class^="fa-"]:before, .person-details-icons [class=" fa-"]:before { color: #ffffff; padding: 0; } a:hover { opacity: 0.5; }

Weebly তে টিম মেম্বার উইজেট কিভাবে যোগ করবেন?

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

আপনি যদি সাইট বা একটি পৃষ্ঠার হেডার বিভাগে এই CSS যোগ করছেন, তাহলে

ট্যাগের মধ্যে কোড যোগ করতে ভুলবেন না।

ধাপ #3 – প্রোফাইল ছবি আপলোড করা

Weebly কোড এডিটরের "সম্পদ" বিভাগের অধীনে আপনার দলের সদস্যদের প্রোফাইল ছবি আপলোড করুন এবং আপলোড করা ইমেজ ফাইল পাথ এর মত হওয়া উচিত-" http://your-weebly-site.com/files/theme/profile1.png "।

ধাপ #4 – HTML কোড যোগ করা

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

<div class="person-details margin-bottom-30">  <div class="team"> <figure> <img style="width:330px; height:200px" src="https://img.webnots.com/2015/08/Testimonial2.jpg"> <figcaption> <h4 class="margin-bottom-10">Isabel Tietz <small>- Plugin Developer</small> </h4> <div style="text-align:justify;">Super specialist on PHP template design and development for Weebly and WordPress platforms.</div> </figcaption> <ul class="list-inline person-details-icons"> <li> <a href="#">    <i class="fa fa-twitter">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-linkedin">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-facebook">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-skype">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-google-plus">   </i> </a> </li> </ul> </figure> </div> </div>

উইজেট কাস্টমাইজ করা

উপরের এইচটিএমএল কোড যোগ করলে একটি টিম মেম্বার কার্ড সক্ষম হবে এবং আপনি উপযুক্ত বিভাগটি পরিবর্তন করে উইজেটটি কাস্টমাইজ করতে পারবেন।

  • ধাপ 3 থেকে আপনার নিজের সাথে ইমেজ ইউআরএল প্রতিস্থাপন করুন এবং প্রোফাইল ইমেজের অবস্থান এবং দৃশ্যমানতা সামঞ্জস্য করতে উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি ব্যবহার করুন।

  • দ্য

    বিভাগে নাম, পদবী এবং সংক্ষিপ্ত বিবরণ রয়েছে যা আপনার প্রয়োজন অনুসারে পরিবর্তন করা যেতে পারে।

  • উপযুক্ত কোড সহ উপলব্ধ যেকোন সামাজিক আইকন ব্যবহার করুন। উদাহরণস্বরূপ, ইনস্টাগ্রাম আইকন যোগ করতে <i class = “fa fa-instagram”> কোডটি ব্যবহার করুন।

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

  • টিমের সদস্যের সামাজিক লিঙ্ক দিয়ে # প্রতিস্থাপন করুন ।

  • "এম্বেড কোড" উপাদানগুলিকে পাশাপাশি রেখে আরও দলের সদস্য যোগ করুন।

  • আপনি CSS কোডে রং এবং ফন্ট সাইজ পরিবর্তন করতে পারেন। মোবাইল ডিভাইসে আরও ভালোভাবে উপস্থিত হওয়ার জন্য আমরা প্রতিটি টিম কার্ডের প্রস্থকে 30০ পিক্সেল পর্যন্ত সীমাবদ্ধ করে রেখেছি, যদি আপনার আর "নাম + পদবী" থাকে তবে আপনি এই প্রস্থ পরিবর্তন করার চেষ্টা করতে পারেন।

দ্রষ্টব্য: উইজেটের চিত্রগুলি ডেমো উদ্দেশ্যে কঠোরভাবে এবং প্রকৃত দলের সদস্যদের নির্দেশ করে না।

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

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