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

Weebly তে 3D CSS প্রেস বাটন কিভাবে যোগ করবেন?

0

আমাদের পূর্ববর্তী নিবন্ধে আমরা দেখেছি কিভাবে ডিফল্ট উইবলি বাটন উপাদান যোগ এবং কাস্টমাইজ করা যায় । যদিও বোতামগুলি সংশোধন করা সম্ভব, বিদ্যমান বোতাম শৈলী সম্পাদনা করা একটি জটিল কাজ এবং প্রায়শই আপনার প্রত্যাশা অনুযায়ী কাজ করবে না। সহজ সমাধান হল ওয়েবেলি এম্বেড কোড এলিমেন্ট ব্যবহার করে আপনার নিজস্ব কাস্টম CSS/HTML এম্বেড করা। এম্বেড করার সময় আপনি কাস্টমাইজেশন অপশন পাবেন না, তবে আপনি সহজেই CSS এফেক্ট দিয়ে একটি আকর্ষণীয় বোতাম তৈরি করতে পারেন। Weebly সাইটে কিভাবে 3D CSS প্রেস বাটন যোগ করতে হয় তা এখানে ব্যাখ্যা করি।

3D সিএসএস প্রেস বোতাম

নীচে 3D প্রেস বোতামগুলি কেমন দেখাবে।

Weebly তে 3D CSS প্রেস বাটন কিভাবে যোগ করবেন?

বোতামগুলির নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

  • এমন কোন ছবির প্রয়োজন নেই যা সাইট লোডিং স্পিড এবং ইমেজ তৈরিতে আপনার প্রচেষ্টার উন্নতি ঘটায়।
  • রঙ এবং শৈলীগুলি সহজেই কাস্টমাইজ করা যায় যে কোনও ধরণের থিম এবং লেআউট অনুসারে।
  • আপনি এমবেড কোড এলিমেন্ট ব্যবহার করে HTML এ বোতামের সংখ্যা নিয়ন্ত্রণ করতে পারেন। এর মানে হল আপনি উৎসের CSS একই রেখে বিভিন্ন পৃষ্ঠায় বিভিন্ন সংখ্যক বোতাম রাখতে পারেন।
  • প্রতিটি বাটন আপনার সাইটে একটি একক বা সব পৃষ্ঠার সাথে লিঙ্ক করা যেতে পারে।

Weebly তে 3D CSS প্রেস বাটন কিভাবে যোগ করবেন?

আমরা এখানে ব্যাখ্যা করব কিভাবে উপরের 3 ডি স্টাইলের সাথে 5 টি বোতাম যুক্ত করতে হয়। আপনি বোতাম যোগ বা অপসারণ এবং রঙ এবং শৈলী পরিবর্তন করতে CSS এবং সংশ্লিষ্ট HTML অপসারণ বা যুক্ত করতে পারেন।

ধাপ #1 – বোতাম CSS যোগ করা

প্রথম ধাপ হল আপনি শুধুমাত্র কয়েক পৃষ্ঠায় বা আপনার সাইটে অনেক পৃষ্ঠায় বোতাম যোগ করতে চান কিনা তা নির্ধারণ করা। যদি আপনি কয়েকটি পৃষ্ঠায় যোগ করতে চান তাহলে CSS কোডটি শুধুমাত্র সেই পৃষ্ঠাগুলিতে যোগ করুন "পৃষ্ঠা> একটি পৃষ্ঠা নির্বাচন করুন> SEO সেটিংস> হেডার কোড" নীচে দেখানো হয়েছে:

Weebly তে 3D CSS প্রেস বাটন কিভাবে যোগ করবেন?

পৃষ্ঠায় হেডার কোড যোগ করুন

আপনি যদি একাধিক পৃষ্ঠায় বোতাম যুক্ত করতে চান তাহলে বাহ্যিক স্টাইল শীটে CSS শৈলী যোগ করার এবং পৃষ্ঠার লিঙ্ক যুক্ত করার সুপারিশ করা হয়। Weebly ডিফল্টরূপে প্রতি সাইটের জন্য শুধুমাত্র একটি বাহ্যিক স্টাইল শীট থাকে। "থিম> এডিট HTML / CSS> স্টাইল> main.less" বিভাগে যান। ফাইলটি সনাক্ত করুন এবং অন্যান্য বিদ্যমান কোডগুলির নীচে কোডটি যুক্ত করুন। আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং কোড সম্পাদক থেকে প্রস্থান করুন।

Weebly তে 3D CSS প্রেস বাটন কিভাবে যোগ করবেন?

Weebly এ প্রধান CSS ফাইল সম্পাদনা

কোড এডিটর ব্যবহার করার সময়, আপনাকে একটি কাস্টম নামের থিম সংরক্ষণ করতে হবে। আপনি যদি থিমটি সম্পাদনা করতে না চান তবে "সেটিংস> এসইও> হেডার কোড" বিভাগে যান। এখানে, আপনি CSS কোড যোগ করতে পারেন যা আপনার সাইটের সমস্ত পৃষ্ঠায় প্রয়োগ করা হবে (main.less ফাইল সম্পাদনার অনুরূপ)।

Weebly তে 3D CSS প্রেস বাটন কিভাবে যোগ করবেন?

Weebly সাইট পর্যায়ে হেডার কোড যোগ করুন

এখানে 3D বোতামের জন্য CSS কোড:

<style type="text/CSS"> a.css3dbutton { background: #c1e75c; color: black; text-decoration: none; font: bold 18px Arial; position: relative; display: inline-block; margin-right: 15px; padding: 15px; border-radius: 85px; width: 85px; height: 85px; outline: none; box-shadow: 0 8px 0 #8dab3b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.css3dbutton span.outer{ text-align: center; width: 100%; display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); } a.css3dbutton span.outer span.top{ display: block; padding-bottom: 4px; } a.css3dbutton span.outer span.bottom{ border-top: 1px solid black; padding-top: 4px; display: block; text-transform: uppercase; line-height: 12px; font-size: 60%; } a.css3dbutton:hover { background: #9cc62b; box-shadow: none; -ms-transform: translateY(8px); -webkit-transform: translate3D(0, 8px, 0); -moz-transform: translateY(8px); transform: translate3D(0, 8px, 0); } a.css3dbutton.blue{ background: #a6e9f7; box-shadow: 0 8px 0 #529dad, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.blue:hover { background: #66cbe1; box-shadow: none; } a.css3dbutton.pink{ background: #fbbaba; box-shadow: 0 8px 0 #d74848, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.pink:hover { background: #ea6161; box-shadow: none; } a.css3dbutton.yellow{ background: #f3fa86; box-shadow: 0 8px 0 #dbcd2f, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.yellow:hover { background: #ecd347; box-shadow: none; } a.css3dbutton.brown{ background: #e0c87e; box-shadow: 0 8px 0 #b3805b, 0 0 3px rgba(0,0,0, 0.2), 0 20px 20px #eee; } a.css3dbutton.brown:hover { background: #b3805b; box-shadow: none; } </style>

ওয়েবলিতে সোর্স সিএসএস / এইচটিএমএল কীভাবে সম্পাদনা করবেন সে সম্পর্কে আরও জানুন

ধাপ #2 – HTML কোড যোগ করা

একটি পৃষ্ঠায় একটি এম্বেড কোড এলিমেন্ট টেনে আনুন এবং ড্রপ করুন যেখানে আপনি বোতাম যুক্ত করতে চান এবং নীচের কোডটি ভিতরে পেস্ট করুন। # আপনার নিজের লিঙ্ক দিয়ে প্রতিস্থাপন করতে ভুলবেন না।

<div> <a href="#" class="css3dbutton"> <span class="outer"> <span class="top">Register </span> <span class="bottom">Register here free</span> </span> </a> <a href="#" class="css3dbutton blue"> <span class="outer"> <span class="top">Login</span> <span class="bottom">Login to access</span> </span> </a> <a href="#" class="css3dbutton pink"> <span class="outer"> <span class="top">Sign Up</span> <span class="bottom">Sign up for free</span> </span> </a> <a href="#" class="css3dbutton yellow"> <span class="outer"> <span class="top">Blog</span> <span class="bottom">Subscribe to blog</span> </span> </a> <a href="#" class="css3dbutton brown"> <span class="outer"> <span class="top">Forum</span> <span class="bottom">Read forum posts</span> </span> </a> </div>

ধাপ #3 – বোতামগুলি কাস্টমাইজ করা

আপনার প্রয়োজন অনুসারে বোতামগুলি কাস্টমাইজ করার অফুরন্ত সম্ভাবনা রয়েছে। এখানে কিছু সাধারণ দৃশ্য যা আপনি খুঁজছেন।

বোতাম যুক্ত বা অপসারণ

ধরুন উদাহরণে দেখানো 5 এর পরিবর্তে আপনার কেবল 3 টি বোতাম দরকার। এক্ষেত্রে আপনি CSS এবং HTML উভয় থেকে 4th র্থ এবং ৫ ম বোতামের কোড মুছে ফেলতে পারেন। তবে আমরা সিএসএস -এ সর্বাধিক সংখ্যক শৈলী যুক্ত করার সুপারিশ করব এবং তারপরে এইচটিএমএল -এ বোতামের সংখ্যা নিয়ন্ত্রণ করব। এই পরিস্থিতিতে, যেখানে আপনার কেবল 3 টি বোতাম প্রয়োজন, CSS কোডটি ছেড়ে দিন কারণ এটি 5 টি ভিন্ন শৈলী সংজ্ঞায়িত করেছে এবং শুধুমাত্র 3 টি বোতামের জন্য HTML কোড যুক্ত করুন।

এই পদ্ধতিতে, আপনি এক পৃষ্ঠায় 3 টি বোতাম, অন্য পৃষ্ঠায় 5 টি বোতাম এবং তাই যোগ করতে পারেন।

রঙ এবং আকার কাস্টমাইজ করা

  • আপনি পাঠ্যের রঙ এবং বাটনের বৈশিষ্ট্যগুলির রঙ পরিবর্তন করতে পারেন যেমন ব্যাকগ্রাউন্ড এবং ছায়া।
  • বৃত্তাকার বোতামটি ডিম্বাকৃতি আকার বা অন্য কোন অনুপাতে পরিবর্তন করতে প্রস্থ এবং উচ্চতার বৈশিষ্ট্য পরিবর্তন করুন।

মনে রাখবেন, আপনি বোতামের উপরে এবং নীচে পর্যাপ্ত স্থান যুক্ত করতে স্পেসার উপাদানটি ব্যবহার করতে পারেন । একইভাবে, আপনি স্পেসার ব্যবহার করে অন্য কোনো উপাদানের ডান বা বাম পাশে বোতামটি রাখতে পারেন।

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

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