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

Weebly জন্য বিনামূল্যে Nivo স্লাইডার উইজেট

0

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

নিভো স্লাইডার উইজেটের বৈশিষ্ট্য

নীচে Weebly এর জন্য নিভো স্লাইডার ফ্রি উইজেটের কিছু হাইলাইট রয়েছে:

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

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

ডেমো স্লাইডারের চারটি ছবি আছে এবং HTML কোডে প্রতিটি ছবির জন্য আলাদাভাবে সংজ্ঞায়িত ট্রানজিশন ইফেক্ট ব্যবহার করে। দ্বিতীয় ছবিটি (up.jpg) নীচে একটি ক্যাপশন পাঠ্য সহ একটি ওয়েবপৃষ্ঠার সাথে সংযোগ স্থাপনের জন্য একটি লিঙ্ক হিসাবে ব্যবহৃত হয়। চতুর্থ ছবিতে (nemo.jpg) HTML লিঙ্ক সহ একটি ক্যাপশন আছে।

ধাপ 1 – ছবি প্রস্তুত করুন

যেকোনো স্লাইডশোর প্রথম ধাপ হল ছবিগুলি প্রস্তুত করা। ডেমোতে আমরা 618 x 246 px সাইজের প্রতিটি 4 টি ছবি ব্যবহার করেছি। আমরা উন্নত মানের জন্য উচ্চ আকারের চিত্রগুলির সাথে অনুরূপ অনুপাত ব্যবহার করার পরামর্শ দিই।

ধাপ 2 – স্লাইডার ফাইল ডাউনলোড করুন

নিভো স্লাইডারের জন্য প্রয়োজনীয় সমস্ত ফাইল ডাউনলোড করতে নীচের বোতামে ক্লিক করুন, এতে ডেমো উদ্দেশ্যে ব্যবহৃত চারটি চিত্র অন্তর্ভুক্ত রয়েছে।

সমস্ত নিভো স্লাইডার ফাইল ডাউনলোড করুন

জিপ আর্কাইভ ফাইলটিতে নীচের মত 12 টি ফাইল রয়েছে:

নেভিগেশনাল ছবি

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • loading.gif

স্ক্রিপ্ট:

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

স্টাইলশীট:

  • theme-styles.css

ডেমো ছবি:

  • toystory.jpg
  • up.jpg
  • walle.jpg
  • nemo.jpg

আপনি ডেমো ইমেজ মুছে ফেলতে পারেন এবং আপনার নিজের ওয়েবলি সাইটে ব্যবহার করতে পারেন।

ধাপ 3 – স্লাইডার ফাইল আপলোড করুন

আপনার Weebly অ্যাকাউন্টে লগইন করুন এবং নিভো স্লাইডার যুক্ত করতে চান এমন সাইট সম্পাদনা করুন। "থিম> এইচটিএমএল /সিএসএস সম্পাদনা করুন" এ যান এবং "সম্পদ" বিভাগে যান। + বোতামে ক্লিক করুন এবং তারপরে একটি নতুন ফোল্ডার তৈরি করুন।

Weebly জন্য বিনামূল্যে Nivo স্লাইডার উইজেট

Weebly কোড এডিটরে নতুন ফোল্ডার তৈরি করা হচ্ছে

এই উদাহরণে, আমরা "nivo" নামে একটি ফোল্ডার তৈরি করি এবং ধাপ 2 এ ডাউনলোড করা 12 টি ফাইল আপলোড করি।

Weebly জন্য বিনামূল্যে Nivo স্লাইডার উইজেট

Weebly এ ফাইল আপলোড করা হচ্ছে

ধাপ 4 – পৃষ্ঠায় কোড োকানো

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

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

সুন্দর নিভো স্লাইডার দেখতে আপনার সাইটটি প্রকাশ করুন।

যদিও উপরের কোডটি "এম্বেড কোড" উপাদান ব্যবহার করে সন্নিবেশ করা যেতে পারে, তবে "পৃষ্ঠাগুলি> আপনার পৃষ্ঠা> এসইও সেটিংস> হেডার কোড" বিভাগের অধীনে সিএসএস লিঙ্ক যুক্ত করার সুপারিশ করা হয়।

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

এবং জাভাস্ক্রিপ্ট "পৃষ্ঠা> আপনার পৃষ্ঠা> এসইও সেটিংস> পাদলেখ কোড" বিভাগের অধীনে।

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

মনে রাখবেন ইমেজ ইউআরএলগুলি আপনার নিজের সাথে প্রতিস্থাপন করুন।

লেভেল স্লাইডার কাস্টমাইজ করা

ছবির জন্য ট্রানজিশন ইফেক্ট

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

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

স্লাইডারগুলিতে প্রতিটি ইমেজের জন্য বিভিন্ন 12 টি ডেটা ট্রানজিশন প্যারামিটার মান ব্যবহার করতে পারেন:

  • স্লাইসডাউন রাইট
  • sliceDownLeft
  • স্লাইস আপ রাইট
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • ভাঁজ
  • বিবর্ণ
  • বক্স র্যান্ডম
  • বাক্স বৃষ্টি
  • বক্স রেইন রিভার্স
  • বক্স রেনগ্রো
  • boxRainGrowReverse

বিভিন্ন থিম ব্যবহার করে

স্লাইডারের থিম সংজ্ঞায়িত করা হয়েছে CSS ক্লাস “theme-NAME" ব্যবহার করে। উপরের উদাহরণে, বার থিমটি "থিম-বার" হিসাবে ব্যবহৃত হয়েছিল। আপনি নীচের মত থিমের নাম প্রতিস্থাপন করে 4 টি থিমের একটি ব্যবহার করতে পারেন:

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

শৈলী কাস্টমাইজ করা

স্লাইডারের জন্য ব্যবহৃত সমস্ত স্টাইল "theme-styles.css" ফাইলে সংজ্ঞায়িত করা হয়েছে। এটিতে চারটি থিম এবং স্লাইডার মোড়কের জন্য স্টাইল সেট রয়েছে। আপনি সেই ফাইলের ক্যাপশনের জন্য প্রস্থ, ফন্ট সাইজ এবং রঙ সমন্বয় করতে পারেন।

স্ক্রিপ্ট কাস্টমাইজ করা

এই স্লাইডারে মূলত দুটি স্ক্রিপ্ট ব্যবহার করা হয় – একটি হল Google jQuery লাইব্রেরি এবং অন্যটি MIT লাইসেন্সের অধীনে বিতরণ করা কাস্টম নিভো স্লাইডার স্ক্রিপ্ট। স্লাইডার নিয়ন্ত্রণের জন্য সমস্ত মৌলিক ভেরিয়েবলগুলি "// ডিফল্ট সেটিংস" বিভাগের অধীনে "jquery.nivo.slider.nod.js" ফাইলে নীচে সংজ্ঞায়িত করা হয়েছে:

  • প্রভাব: ‘এলোমেলো’ – ডিফল্টরূপে এলোমেলো রূপান্তর প্রভাব প্রয়োগ করা হবে
  • টুকরা: 15 – চিত্রটি 15 টুকরো করা হয়েছে
  • boxCols: 8 – ছবিটি 8 টি কলামে বিভক্ত
  • boxRows: 4 – ছবিটি 4 সারিতে বিভক্ত
  • animSpeed: 500 – অ্যানিমেশনের গতি হল ডিফল্ট 500 ms, কমিয়ে আনুন দ্রুত স্থানান্তর
  • pauseTime: 3000 – 3000 ms এ স্লাইডের মধ্যে সময় বিরতি দিন
  • startSlide: 0 – Starting slide হল প্রথম (0) স্লাইড
  • দিকনির্দেশনা: সত্য – দিকনির্দেশ নেভিগেশন বোতামগুলি দেখান (লুকানোর জন্য মিথ্যা)
  • controlNav: সত্য – নিয়ন্ত্রণ নেভিগেশন বুলেট দেখান (লুকানোর জন্য মিথ্যা)
  • controlNavThumbs: মিথ্যা – বুলেটের পরিবর্তে নেভিগেশন থাম্বনেল লুকান (দেখানোর জন্য সত্য)
  • pauseOnHover: true – স্লাইডশোটি থামান যখন ইমেজটিতে মাউস থাকে
  • ম্যানুয়াল অ্যাডভান্স: মিথ্যা – ডিফল্ট স্বয়ংক্রিয় ঘূর্ণন সক্ষম করে, আপনি ইমেজগুলির ম্যানুয়াল মুভিং সক্ষম করতে পারেন
  • prevText: ‘Prev’ – আগের ছবির টেক্সট
  • nextText: ‘Next’ – পরবর্তী ছবির টেক্সট
  • randomStart: false – র্যান্ডম স্টার্ট নিষ্ক্রিয়

দ্রষ্টব্য: দয়া করে "jquery.nivo.slider.nod.js" ফাইল থেকে কপিরাইট মন্তব্যগুলি সরান না। আমরা বুঝতে পারি যে আসল বিকাশকারী "Dev7Studios" আর বিদ্যমান নেই এবং সাইটটি একটি ওয়ার্ডপ্রেস প্লাগইন -এ পুন redনির্দেশিত হচ্ছে। কিন্তু রেফারেন্সের জন্য বিজ্ঞপ্তিটি অক্ষত রাখুন। যেহেতু $ ফাংশন Weebly তে আর সমর্থিত নয়, আমরা jQuery দিয়ে স্ক্রিপ্টের সমস্ত $ প্রতিস্থাপন করেছি।

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

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