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

Weebly এর জন্য CSS ফ্লোটিং স্লাইডআউট উইজেট

1

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



সামনে যাওয়ার আগে, উইজেটটি কেমন হবে তা নীচে দেওয়া হল। আপনি স্লাইডআউটের ভিতরে নিউজলেটার এলিমেন্ট কোড দিয়ে বাম পাশে ফ্লোটিং সাবস্ক্রাইব বাটন ইমেজ রাখতে পারেন। নিউজলেটার ফর্মটি হোভারে স্লাইডআউট হবে এবং ব্যবহারকারীরা সহজেই সাবস্ক্রাইব করতে পারবেন।

Weebly এর জন্য CSS ফ্লোটিং স্লাইডআউট উইজেট

CSS ফ্লোটিং স্লাইডআউট উইজেট

আপনি স্লাইডআউটের ভিতরে কোন কাস্টম কোড রাখতে পারেন এবং নিচে ব্যবহারের ক্ষেত্রে কিছু উদাহরণ দেওয়া হল:

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

কিভাবে কল টু অ্যাকশন বাটন দিয়ে CSS ফ্লোটিং স্লাইডআউট তৈরি করবেন?

উইজেটটি তিনটি উপাদান দিয়ে তৈরি:

  • একটি চিত্র
  • CSS কোড
  • HTML কোড

1 – চিত্র প্রস্তুত করা হচ্ছে

ডেমো উইজেটে আমরা যে ছবিটি ব্যবহার করেছি তা নীচে। আপনি আনুমানিক 50 x 200 পিক্সেল আকারের অনুরূপ চিত্র প্রস্তুত করতে পারেন।

Weebly এর জন্য CSS ফ্লোটিং স্লাইডআউট উইজেট

মানসম্মত ছবি তৈরির জন্য আপনি স্ন্যাগিট বা ফটোশপের মতো যেকোনো ইমেজ প্রসেসিং টুল ব্যবহার করতে পারেন । অন্যথায় আপনি সমস্ত মাইক্রোসফ্ট পিসিতে অবাধে পেইন্টের মতো সরঞ্জাম ব্যবহার করতে পারেন। এছাড়াও আপনি ইন্টারনেট থেকে ক্রিয়েটিভ কমন্স বাটন ডাউনলোড করতে পারেন যা আপনার সাইটে অবাধে ব্যবহার করা যায়।

একবার ছবিটি প্রস্তুত, আপনার এ "থিম> HTML সম্পাদনা / সিএসএস> সম্পদ" নামক বিভাগে নেভিগেট Weebly সম্পাদক । আপলোড করুন আপনার সাইটে ইমেজ এবং এক্সেস করতে URL চিত্র "কেমন হওয়া উচিত http://yoursite.com/files /theme/image-name.jpg “।

Weebly এর জন্য CSS ফ্লোটিং স্লাইডআউট উইজেট

Weebly সাইটে ছবি আপলোড করা হচ্ছে

2 – CSS কোড

উইজেট ব্যবহার করার দুটি উপায় আছে – একটি হল সাইট চওড়া রাখা যাতে উইজেটটি আপনার সাইটের সব পৃষ্ঠায় প্রদর্শিত হয় এবং দ্বিতীয়টি হল উইজেটটি শুধুমাত্র আপনার উইবলি সাইটের নির্দিষ্ট পাতায় রাখা।

বিস্তৃত সাইটের জন্য, নীচের কোডটি অনুলিপি করুন, আপনার Weebly সাইটের "সেটিংস> এসইও> হেডার কোড" বিভাগে পেস্ট করুন এবং আপনার পরিবর্তনগুলি সংরক্ষণ করুন। পৃষ্ঠা স্তরের জন্য, "পৃষ্ঠা> পৃষ্ঠা নির্বাচন করুন> এসইও সেটিংস> হেডার কোড " বিভাগে CSS কোড পেস্ট করুন ।

<style type="text/css"> /* Slideout outer button */ #slideout { position: fixed; z-index: 1; top: 80px; left: 0; padding: 25px 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } /* Slideout inner widget area */ #slideout_inner { position: fixed; top: 80px; left: -305px; background: #ffeb3b; width: 250px; padding: 25px; height: 200px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; } /* Hover alignment */ #slideout:hover { left: 300px; } #slideout:hover #slideout_inner { left: 0; } </style>

3 – এইচটিএমএল কোড

সাইটের যেকোনো জায়গায় একটি "এম্বেড কোড" উপাদান টেনে আনুন এবং নীচের HTML কোডটি সন্নিবেশ করান:

<div id="slideout"> /* Insert Weebly Image */ <img src="Your Weebly Image URL" alt="Subscribe" /> <div id="slideout_inner"> <div> /* Insert Code for Content Shown in Slideout */ </div> </div> </div>

যদি আপনার CSS সাইট লেভেলে কার্যকর হয় তাহলে HTML কোড আপনার সাইটের যে কোন পেজে এম্বেড করা যাবে। যদি আপনার CSS কোডটি শুধুমাত্র নির্দিষ্ট পৃষ্ঠায় কার্যকর হয় তাহলে সেই নির্দিষ্ট পৃষ্ঠায় HTML কোড সন্নিবেশ করান।

এইচটিএমএল কোডের দুটি অংশ রয়েছে:

  • ছবি – ধাপ 1 থেকে আপনার নিজের ওয়েবলি সাইটের ইমেজ ইউআরএল যোগ করুন।
  • স্লাইডআউটে উইজেট কোড দেখানো হবে। এখানে আপনি যেকোনো তৃতীয় পক্ষের এম্বেড কোড যেমন আছে তেমন যুক্ত করতে পারেন। আপনি যদি উইবলির ডিফল্ট উপাদান যেমন নিউজলেটার বা যোগাযোগ ফর্ম ব্যবহার করতে চান তাহলে আরও পড়ুন।

এইচটিএমএল কোড অফ ডিফল্ট উইবলি এলিমেন্ট পাওয়া

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

Weebly এর জন্য CSS ফ্লোটিং স্লাইডআউট উইজেট

নিউজলেটার এলিমেন্ট কোড কপি করা হচ্ছে

কোডের উপর ঘুরুন এবং নিউজলেটার উপাদান সম্পর্কিত কোডের সম্পূর্ণ ব্লকটি অনুলিপি করুন। ক্রোমের মতো ব্রাউজারে, আপনি কেবল প্রথম ডিভ ট্যাগে ক্লিক করতে পারেন এবং "কন্ট্রোল + ভি" বা "কমান্ড + ভি" টিপতে পারেন। এটি নির্বাচিত নিউজলেটার উপাদানটির জন্য কোডের সম্পূর্ণ ব্লক কপি করবে। গুগল ক্রোমে কীভাবে সোর্স কোড দেখতে হয় সে সম্পর্কে আরও জানুন । স্লাইডআউট উইজেটের জন্য HTML কোডের ভিতরে এই কোডটি ব্যবহার করুন এবং সম্পূর্ণ HTML কোডটি নীচের মত দেখাবে:

<div id="slideout"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88392-61320d0b64b6e.png" alt="Subscribe" /> <div id="slideout_inner"> /* START OF NEWSLETTER ELEMENT CODE */ <div> <form enctype="multipart/form-data" action="https://widgetcode.weebly.com/ajax/apps/formSubmitAjax.php" method="POST" id="form-100440182464484169" accept-charset="UTF-8" target="form-100440182464484169-target-1480443240994"> <div id="100440182464484169-form-parent" class="wsite-form-container" style="margin-top:10px;"> <ul class="formlist" id="100440182464484169-form-list"> <div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;"> <label class="wsite-form-label" for="input-885026583907653749">Email <span class="form-required">*</span></label> <div class="wsite-form-input-container"> <input id="input-885026583907653749" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="_u885026583907653749"> </div> <div id="instructions-885026583907653749" class="wsite-form-instructions" style="display:none;"></div> </div></div> </ul> </div> <div style="display:none; visibility:hidden;"> <input type="text" name="wsite_subject"> </div> <div style="text-align:center; margin-top:10px; margin-bottom:10px;"> <input type="hidden" name="form_version" value="2"> <input type="hidden" name="wsite_approved" id="wsite-approved" value="approved"> <input type="hidden" name="ucfid" value="100440182464484169"> <input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px"><a class="wsite-button" onclick="document.getElementById('form-100440182464484169').submit()"><span class="wsite-button-inner">Subscribe to Newsletter</span></a> </div> </form><iframe name="form-100440182464484169-target-1480443240994" id="form-100440182464484169-target-1480443240994" style="display: none;"></iframe> </div> /* END OF NEWSLETTER ELEMENT CODE */ </div> </div>

আপনি উপরে বর্ণিত অনুরূপ পদ্ধতিতে যোগাযোগ এবং আরএসভিপি ফর্ম ব্যবহার করতে পারেন । আপনার সাইট থেকে মূল নিউজলেটার বা কন্টাক্ট ফর্ম এলিমেন্ট না মুছে ফেলার বিষয়টি নিশ্চিত করুন, যদি আসল ফর্মটি মুছে ফেলা হয় তাহলে উইজেটের ভিতরে এমবেডেড কোড কাজ করবে না। একটি সাইট বিস্তৃত বাস্তবায়নের জন্য, আপনি সাইটের ফুটার লেআউটে HTML কোড যোগ করতে পারেন যাতে আপনাকে প্রতিটি একক পৃষ্ঠায় কোডটি এম্বেড করার প্রয়োজন না হয়।

উইজেট কাস্টমাইজ করা

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

  • স্থির উচ্চতা – ভাসমান বোতামের স্থায়ী উচ্চতা 80px যা #slideout এবং #slideout_inner CSS ক্লাসে "শীর্ষ" ব্যবহার করে সংজ্ঞায়িত করা হয়েছে। আপনি আপনার প্রয়োজন অনুযায়ী যে কোন প্রয়োজনীয় উচ্চতায় পরিবর্তন করতে পারেন।
  • স্লাইডআউটের প্রস্থ – স্লাইডআউট প্রস্থ মোট 300px হিসাবে সংজ্ঞায়িত করা হয়। আপনি #slideout, #slideout_inner এবং slideout: hover CSS ক্লাসে "বাম" প্যারামিটার পরিবর্তন করে প্রস্থ সামঞ্জস্য করতে পারেন।
  • রং – #slideout_inner ক্লাসে "পটভূমি" পরিবর্তন করে স্লাইডআউট রঙ সামঞ্জস্য করুন।
  • স্লাইডআউট ইমেজ এবং উইজেট – আপনি উপরে বর্ণিত হিসাবে নিউজলেটার এলিমেন্টের পরিবর্তে আপনার নিজের কোন ইমেজ ব্যবহার করতে পারেন এবং যেকোন তৃতীয় পক্ষের উইজেট কোড এম্বেড করতে পারেন।

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

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