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

কিভাবে Weebly সাইটে ইমেজ ফিল্টারিং উইজেট যুক্ত করবেন?

1

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

কিভাবে Weebly সাইটে ইমেজ ফিল্টারিং উইজেট যুক্ত করবেন?

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

  • Image Filter.html – এই ফাইলগুলোতে HTML কোড রয়েছে
  • সম্পদ – উইজেটের জন্য সমস্ত CSS, স্ক্রিপ্ট এবং চিত্র রয়েছে

উইজেট কিভাবে কাজ করে তা দেখতে ব্রাউজারে "Imge Filtering.html" ফাইলটি খুলুন। মূলত আপনার ফিল্টার করার জন্য একটি বিভাগ সহ প্রতিটি প্যানেলের জন্য একটি ছবি, শিরোনাম এবং বিবরণ প্রয়োজন। Weebly সাইট।

ধাপ 1 – Weebly সাইটে ছবি আপলোড করা

"সম্পদ / img" ফোল্ডারে ছবির আকার (644 x 420px) এর মতো আপনার ছবিগুলি প্রস্তুত করুন এবং "থিম> HTML / CSS > সম্পদ সম্পাদনা করুন " এর অধীনে উইজেটের জন্য প্রয়োজনীয় সমস্ত ছবি আপলোড করুন । আমরা "ImageFiltering" নামে একটি নতুন ফোল্ডার তৈরি করতে এবং সেই ফোল্ডারের অধীনে সমস্ত ছবি আপলোড করার সুপারিশ করছি। Weebly ছবির ফাইল পাথ হবে ” http://youesite.com/files/theme/ImageFiltering/image1.jpg " এর মতো।

কিভাবে Weebly সাইটে ইমেজ ফিল্টারিং উইজেট যুক্ত করবেন?

Weebly এ সম্পদ আপলোড করা হচ্ছে

ধাপ 2 – CSS আপলোড করা

সম্পদ ফোল্ডারে দুটি CSS ফাইল আছে – Bootstrap.css এবং কাস্টম ImageFiltering.css। আপনার Weebly সাইটে "ImageFiltering" ফোল্ডারের অধীনে উভয় CSS ফাইল আপলোড করুন।

ধাপ 3 – স্ক্রিপ্ট ফাইল আপলোড করা

পুরো উইজেটটি ছয়টি বিভিন্ন স্ক্রিপ্ট দ্বারা নিয়ন্ত্রিত হয় যা সম্পদ ফোল্ডারের অধীনেও উপলব্ধ। আপনার Weebly সাইটে "ImageFiltering" ফোল্ডারের অধীনে সমস্ত ছয়টি স্ক্রিপ্ট ফাইল আপলোড করুন।

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

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

  • আপনি নোটপ্যাড বা টেক্সট এডিটের মতো যেকোনো টেক্সট এডিটর দিয়ে "ইমেজ ফিল্টার.এইচটিএমএল" ফাইলটি খোলার মাধ্যমে এইচটিএমএল কোড পেতে পারেন।
  • স্টাইলশীট (প্রথম কয়েকটি লাইন) এবং স্ক্রিপ্ট লিঙ্কগুলি (শেষ কয়েকটি লাইন) মুছুন এবং অবশিষ্ট HTML টি অন্য একটি টেক্সট ফাইলে অনুলিপি করুন।
  • ধাপ 1 থেকে প্রাপ্ত নিজের ইউআরএল দিয়ে প্রতিস্থাপন করুন এবং শিরোনাম/বিবরণ আপনার নিজের সামগ্রী দিয়ে প্রতিস্থাপন করুন।

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

<!-- Filter Buttons --> <div class="portfolio-filter-container margin-top-20"> <ul class="portfolio-filter"> <li class="portfolio-filter-label label label-primary"> filter by: </li> <li> <a href="#" class="portfolio-selected btn btn-default" data-filter="*">All</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".HTML">HTML</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".CSS">CSS</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".JavaScript">JavaScript</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".PHP">PHP</a> </li> </ul> </div> <!-- End Filter Buttons -->

এই ফিল্টার বোতামগুলি নীচে দেখানো হিসাবে উইজেটের উপরে দেখা যাবে:

কিভাবে Weebly সাইটে ইমেজ ফিল্টারিং উইজেট যুক্ত করবেন?

উইজেটে ফিল্টারিং বোতাম

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

<!-- Portfolio Item --> <div class="col-md-4 portfolio-item margin-bottom-40 CSS"> <div> <a href="#"> <h3 class="margin-top-20">This is a CSS filter</h3> <figure> <img src="assets/img/image1.jpg" alt="image1"> <figcaption> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </figcaption> </figure> </a> </div> </div> <!-- End Portfolio Item -->

ফিল্টারিং বিভাগ থেকে সংজ্ঞায়িত বিভাগগুলির মধ্যে আপনার সমস্ত আইটেমগুলি সনাক্ত করা নিশ্চিত করুন।

ধাপ 5 – স্ক্রিপ্ট এবং CSS লিঙ্ক করা

চূড়ান্ত ধাপ হল ধাপ 2 এবং 3 এ আপলোড করা স্ক্রিপ্ট এবং CSS ফাইলগুলিকে আপনার Weebly পৃষ্ঠায় সংযুক্ত করা। স্ক্রিপ্টগুলিকে লিঙ্ক করার জন্য "ফুটার কোড" বিভাগের অধীনে নিচের কোডটি যোগ করুন:

<!-- Scripts --> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="/files/theme/ImageFiltering/scripts.js"></script> <!-- Isotope - Portfolio Sorting --> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.isotope.js" type="text/javascript"></script> <!-- Animate on Scroll--> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.visible.js" charset="utf-8"></script> <!-- Modernizr --> <script src="/files/theme/ImageFiltering/modernizr.custom.js" type="text/javascript"></script> <!-- End Scripts -->

CSS ফাইলগুলিকে লিঙ্ক করতে "হেডার কোড" বিভাগের অধীনে নিচের কোডটি যোগ করুন:

<link rel="stylesheet" href="/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

কর্মক্ষেত্রে ইমেজ ফিল্টারিং উইজেট দেখতে আপনার সাইট প্রকাশ করুন।

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

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