Skip to main content

Wapkiz এ হাইলাইট ফাইল সিষ্টেম যোগ করার উপায়

হ্যালো বন্ধুরা সবাই কেমন আছো? আপনাকে অবশ্যই ভালো থাকতে হবে।

আপনাকে ভাল হতে হবে কারণ আমি আজ যে বিষয় নিয়ে এসেছি তা দেখে আপনি খুশি হবেন।

আজ আমি আপনার জন্য 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।


The post Wapkiz এ হাইলাইট ফাইল সিষ্টেম যোগ করার উপায় appeared first on Trickbd.com.



source https://trickbd.com/wapka/735004

Comments

Post a Comment

Popular posts from this blog

জনপ্রিয় এনিমে Attack on Titan Season 1 & 2 হিন্দি ডাব | দেখুন ও ডাউনলোড করুন

Attack on Titan (Shingeki no Kyojin) হল এক জনপ্রিয় জাপানি এনিমে, যা বর্তমান সময়ে অনেক জনপ্রিয়। কিছু দিন আগেই এই এনিমেটির সিজন ১ ও ২ এর অফিশিয়াল হিন্দি ডাব রিলিজ হয়েছে। আপনি হিন্দি ডবে এই এনিমেটি দেখতে চান তাহলে এই পোস্টটি আপনার জন্য! এই পোস্টটি থেকে আপনি বিনামূল্য এমিটিকে ডাউনলোড করে দেখতে পারবেন। Attack on Titan Season 1 হিন্দি ডাব Attack on Titan-এর প্রথম সিজনে আমরা দেখি, কীভাবে ইরেন ইয়েগার এবং তার বন্ধুরা ভয়ানক টাইটানদের বিরুদ্ধে লড়াই করে। হঠাৎ এক বিশাল আকারের টাইটান ওয়াল মারিয়া ভেঙে শহরে আক্রমণ চালায়, যা মানবজাতির জন্য এক মারাত্মক হুমকি হয়ে দাঁড়ায়। ইরেন প্রতিজ্ঞা করে, সে সমস্ত টাইটান ধ্বংস করবে এবং মানবতার প্রতিশোধ নেবে। সম্পূর্ণ এনিমেটিকে ডাউনলোড করে বিস্তারির কাহিনি দেখুন। সিজন ১ এর সরাসরি ডাউনলোড লিংক নিচে দিয়ে দিলাম – Pixeldrain Download Link – Zip File (5.30 GB) Mega – Zip FIle Attack on Titan Season 2 হিন্দি ডাব দ্বিতীয় সিজনে গল্প আরও রহস্যময় মোড় নেয়। নতুন নতুন টাইটানদের পরিচয় পাওয়া যায় এবং জানা যায় কিছু পরিচিত চরিত্ররাও আসলে টাইটান রূপান্তরিত। ইরেন ও তার দল মানব...
Post a Comment
Read more

Glutathione – গায়ের রঙ ফর্সা করতে কার্যকারিতা, ব্যবহার এবং সাইড ইফেক্ট সম্পর্কে সবকিছু (Skin health)

আসসালামু আলাইকুম   আজকের আলোচনায় আমরা জানবো Glutathione  এর কার্যকারিতা, ব্যবহার, এবং সাইড ইফেক্ট নিয়ে। আশা করছি আপনাদের জন্য এটি উপকারী হবে।  Glutathione এর কাজ কি? (benefits of glutathione) গ্লুটাথিওয়ন বর্তমান সময়ে, বহুল জনপ্রিয় একটি সাপ্লিমেন্ট ত্বক ফর্সা ও উজ্জ্বল করার জন্য। এছাড়াও গ্লুটাথিওয়ন (Glutathione) নেওয়ার পর শরীরের ইমিউনিটি সিস্টেম বেড়ে যায়, লিভার ডিটক্স (পরিষ্কার হয়) এবং রক্তের বিভিন্ন দুষণ সমস্যা গুলোও ঠিক করে দেয়। দেখা গেছে যে, যাদের মুখের ত্বক, শরীরের অন্যান্য অংশ থেকে, কম উজ্জল হয়ে থাকে তাও এক রকম করে দেয় গ্লুটাথিওয়ন। এক কথায় সারা শরীরের ত্বকের উপর কাজ করে। এছাড়াও আমাদের ত্বক বেশী রোদ্রে যাওয়ার ফলে কালচে (ট্যান) হয়ে যায়, এটাও দ্রুত হিল করে গ্লুটাথিওয়ন। এমনকি শরীরের বিভিন্ন ক্ষত ও দ্রুত সারিয়ে তোলে গ্লুটাথিওয়ন এর পরিমান শরীরে বেশি থাকলে। তবে কসমেটিকস জগতে গ্লুটাথিওয়ন এর একটি ফলাফল হলো স্কিন উজ্জ্বল, ও ২/৩ সেড ফর্সা করা, যার কারনে এটি বহুল পরিচিত। এটি কি সবার জন্য কাজ করে? উত্তর হচ্ছে, অনেকটাই করে। তবে যাদের ত্বক অলরেডি উজ্জ্বল, তাদের ক্ষেত্রে এতট...
Post a Comment
Read more

Capcut এ বাংলাতে লিখতে পারবেন এখন থেকে খুব সহজেই!!

আসসালামু আলাইকুম আশা করি সকলেই অনেক ভালো আছেন। আজকে আবারো আপনাদের মাঝে নতুন একটি আর্টিকেল নিয়ে হাজির হলাম। আজকে আপনাদের সাথে শেয়ার করবো কিভাবে আপনারা Capcut এপ এ বাংলা ফন্ট ব্যবহার কর‍তে পারবেন তাও আবার খুব সহজেই। আশা করবো পোস্টটি আপনাদের কাজে লাগবে। আপনারা জানেন Capcut একটা জনপ্রিয় ভিডিও এডিটিং এপ। ভিডিও এর পাশাপাশি Capcut এর বর্তমান আপডেট গুলোর দরুন এখন ফটো এডিটিং এও এই এপ এর প্রচুর ব্যবহার রয়েছে। এই এপটা খুবই জনপ্রিয় হওয়া সত্ত্বেও এই এপ এ বাংলা ফন্ট ব্যবহার করা যায় না। অনেকেই অনেক ভাবে চেষ্টা করেছেন হয় তো বাংলা ফন্ট ব্যবহার করার, কেউ পেরেছেন কেউ পারেন নি। আজকের পোস্ট টা তাদের জন্য যারা পূর্বে ব্যার্থ হয়েছিলেন। আমি ১০০% গ্যারান্টি দিচ্ছি, আজকের পোস্ট ফলো করলে আপনাদের Capcut এপ এ বাংলা ফন্ট ইউজ করতে কোনো সমস্যাই হবে না।   Capcut এপ এ বাংলা ফন্ট লেখার উপায় Capcut এপ এ বাংলা ফন্ট সরাসরি ব্যবহার করা যাবে না। তবে আপনাদের আমি আজকে যে ট্রিক্স দেখাবো সেটার মাধ্যমে একদম সহজেই Capcut এ আপনারা বাংলা ফন্ট ব্যবহার করতে পারবেন। তো চলুন কথা না বাড়িয়ে এবার মূল কাজে চলে যাই। ১. প্রথমেই Cap...
Post a Comment
Read more