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

কিভাবে Weebly সাইটে Accordion ইমেজ স্লাইডার যোগ করবেন?

1

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

Weebly Accordion ইমেজ স্লাইডার

আপনার Weebly সাইটে স্টাইলিশ স্লাইডার কেমন দেখাবে তা নিচে দেওয়া হল।

কিভাবে Weebly সাইটে Accordion ইমেজ স্লাইডার যোগ করবেন?

সিএসএস অ্যাকর্ডিয়ন স্লাইডার

কিভাবে Weebly এ Accordion ইমেজ স্লাইডার যুক্ত করবেন?

এখন আপনি স্লাইডারটি দেখেছেন এবং যদি এটি ভাল দেখায়, এখানে আপনার সাইটে স্লাইডার যুক্ত করার ধাপে ধাপে নির্দেশ দেওয়া হল। প্রক্রিয়াটি তিনটি সহজ ধাপ নিয়ে গঠিত:

  • স্লাইডারের জন্য ছবি আপলোড করা হচ্ছে
  • একটি পৃষ্ঠা বা সাইট স্তরে CSS কোড যোগ করা
  • এম্বেড কোড এলিমেন্ট ব্যবহার করে HTML কোড যোগ করা

ধাপ 1 – অ্যাকর্ডিয়ন স্লাইডারের জন্য ছবি আপলোড করা

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

কিভাবে Weebly সাইটে Accordion ইমেজ স্লাইডার যোগ করবেন?

Weebly কোড এডিটরে ছবি আপলোড করুন

আপনাকে আপলোড করা ছবির ইউআরএল রাখতে হবে যা ধাপ used -এ ব্যবহার করতে হবে।

https://your-site-name.com/files/theme/image-name.jpg

বিকল্পভাবে, আপনি ছবিতে ডান ক্লিক করতে পারেন এবং URL পেতে পারেন যা নীচের মত হওয়া উচিত:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/926370416842107469/files/image-name.png

কিভাবে Weebly সাইটে Accordion ইমেজ স্লাইডার যোগ করবেন?

আপলোড করা ছবির ইউআরএল পান

আপনার সমস্ত ছবি আপলোড করার পরে, "সংরক্ষণ করুন" বোতামে ক্লিক করুন এবং আপনার থিমের জন্য একটি কাস্টম নাম প্রদান করুন।

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

আপনি যদি স্লাইডারটি শুধুমাত্র নির্দিষ্ট পাতায় যোগ করতে চান তাহলে নিচের CSS কোডটি "পৃষ্ঠা> পৃষ্ঠা নির্বাচন করুন> SEO সেটিংস> হেডার কোড" বিভাগে যোগ করুন।

কিভাবে Weebly সাইটে Accordion ইমেজ স্লাইডার যোগ করবেন?

পৃষ্ঠায় হেডার কোড যোগ করুন

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

কিভাবে Weebly সাইটে Accordion ইমেজ স্লাইডার যোগ করবেন?

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

<style type="text/css"> .accordion_slider { width: 805px; height: 320px; overflow: hidden; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } .accordion_slider ul { width: 2000px; } .accordion_slider li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .accordion_slider ul:hover li {width: 40px;} .accordion_slider ul li:hover {width: 640px;} .accordion_slider li img { display: block; max-width: 640px !important; } .image_box { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_box a { display: block; color: #fff !important; text-decoration: none; text-align: left; padding: 20px; font-size: 16px; } </style>

আপনি আপনার প্রয়োজন অনুযায়ী শৈলী কোন কাস্টমাইজ করতে পারেন।

ধাপ 3 – HTML কোড যোগ করা

শেষ ধাপ হল একটি প্রয়োজনীয় পৃষ্ঠার বিষয়বস্তু এলাকায় একটি এম্বেড কোড এলিমেন্ট টেনে এনে ফেলে দিয়ে স্লাইডারের নিচের HTML কোড যোগ করা । ধাপ 1 থেকে আপনার নিজের লিঙ্কগুলির সাথে ছবির লিঙ্কগুলি প্রতিস্থাপন করতে ভুলবেন না।

<div class="accordion_slider"> <ul> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site//">KungFu Panda</a> </div> <img src="https://img.webnots.com/2015/07/Image-1.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Toy Story 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-2.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Wall-E</a> </div> <img src="https://img.webnots.com/2015/07/Image-3.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Up</a> </div> <img src="https://img.webnots.com/2015/07/Image-4.jpg"/> </li> <li> <div class="image_box"> <a href="https://www.webnots.com/how-to-add-accordion-slider-in-free-weebly-site/">Cars 2</a> </div> <img src="https://img.webnots.com/2015/07/Image-5.jpg"/> </li> </ul> </div>

দ্রষ্টব্য: এইচটিএমএল কোড যুক্ত করার পরে, আপনি দেখতে পাবেন ছবিগুলি উইবলি এডিটরের ভিতরে অন্যের নীচে তালিকাভুক্ত রয়েছে । এটি ঠিক আছে কারণ CSS প্রভাবগুলি পৃষ্ঠার মধ্যে প্রয়োগ করা হয় না, প্রকৃত স্লাইডারটি দেখতে পৃষ্ঠাটি প্রকাশ করুন।

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

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