হ্যালো বন্ধুরা সবাই কেমন আছো? আপনাকে অবশ্যই ভালো থাকতে হবে।
আপনাকে ভাল হতে হবে কারণ আমি আজ যে বিষয় নিয়ে এসেছি তা দেখে আপনি খুশি হবেন।
আজ আমি আপনার জন্য wakkiz এ হাইলাইট সিস্টেম টপ ফাইল দেখানোর কোড নিয়ে এসেছি।
এই সিস্টেমটি নিচের ছবির মত দেখাচ্ছে।
কেন হাইলাইট যোগ করুন?
কারণ হাইলাইট করার মাধ্যমে আপনি আপনার সাইটের ফাইলগুলো একটি নির্দিষ্ট সিস্টেমে ব্যবহারকারীদের সামনে উপস্থাপন করতে পারেন।
এবং আপনি আপনার সাইট পরিচালনায় একটি নতুন আনন্দ পাবেন কারণ সবাই নতুন কিছু পছন্দ করে।
এমনকি এই সিস্টেমে আপনার অর্থ দ্বিগুণ হবে।
আপনার যা কিছু যোগ করতে হবে:
- এইচটিএমএল,
- জাভাস্ক্রিপ্ট,
- এবং CSS
আপনার ওয়াপকিজ সাইটে সিস্টেম যুক্ত করতে নিচের ধাপগুলো অনুসরণ করুন।
ধাপ 1 :
আপনার সাইটের হেডারে এই CSS যোগ করুন।
আপনি চাইলে CSS অপশনও যোগ করতে পারেন।
* {box-sizing: border-box}body {font-family: Verdana, sans-serif; margin:0}.mySlides {display: none}img {vertical-align: middle;}/* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto;}/* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}/* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px;}/* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);}/* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}/* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}/* The dots/bullets/indicators */.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}.active, .dot:hover { background-color: #717171;}/* Fading animation */.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1}}@keyframes fade { from {opacity: .4} to {opacity: 1}}/* On smaller screens, decrease text size */@media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px}}
ধাপ ২ :
এই হাইলাইটিং কোডটি যোগ করুন যেখানে আপনি হাইলাইটটি দেখাতে চান।
FM কোডটি এখানে দেওয়া যাচ্ছে না।
দুঃখিত! কোডটি এখানে দেওয়া যাচ্ছে না।
অনুগ্রহ করে গুগল ড্রাইভ থেকে ডাউনলোড করে নিনঃFm code download
কোডটি পরিবর্তন না করলে কাজ নাও হতে পারে।
শেষ ধাপ:
এই জাভাস্ক্রিপ্ট যোগ করুন।
var slideIndex = 1;showSlides(slideIndex);function plusSlides(n) { showSlides(slideIndex += n);}function currentSlide(n) { showSlides(slideIndex = n);}function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";}
জাভাস্ক্রিপ্টের কোনো অংশ মেজাজ করার চেষ্টা করবেন না।
আপনার কাজ শেষ
এখন সাইট ভিজিট করুন আর দেখুন।
যদি কোন অংশ বুঝতে সমস্যা হয়, আপনি মন্তব্য করতে পারেন এবং আমি এটি সমাধান করার চেষ্টা করব।
বন্ধুরা,প্রতিদিন ওয়েব ডিজাইনিং কোড পোস্ট পেতে ট্রিকবিডি ভিজিট করুন।
আপনি যদি আরো কোড চান, প্রতিদিন আমাদের সাইটে যানMy Blog Site।
পরিবর্তন করলে কাজ করতে না পারে।