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

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

1

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

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

এই উদাহরণে, আমরা চারটি ছবি ব্যবহার করেছি। দ্বিতীয় ছবি (up.jpg) একটি ওয়েবপৃষ্ঠার সাথে সংযুক্ত এবং একটি সাধারণ পাঠ্য ক্যাপশন রয়েছে। চতুর্থ ছবিতে (nemo.jpg) একটি হাইপারলিঙ্ক সহ টেক্সট ক্যাপশন আছে।

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

উপরের ডেমোগুলি প্রতিক্রিয়াশীল “Ace Soccer – Birdseye" Weebly থিম ব্যবহার করছে এবং ছবিগুলি 618 x 246 px সাইজের ব্যবহার করা হয়েছে। আমরা উন্নত মানের জন্য অনুরূপ প্রস্থ এবং উচ্চতা অনুপাত সহ উচ্চ রেজোলিউশনের ছবি ব্যবহার করার সুপারিশ করছি।

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

সমস্ত প্রয়োজনীয় স্লাইডার ফাইল ডাউনলোড করুন । Weebly সাইটে লগইন করুন এবং "থিম> HTML / CSS> সম্পদ সম্পাদনা করুন" বিভাগে যান। "নিভো" নামে একটি নতুন ফোল্ডার তৈরি করুন।

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

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

সমস্ত স্লাইডার ফাইল "nivo" ফোল্ডারে আপলোড করুন। মনে রাখবেন আর্কাইভ ফাইলের চারটি ডেমো ইমেজ অংশ আছে, আপনি সবসময় আপনার নিজের ছবি দিয়ে ছবিগুলি প্রতিস্থাপন করতে পারেন।

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

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

"হেডার টাইপ" ট্যাবের বিপরীতে + বোতামে ক্লিক করুন এবং "নিভো-বার" নামে একটি নতুন হেডার টাইপ তৈরি করুন। আমরা এই হেডার টাইপে বার থিম সহ নিভো হেডার স্লাইডশো যোগ করতে চাই।

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

নতুন হেডার টাইপ তৈরি করা হচ্ছে

"No-header.html" থেকে সমস্ত বিষয়বস্তু কপি করুন এবং "Nivo-Bar.html" হেডার টাইপের ভিতরে পেস্ট করুন।

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

স্লাইডশোর জন্য নতুন শিরোনামের ধরন

"Nivo-Bar.html" লেআউটে তিনটি অংশ যোগ করতে হবে-CSS, স্ক্রিপ্ট এবং HTML। লেআউটের হেড সেকশনের ভিতরে নিচের CSS োকান।

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

এটি সম্পাদকের নীচের মত হওয়া উচিত:

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

হেডার টাইপে CSS tingোকানো

বডি ট্যাগ বন্ধ হওয়ার ঠিক আগে নিচের স্ক্রিপ্টগুলো োকান।

<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-bar"> <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>

এটি সম্পাদকের নীচের মত হওয়া উচিত:

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

হেডার টাইপে HTML erোকানো

"Nivo-Bar.html" শিরোনামের চূড়ান্ত কোডটি নীচের মত হওয়া উচিত। মনে রাখবেন এটি একটি বিনামূল্যে Weebly সাইটে এবং আমরা যে থিমটি ব্যবহার করেছি তা হল "Ace Soccer – Birdseye"।

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> </head> <body class='no-header-page page-has-banner wsite-theme-dark'> <div class="wrapper"> <div class="birdseye-header"> <div class="nav-wrap"> <div class="container"> <div class="logo">{logo}</div> <div class="nav desktop-nav">{menu}</div> <label class="hamburger"><span></span></label> </div> </div> </div> <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" /> <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> <div class="main-wrap"> {{#sections}} <div class="container">{content}</div> {{/sections}} </div> <div class="footer-wrap"> <div class="container"> <div class="footer">{footer}</div> </div><!-- end container --> </div><!-- end footer-wrap --> </div><!-- /.wrapper --> <div id="navMobile" class="nav mobile-nav"> <label class="hamburger"><span></span></label> {menu} </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> <script type="text/javascript" src="/files/theme/plugins.js"></script> <script type="text/javascript" src="/files/theme/custom.js"></script> </body> </html>

পরিবর্তনগুলি সংরক্ষণ করুন এবং আপনার সাইটটি প্রকাশ করুন।

যখন আপনি একটি পৃষ্ঠায় শিরোনাম স্লাইডশো চান তখন সেই নির্দিষ্ট পৃষ্ঠার জন্য "পৃষ্ঠাগুলি" ট্যাবের অধীনে "নিভো-বার" শিরোনাম টাইপ নির্বাচন করুন।

কিভাবে ফ্রি উইবলি সাইটে হেডার স্লাইডশো তৈরি করবেন?

নির্দিষ্ট পৃষ্ঠার জন্য হেডার টাইপ নির্বাচন করা

স্লাইডশোটি 4 টি ভিন্ন থিম এবং 12 ইমেজ ট্রানজিশন ইফেক্টের সাথে দেওয়া হয়েছে। HTML কোডে CSS ক্লাস পরিবর্তন করে থিম পরিবর্তন করা যায়। উপরের উদাহরণে, আমাদের CSS ক্লাস "থিম-বার" সহ ব্যবহারকারী বার থিম আছে, আপনি বিকল্পভাবে "থিম-ডিফল্ট", "থিম-ডার্ক" বা "থিম-লাইট" ব্যবহার করতে পারেন। আপনি চারটি ভিন্ন শিরোনাম তৈরি করতে পারেন এবং বিভিন্ন পৃষ্ঠার জন্য প্রয়োজনীয় থিম শৈলী নির্বাচন করতে পারেন।

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

<div class="slider-wrapper theme-default"> <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="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>

আপনি ট্রানজিশন ইফেক্ট, থিম, অ্যানিমেশন স্পিড, নেভিগেশন কন্ট্রোল এবং থাম্বনেইল যোগ করার জন্য সম্পূর্ণ কাস্টমাইজেশন অপশন পড়তে পারেন ।

নিচে দেখানো হিসাবে অ্যাকর্ডিয়ন স্টাইল স্লাইডার খুঁজছেন? আপনার Weebly সাইটে অ্যাকর্ডিয়ন স্লাইডার কিভাবে যোগ করবেন তা শিখুন ।

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

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