এইচটিএমএলে কীভাবে অনুসন্ধানের স্ট্রিং লিখবেন। ব্রাউজারগুলির জন্য অনুসন্ধান এক্সটেনশনগুলি। পূর্বের টাইপ করা পাঠ্যটি মোছা করে অনুসন্ধানের ক্ষেত্রে "সাফ করুন" ক্রসটি সরান
অনেক লোকের জন্য, ইন্টারনেটে তথ্য অনুসন্ধানের কার্যকারিতা হ'ল নেকড়কে খাওয়ানো খুব পা। আমি বর্তমান এবং আপ টু ডেট তথ্য কোথায় পেতে পারি? কোথায় সস্তা এবং আরও ব্যয়বহুল কিনতে? নির্দিষ্ট কাজ সম্পাদনের জন্য আমি সর্বাধিক সঠিক নির্দেশিকা কোথায় পেতে পারি? অনলাইনে সিনেমা দেখতে কোথায়? ব্যবহারকারীদের এই এবং অনুরূপ প্রশ্নের যথাসম্ভব সঠিকভাবে উত্তর দেওয়ার জন্য, বছরের পর বছর অনুসন্ধান ইঞ্জিনগুলি নির্দিষ্ট ব্যবহারকারী অনুসন্ধানের জন্য অনুসন্ধানের ফলাফলগুলিতে সাইটগুলি উপস্থাপনের জন্য ইতিমধ্যে পরিশীলিত ব্যবস্থার উন্নতি করে। অনুসন্ধান ইঞ্জিনগুলির লক্ষ্য হ'ল লোককে জিজ্ঞাসিত প্রশ্নের উত্তর পেতে সর্বোচ্চ মানের সাইটে নিয়ে যাওয়া।
অনুসন্ধান ইঞ্জিনগুলি ছাড়াও, অনুসন্ধান ইঞ্জিনগুলি নিজেরাই অনুসন্ধান ফিল্টারগুলিতে সজ্জিত থাকে যাতে কোনও ব্যবহারকারীর তথ্যের জন্য অনুসন্ধানটি সংকুচিত করতে বা তাদের অনুরোধটি সঙ্কুচিত করতে পারে।
জনপ্রিয় ব্রাউজারগুলির পরিপূরক করতে পারে এমন কয়েকটি অনুসন্ধান এক্সটেনশনের নীচে বিবেচনা করুন এবং ফলস্বরূপ, ইন্টারনেটে তথ্য অনুসন্ধানের দক্ষতা বাড়িয়ে তুলুন।
গুগল ক্রোমের জন্য অনুসন্ধান এক্সটেনশান
বর্তমান সাইট অনুসন্ধান করুন
প্রতিটি সাইট কোনও অভ্যন্তরীণ অনুসন্ধান ইঞ্জিন দিয়ে সজ্জিত নয় এবং এই জাতীয় সংস্থানগুলিতে আপনাকে নির্দিষ্ট তথ্যের সন্ধানে বিভাগ থেকে বিভাগে দীর্ঘ সময় ধরে চালাতে হবে। সাইটের মধ্যে সন্ধানের জন্য অন্তর্নির্মিত ব্রাউজার এক্সটেনশন হ'ল সর্বজনীন সরঞ্জাম যা আপনি সর্বদা যে সাইটটিতে যান না কেন, সর্বদা হাতের কাছে থাকবে। কোনও সাইটের ভিতরে আপনার প্রয়োজনীয় তথ্য সন্ধান করার জন্য যা করা দরকার তা হ'ল ব্রাউজার বারের এক্সটেনশন বোতামটি ক্লিক করার পরে প্রদর্শিত ছোট্ট অনুসন্ধানের ক্ষেত্রের একটি কীওয়ার্ড প্রবেশ করা।
অনুসন্ধান ইঞ্জিনটির অনুসন্ধানের ফলাফলগুলি একটি নতুন ব্রাউজার ট্যাবে খুলবে এবং তারা একটি নির্দিষ্ট সাইটের পৃষ্ঠাগুলি নির্বাচন করবে যেখানে কীওয়ার্ডটি পাওয়া গেছে।
বর্তমান সাইটটি অনুসন্ধান করুন একটি পূর্বনির্ধারিত গুগল অনুসন্ধান ইঞ্জিন দিয়ে প্রয়োগ করা হয়েছে তবে এক্সটেনশন পরামিতিগুলিতে আপনি অন্য অনুসন্ধান ইঞ্জিন ইনস্টল করতে পারেন - ইয়ানডেক্স, ইয়াহু বা বিং। এটি করতে, এক্সটেনশন বোতামে প্রসঙ্গ মেনুতে কল করুন এবং "পরামিতি" কমান্ডটি নির্বাচন করুন।
এক্সটেনশন বিকল্পগুলি একটি নতুন ব্রাউজার ট্যাবে খুলবে, যেখানে আমরা একটি আলাদা অনুসন্ধান ইঞ্জিন নির্বাচন করতে পারি। এবং ইতিমধ্যে সে সাইটের মধ্যে অনুসন্ধান করবে।
বিকল্প গুগল অনুসন্ধান
ইয়ানডেক্স সার্চ ইঞ্জিন প্রথমে গুগল এবং বিং - - এ ক্লিক করে আরও দুটি সার্চ ইঞ্জিনে তথ্য অনুসন্ধানের সক্ষমতা সরবরাহ করে, যদিও প্রবেশকারী কী ক্যোয়ারী সহ এই অনুসন্ধান ইঞ্জিনগুলিতে যাওয়ার লিঙ্কগুলি অনুসন্ধান ফলাফল পৃষ্ঠার একেবারে নীচে আবদ্ধ থাকে।
তবে গুগল এক্ষেত্রে আরও স্বার্থপর - এর অনুসন্ধান ফলাফলগুলিতে প্রতিযোগী অনুসন্ধান ইঞ্জিনের উল্লেখ নেই। গুগল ক্রোমে "বিকল্প গুগল অনুসন্ধান" এক্সটেনশন প্রয়োগ করে এই পরিস্থিতি সংশোধন করা যেতে পারে।
টরেন্ট ট্র্যাকারদের অনুসন্ধানের ফলাফলগুলি পেতে "টরেন্ট" কীওয়ার্ডটিতে ক্রমাগত পরিশিষ্ট প্রবেশের চেয়ে টিএমএস (টরেন্টস মাল্টি সার্চ) এর জন্য একটি বিশেষ এক্সটেনশন ইনস্টল করা আরও সহজ।
এক্সটেনশন বোতামটি ব্রাউজার টুলবারে এমবেড করা থাকে এবং ক্লিক করা হলে আপনার অনুসন্ধানে প্রবেশের জন্য একটি ছোট অনুসন্ধানের ক্ষেত্র খোলা হবে।
অনুসন্ধানের ফলাফলগুলি একটি পৃথক ট্যাবে উপস্থিত হবে এবং এটি কেবল রানেটের টরেন্ট ট্র্যাকারগুলিতে পাওয়া যাবে, এবং ওয়ারেজনিক সাইটগুলি, সফ্টওয়্যার এবং মিডিয়া পোর্টাল বা অফিসিয়াল সাইটগুলিতে নয় not
টরেন্ট ট্র্যাকারদের অনুসন্ধানের ফলাফলগুলিতে প্রাপ্ত সামগ্রীটি ফাইলের আকার বা এটি আপলোড হওয়ার তারিখে ফিল্টার করা যায়। অতিরিক্ত সংখ্যক কীওয়ার্ড অনুসন্ধান সীমাবদ্ধ করতে নির্দিষ্ট করা যেতে পারে।
অনুসন্ধানের ফলাফলগুলি নির্দিষ্ট টরেন্ট ট্র্যাকারদের জন্য আলাদাভাবে এবং মুভি, সংগীত, সফ্টওয়্যার এর মতো সামগ্রীর ধরণের জন্য পৃথকভাবে দেখা যায়।
এছাড়াও, টিএমএস এক্সটেনশানটি ব্রাউজারের প্রসঙ্গ মেনুতে এম্বেড করা হয় যাতে আপনি অনুলিপি এবং অনুলিপি অনুলিপি টরেন্ট ট্র্যাকারদের অনুসন্ধানের জন্য ইন্টারনেটে পৃষ্ঠাগুলিতে হাইলাইট করা কোনও শব্দ বা বাক্য পাঠাতে পারেন।
প্রাসঙ্গিক অনুসন্ধান
গুগল ক্রোম ডিফল্ট ব্রাউজারে ইনস্টল করা একটি একক অনুসন্ধান ইঞ্জিন ব্যবহার করে প্রাসঙ্গিক অনুসন্ধান ফাংশন প্রয়োগ করেছে। "প্রাসঙ্গিক অনুসন্ধান" এক্সটেনশনটি সাইটের পৃষ্ঠাগুলিতে যে কোনও নির্বাচিত শব্দ অনুসন্ধান করতে ব্যবহৃত হতে পারে এমন সার্চ ইঞ্জিনগুলির সংখ্যা বাড়ানোর উদ্দেশ্যে।
এক্সটেনশানটি প্রাথমিকভাবে সর্বাধিক জনপ্রিয় টরেন্ট ট্র্যাকার রুট্র্যাকার, উইকিপিডিয়া এবং মিডিয়া পোর্টাল কিনপোইস্ক.আরউ অনুসন্ধান করার ক্ষমতা রাখে।
অন্যান্য অনুসন্ধান ইঞ্জিনগুলি, যাতে তাদের মাধ্যমে সরাসরি ব্রাউজার প্রসঙ্গ মেনু থেকে তথ্য অনুসন্ধান করা সম্ভব হয়, এক্সটেনশনের পরামিতিগুলিতে যুক্ত করা হয়। আসুন গুগল ক্রোম মেনু খুলুন, "সেটিংস" নির্বাচন করুন এবং ব্রাউজারে ইনস্টল হওয়া এক্সটেনশনের বিভাগে যান।
এক্সটেনশনের তালিকায় আমাদের যা প্রয়োজন তা নির্বাচন করুন - "প্রসঙ্গ অনুসন্ধান"। "বিকল্পগুলি" লিঙ্কে ক্লিক করুন।
অপেরা জন্য অনুসন্ধান এক্সটেনশান
সাইটের মধ্যে অনুসন্ধান করুন
এক্সটেনশন বোতামটি ব্রাউজারের সরঞ্জামদণ্ডে অবস্থিত এবং এটিতে ক্লিক করে আপনি অনুসন্ধান ক্ষেত্রটিকে একটি মূল জিজ্ঞাসা প্রবেশ করতে, পাশাপাশি অনুসন্ধান ইঞ্জিন পরিবর্তন করতে পারেন।
এক্সটেনশন সেটিংসে পূর্বনির্ধারিত ইয়ানডেক্স এবং গুগল অন্যান্য অনুসন্ধান ইঞ্জিনগুলির সাথে পরিপূরক হতে পারে। এক্সটেনশন বোতামে প্রসঙ্গ মেনুতে কল করুন এবং "সেটিংস" কমান্ডটি নির্বাচন করুন।
গুগল ক্রোমের জন্য "প্রাসঙ্গিক অনুসন্ধান" এক্সটেনশনের ক্ষেত্রে ঠিক একইভাবে, নতুন অনুসন্ধান ইঞ্জিন যুক্ত করতে আপনাকে অবশ্যই এর ইউআরএল স্ট্রিংটি প্রবেশ করতে হবে।
টরেন্টস মাল্টি সার্চ
অনুরূপ চিত্র অনুসন্ধান
অপেরা ব্রাউজার কনটেক্সট মেনুতে বেশ কয়েকটি অনুসন্ধান ইঞ্জিন ব্যবহার করে অনুরূপ চিত্রগুলি অনুসন্ধান করতে অনুরূপ চিত্র অনুসন্ধান অতিরিক্ত কমান্ড যুক্ত করে।
অথবা অনুরূপ ছবি সহ প্রকাশনাগুলির একটি তালিকা উপস্থাপন করা হবে।
মজিলা ফায়ারফক্সের জন্য অনুসন্ধান এক্সটেনশনগুলি
সাইট সার্চ
আগের দুটি ক্ষেত্রে যেমন মোজিলা ফায়ারফক্স ব্রাউজারে ইন্টারনেটে কোনও সাইটের অভ্যন্তরে অনুসন্ধানের জন্য একটি বিশেষ বর্ধিতাংশ উপস্থিত রয়েছে।
কেবল ফায়ার ফক্সের ক্ষেত্রে সাইট অনুসন্ধানটি ব্রাউজারের বিদ্যমান অনুসন্ধান ক্ষেত্রে এম্বেড করা থাকে, সাধারণ অনুসন্ধান আইকনের সামনে একটি লাল ম্যাগনিফাইং গ্লাস আকারে এর আইকন যুক্ত করে।
নিয়মিত মোজিলা ফায়ারফক্স অনুসন্ধানের জন্য ডিফল্ট অনুসন্ধান ইঞ্জিন পরিবর্তন করা সার্চ ইঞ্জিন এবং সাইটের মধ্যে অনুসন্ধানের জন্য উভয়ই পরিবর্তনকে আবশ্যক করে।
সাইট অনুসন্ধান এক্সটেনশানটি মজিলা ফায়ারফক্স প্রসঙ্গ মেনুতে সংহত করে এবং যে শব্দটি হাতে আসে তা নির্বাচন করে পৃথক অনুসন্ধানের ফলাফলগুলিতে আপনি এই শব্দটির উপস্থিত সাইটের সমস্ত পৃষ্ঠা দেখতে পাবেন।
বাইফক্স থেকে অনুসন্ধান করুন
এই জাতীয় "এখনও পরিপক্ক না হওয়া" নামযুক্ত কোনও সফ্টওয়্যার পণ্য, একটি নিয়ম হিসাবে, অনেক ব্যবহারকারীকে এই প্রস্তাব দিয়ে বিরক্ত করে যে তারা প্রস্তাবিত সরঞ্জামগুলির উদ্দেশ্যযুক্ত উদ্দেশ্যটির কোনও ইঙ্গিতও দেখতে পাচ্ছে না।
এবং "বসতি থেকে সফটিনা" বা "পেটিয়ার কাছ থেকে খেলানো রিপ্যাক" ঠিক কী অফার করেছে, আপনাকে বর্ণনার সাথে বিশদ পরিচিত হওয়ার পরেই খুঁজে বের করতে হবে। তবুও, "বাইফক্স থেকে অনুসন্ধান করুন" এর মতো একটি অবুঝ নামের পিছনে থাকা একটি দরকারী এবং বুদ্ধিমান কার্যকারিতা। এই এক্সটেনশনটি আপনাকে বিভিন্ন অনুসন্ধান ইঞ্জিন ব্যবহার করে নির্বাচিত শব্দের জন্য অতিরিক্ত অনুসন্ধান কমান্ড সহ ব্রাউজারের প্রসঙ্গ মেনুটি পূরণ করতে দেয় allows
এই পোস্টটি পূর্ববর্তী নিবন্ধটির একটি ধারাবাহিকতা (অনুবাদ) "গুগল এজেএক্স অনুসন্ধান API এবং jQuery সহ একটি ব্লগ অনুসন্ধান করুন"।
এটি লেখার পরে, আমি পৃথক পৃষ্ঠা বাদে এই জাতীয় ফর্ম এবং ফলাফলের কার্পেট স্থাপন করা কোথায় সবচেয়ে সফল হবে তা নিয়ে ভাবলাম। ধারণাটি আসতে দীর্ঘস্থায়ী হয়নি: পপ-আপ উইন্ডোতে ফলাফল সহ অনুসন্ধান চেষ্টা করা যুক্তিসঙ্গত।
প্রথম ডেমো:
ব্লগ অনুসন্ধান ↓
পপআপ অনুসন্ধানের ভিত্তি হিসাবে, আমি একটি jQuery মডেল প্লাগইন বেছে নিয়েছি প্রকাশ করা ... এটি অপ্রয়োজনীয় উপাদান ছাড়াই এবং সংযোগ করা খুব সহজ weightপ্রকাশ করা ইনস্টল.
স্ক্রিপ্ট এবং শৈলীর লিঙ্কগুলি টেমপ্লেট বিভাগে লিখিত রয়েছে:
প্লাগইন সংরক্ষণাগারে একটি পিএনজি ছবি রয়েছে তা ভুলে যাবেন না, যা আপনাকে আপনার পিকাস অ্যালবামে লাগাতে হবে এবং এতে প্রবেশের পথটি লিখতে হবে প্রকাশ.কম.
পরবর্তী পদক্ষেপটি প্লাগইনটি শুরু করা " সুর" লিপি (একই জায়গায় রাখা):
তারপরে আমরা সংজ্ঞা দিই পপআপ সামগ্রী (আমরা এটি পোস্টের শরীরে রেখেছি):
ব্লগ অনুসন্ধান ↓
এখানে আমরা "Google AJAX অনুসন্ধান API এবং jQuery ব্যবহার করে একটি ব্লগ অনুসন্ধান করুন" নিবন্ধ থেকে সমস্ত অনুসন্ধান কোডগুলি সন্নিবেশ করিয়েছি।
এই কোডের ভিতরে আমার মন্তব্য অনুসারে, সেখানে সম্পূর্ণ "গুগল অনুসন্ধান" অনুলিপি করুন এবং আটকান, যা আমরা এখন সম্পর্কে কথা বলছি। সিএসএস স্টাইলশিটে আপনাকে সাদা বর্গক্ষেত্রের ক্ষেত্রফল বাড়াতে হবে।
এবং শেষ পদক্ষেপটি তিনি নিজেই মডেল লিঙ্ক, যা পাঠ্য এবং গ্রাফিক উভয়ই হতে পারে। কোনও ছবি আকারে লিঙ্ক কোড (পোস্টের মূল অংশেও):
আছে প্রকাশ করা, মডেল প্লাগইন, দুটি ধরণের অ্যানিমেশন রয়েছে: বিবর্ণ এবং fadeAndPop, প্রভাব নিয়মিত গতি: অ্যানিমেশনসপিড: 300, এবং অন্ধকার পটভূমিতে ক্লিক করে পুরো উইন্ডোটি বন্ধ করার ক্ষমতা: ক্লোজোনব্যাকগ্রাউন্ড ক্লিক করুন: সত্য.
এই সেটিংসটি "কনফিগারেশন" স্ক্রিপ্টে লেখা হয়েছে (উপরে দেখুন):
"(" # মাইমোডাল ") প্রকাশ করুন ((অ্যানিমেশন:" fadeAndPop ", // বিবর্ণ, fadeAndPop, কিছুই অ্যানিমেশনস্বরূপ: 300, // কিভাবে অ্যানিমেশনগুলি Cloonbackgroundclick হয়: সত্য, // আপনি ব্যাকগ্রাউন্ডে ক্লিক করলে মডেলটি বন্ধ হয়ে যাবে? খারিজ মডেলক্লাস: "ক্লোজ-প্রকাশ-মডেল" // একটি বাটন বা উপাদানগুলির শ্রেণীর যা একটি উন্মুক্ত মডেল বন্ধ করবে));
অথবা, এই বিকল্পগুলির মাধ্যমে সংযুক্ত করা যেতে পারে লিঙ্ক একটি মডেল উইন্ডোতে (উপরে দেখুন)
এটি বোঝা উচিত যে এর সাথে এই জাতীয় পরিকল্পনা একটি পৃথক উইন্ডো অনুসন্ধান করুন - খাঁটি পরীক্ষা এবং আরও সতর্কতার সাথে কাস্টমাইজেশন প্রয়োজন।
এই টিউটোরিয়ালে, আমরা একটি ড্রপ-ডাউন অনুসন্ধান ফর্ম তৈরি করব যা মোবাইল ইন্টারফেস ডিজাইনের সাথে পুরোপুরি ফিট করে। উপাদানটি বাস্তবায়নের জন্য কেবল সিএসএস ব্যবহার করা হবে - জাভাস্ক্রিপ্ট বা অতিরিক্ত মার্কআপ নেই। একটি কমপ্যাক্ট অনুসন্ধান ফর্মটি কার্যকর করার একটি সহজ এবং কার্যকর উপায়।
নিয়োগ
মোবাইল ডিভাইসে, প্রতিটি পিক্সেল গণনা করা হয়। ফর্মটি প্রদর্শনের জন্য প্রয়োজনীয় জায়গার পরিমাণ হ্রাস করতে, প্রাথমিকভাবে এটি একটি কমপ্যাক্ট ফর্মে প্রদর্শিত হবে এবং ইনপুট ফোকাস (: ফোকাস) পাওয়ার পরে প্রসারিত হবে। এই পদ্ধতির অন্যান্য ইন্টারফেস উপাদান এবং সামগ্রী জন্য স্থান সংরক্ষণ করে।
এইচটিএমএল মার্কআপ
ফর্মটি HTML5 ব্যবহার করে। কোডটি খুব সহজ:
ওয়েবকিট ব্রাউজারগুলিতে অনুসন্ধান ফর্মটির জন্য ডিফল্ট দৃশ্যটি পুনরায় সেট করা
ডিফল্টরূপে, ওয়েবকিট ব্রাউজারগুলিতে, অনুসন্ধান ফর্মটি দেখতে এইরকম দেখাবে:
অনুসন্ধান ফর্মটি নিয়মিত পাঠ্য ইনপুট ক্ষেত্রের মতো দেখতে, আপনাকে নিম্নলিখিত স্টাইলগুলি যুক্ত করতে হবে:
ইনপুট (-ওয়েবেকিট-উপস্থিতি: টেক্সটফিল্ড;-ওয়েবেকিট-বাক্স-সাইজিং: সামগ্রী-বাক্স; ফন্ট-পরিবার: উত্তরাধিকারী; ফন্ট-আকার: 100%;) ইনপুট :: - ওয়েবকিট-অনুসন্ধান-সজ্জা, ইনপুট :: - ওয়েবকিট- অনুসন্ধান-বাতিল বোতাম (প্রদর্শন: কিছুই নয়)
আমরা আমাদের অনুসন্ধান ফর্ম গঠন
ইনপুট ক্ষেত্রে 55px এর নিয়মিত প্রস্থ থাকবে এবং এটি: ফোকাস অবস্থায় 130px এ প্রসারিত হবে। রূপান্তর সম্পত্তি অ্যানিমেশন জন্য ব্যবহৃত হয় এবং বাক্স-ছায়া গ্লো এফেক্টের জন্য ব্যবহৃত হয়।
ইনপুট (ব্যাকগ্রাউন্ড: # এডেড ইউআরএল (img / অনুসন্ধান-আইকন.পিএনজি) নো-রিপিট 9px কেন্দ্র; সীমানা: কঠিন 1px # সিসি; প্যাডিং: 9px 10px 9px 32px; প্রস্থ: 55px; / * ডিফল্ট প্রস্থ * / -উবকিট- সীমানা-ব্যাসার্ধ: 10 মিমি; -মুজ-সীমান্ত-ব্যাসার্ধ: 10 মিম; সীমানা-ব্যাসার্ধ: 10 মিম;-ওয়েবকিট-ট্রানজিশন: সমস্ত .5 এস; -মোজ-ট্রানজিশন: সমস্ত .5 এস; ট্রানজিশন: সমস্ত .5 এস;) ইনপুট: ফোকাস ( প্রস্থ: ১৩০ পিক্স; / * ফোকাসের সাথে প্রস্থ * / ব্যাকগ্রাউন্ড-রঙ: # এফএফ; সীমানা-রঙ: # 6 ডিসিএফ 6; -উবকিট-বক্স-ছায়া: 0 0 5 পিএক্স আরজিবা (109,207,246, .5); -মোজ-বক্স- ছায়া: 0 0 5px rgba (109,207,246, .5); বাক্স-ছায়া: 0 0 5px rgba (109,207,246, .5); / * গ্লো ইফেক্ট * /)
উদাহরণ খ
বি উদাহরণস্বরূপ, অনুসন্ধান ফর্মটি উল্লেখযোগ্যভাবে হ্রাস করা হয়েছে - পাঠ্য পূরণ না করে কেবল আইকন প্রদর্শিত হয়। নোট করুন যে সন্ধান বাক্সের প্যাডিং এবং প্রস্থের বৈশিষ্ট্যগুলি একটি বৃত্তাকার বোতাম গঠনে পরিবর্তিত হয়েছে। পাঠ্যটিকে অদৃশ্য করতে, রঙটি ব্যবহার করুন: স্বচ্ছ সম্পত্তি।
# ডেমো-বি ইনপুট (প্রস্থ: 15px; প্যাডিং-বাম: 10px; রঙ: স্বচ্ছ; কার্সার: পয়েন্টার;) # ডেমো-বি ইনপুট: হোভার (পটভূমি-রঙ: # fff;) # ডেমো-বি ইনপুট: ফোকাস (প্রস্থ : 130px; প্যাডিং-বাম: 32px; রঙ: # 000; পটভূমি-রঙ: # fff; কার্সার: অটো;)
ব্রাউজার সামঞ্জস্য
বর্ণিত পদ্ধতিটি সমস্ত বড় ব্রাউজারগুলিতে কাজ করে: ক্রোম, ফায়ারফক্স, সাফারি এবং আই 8 +। আই 7 এবং পুরানো ব্রাউজারগুলিতে: ফোকাস সিডো-শ্রেণি এবং অনুসন্ধান ক্ষেত্রের ধরণের জন্য সমর্থনটির অভাবের কারণে কার্যকারিতা কাজ করে না।
25 অক্টোবর, 2019 এন্ট্রি আপডেট করা হয়েছে
সাইটে অনুসন্ধান ফর্ম স্লাইডিং
ফ্ল্যাট শৈলী ওয়েবসাইট ডিজাইনে যথেষ্ট জনপ্রিয়তা অর্জন করেছে। এবং এই পাঠে আমরা সাইটের আরও একটি উপাদান দেখব, যা এই স্টাইলে তৈরি করা হয়েছে। এই উপাদানটি অনুসন্ধানের ফর্ম। তবে সহজ নয়, একটি অনুসন্ধান ফর্ম যা ক্লিক করার সময় উপস্থিত হয় এবং যদি ব্যবহার না করা হয় তবে "ধসে পড়ে"। অনুসন্ধান আইকন হিসাবে, এটি একটি এসভিজি ফাইল থেকে আসে এবং বিভিন্ন স্ক্রীন রেজোলিউশন জুড়ে স্কেলযোগ্য (মোবাইল ডিভাইস এবং বড় মনিটরের উভয় ক্ষেত্রে)।
একটি উদাহরণ এখানে দেখা যেতে পারে:
ডাউনলোড করুন
অনুসন্ধান ফর্মটি টানুন
ব্যবহারবিধি?
এইচটিএমএল
প্রথমে, এইচটিএমএল পৃষ্ঠায় থাকা মার্কআপটি সংজ্ঞায়িত করা যাক:
| 1 2 3 4 5 6 7 | <ডিভি আইডি \u003d "এসবি-অনুসন্ধান" শ্রেণি \u003d "এসবি-অনুসন্ধান"\u003e <ফর্ম\u003e <ইনপুট শ্রেণি \u003d "এসবি-অনুসন্ধান-ইনপুট" স্থানধারক \u003d "কি সন্ধান করবে?" প্রকার \u003d "পাঠ্য" মান \u003d "" নাম \u003d "অনুসন্ধান" আইডি \u003d "অনুসন্ধান"\u003e <ইনপুট শ্রেণি \u003d "এসবি-অনুসন্ধান-জমা" টাইপ \u003d "জমা" মান \u003d ""\u003e <স্প্যান শ্রেণি \u003d "এসবি-আইকন-অনুসন্ধান"\u003e </ form\u003e </ div\u003e |
অনুসন্ধান ফর্মটিতে অস্বাভাবিক কিছু নেই: ইনপুটগুলির জন্য একটি পাঠ্য ক্ষেত্র, একটি অনুসন্ধান বোতাম এবং একটি উপাদান আইকন জন্য।
সিএসএস
এখন পৃষ্ঠায় সন্ধান ফর্মটি সুন্দর করার জন্য কিছু স্টাইলিং যুক্ত করা যাক।
যেহেতু এটি ক্লিক করার সময় উপস্থিত হবে, এটি প্রাথমিকভাবে লুকানো রয়েছে। সম্পত্তি ব্যবহার করে এটি করা হয় উপচে পড়াএবং এর অর্থ গোপন, যার ফলস্বরূপ আইকনের বাইরের সমস্ত কিছু গোপন রয়েছে (ফলস্বরূপ, আমরা কেবল আইকনটি দেখি এবং পাঠ্য ক্ষেত্রটি নেই):
| .এসবি-অনুসন্ধান (অবস্থান: আপেক্ষিক; মার্জিন-শীর্ষ: 10 পিক্স; প্রস্থ: 0%; ন্যূন-প্রস্থ: 60px; উচ্চতা: 60px; ভাসা: ডান; ওভারফ্লো: লুকানো; -উইবকিট-ট্রানজিশন: প্রস্থ 0.3s; -মোজ- রূপান্তর: প্রস্থ 0.3s; রূপান্তর: প্রস্থ 0.3s; -উইবকিট-ব্যাকফেস-দৃশ্যমানতা: লুকানো;) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .এসবি-অনুসন্ধান-ইনপুট (অবস্থান: নিখুঁত; শীর্ষ: 0; ডান: 0; সীমানা: কিছুই নয়; রূপরেখা: কিছুই নয়; ব্যাকগ্রাউন্ড: # এসএফএফ; প্রস্থ: 100%; উচ্চতা: 60px; মার্জিন: 0; জেড-ইনডেক্স: 10 ; প্যাডিং: 20px 65px 20px 20px; ফন্ট-পরিবার: উত্তরাধিকারী; ফন্ট-আকার: 20px; রঙ: # 2c3e50;) ইনপুট [প্রকার \u003d "অনুসন্ধান"] s -সীমা-ব্যাসার্ধ: 0px;) |
আমরা অনুরোধের পটভূমিতে থাকা পাঠ্যের রঙ নির্ধারণ করি (অনুসন্ধানের সময় আমরা যে পাঠ্য প্রবেশ করি):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .sb-search-ইনপুট :: -webkit- ইনপুট-প্লেসোল্ডার (রঙ: # efb480;)। এসবি-অনুসন্ধান-ইনপুট: -মোজ-প্লেসোল্ডার (রঙ: # efb480;) .এসবি-অনুসন্ধান-ইনপুট :: -মোজ- স্থানধারক (রঙ: # efb480;)। এসএসবি-অনুসন্ধান-ইনপুট: -এসএস ইনপুট-প্লেসোল্ডার (রঙ: # efb480;) |
অনুসন্ধানের বোতামটি সর্বদা পৃষ্ঠাগুলির বাকি ব্লক এবং উপাদানগুলির উপরে থাকে, তাই আমরা এটিকে একটি বড় মান সেট করি z-index:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .sb- আইকন-অনুসন্ধান (রঙ: # fff; পটভূমি: # e67e22; z-সূচি: 90; হরফ-আকার: 22px; ফন্ট-পরিবার: "আইকামুন"; স্পোক: কিছুই নয়; ফন্ট-শৈলী: স্বাভাবিক; ফন্ট-ওজন : স্বাভাবিক; ফন্ট-রূপ: সাধারণ; পাঠ্য-রূপান্তর: কিছুই নয়; -উইবকিট-ফন্ট-স্মুথিং: অ্যান্টিয়ালিয়াসেড;)। এসবি-আইকন-অনুসন্ধান: পূর্বে (বিষয়বস্তু: " \\ e000 "; } |
এছাড়াও, বিশেষ আইকন (এসভিজি) অন্তর্ভুক্ত করতে ভুলবেন না। অনুসন্ধান বোতামে একটি আইকন সন্নিবেশ করতে:
| 1 2 3 4 5 6 7 8 9 10 | @ ফন্ট-ফেস (হরফ-পরিবার: "আইকামুন"; এসসিআর: ইউআরএল ( "../font/icomoon/icomoon.eot"); src: url ( "../fonts/icomoon/icomoon.eot?#iefix") ফর্ম্যাট ("এমবেডড-ওপেনটাইপ"), ইউআরএল ( "../fouts/icomoon/icomoon.woff") ফর্ম্যাট ("woff"), url ( "../font/icomoon/icomoon.ttf") ফর্ম্যাট ("truetype" স্ক্রিপ্ট\u003e<স্ক্রিপ্ট src \u003d "js / uisearch.js"\u003e <স্ক্রিপ্ট\u003e নতুন ইউআইএসইচ (ডকুমেন্ট.জেটএলিমেন্টবাইআইডি ("এসবি-সন্ধান"));</ স্ক্রিপ্ট\u003e |
উপসংহার
একটি দুর্দান্ত অনুসন্ধান ফর্ম যা সাইটে খুব অল্প জায়গা নেয় এবং আপনি অনুসন্ধান আইকনে ক্লিক করলে সুন্দরভাবে উপস্থিত হয়।
প্যারামিটার কী নাম। অনুসন্ধান ক্ষেত্রের জন্য, "q" বা "পাঠ্য" প্রায়শই ব্যবহৃত হয়। প্যারামিটার কী মান। প্রায়শই এটি জিজ্ঞাসা করা হয় না। পঠনযোগ্য এবং অক্ষম বৈশিষ্ট্যগুলি নির্দিষ্ট না করা থাকলে ব্যবহারকারী এটিকে তার নিজের পাঠ্যে পরিবর্তন করতে পারে। অবরুদ্ধ ব্যবহারকারীর পরিবর্তন অবরুদ্ধ অ্যাক্সেস, ব্যবহারকারীর পরিবর্তন এবং বর্তমান প্যারামিটার ক্ষেত্রের ডেটা স্থানান্তর নিয়মিত এক্সপ্রেশন জেএস হিসাবে খালি ইনপুট টেমপ্লেট হতে পারে না, যা ফর্মটি জমা দিতে হবে ফর্মটি সর্বাধিক সংখ্যক অক্ষর জমা দেওয়ার জন্য প্রয়োজনীয় যা ক্ষেত্রের দৈর্ঘ্য টাইপ করতে পারে প্রতীকগুলিতে হোভার স্বয়ংক্রিয়রূপে ইঙ্গিত-স্থানধারক সরঞ্জামটিপ। আধুনিক ব্রাউজারগুলি বর্তমান ডোমেনে পূর্বে প্রবেশ করা অনুসন্ধানগুলি দেখায়। আপনি এটিকে বন্ধ করতে পারেন বা আরও নির্দিষ্ট করে তুলতে পারেন। ডকুমেন্ট লোড করার সময় প্রস্তাবিত প্রশ্নের বানান এবং ব্যাকরণ চেক করা ক্ষেত্র ফোকাসের তালিকা (এটি একটি উপাদানের উপর ক্লিক করা এবং উপাদানটির বাইরে ক্লিক করার মধ্যবর্তী সময়) প্রাপ্ত
পূর্ববর্তী টাইপ করা পাঠ্যটি মুছে ফেলে অনুসন্ধানের ক্ষেত্রে "সাফ করুন" ক্রসটি সরান
কীভাবে সাইটে অনুসন্ধান ফর্ম কাজ করে
সহজতম HTML কোড
আপনি যদি "প্রশ্ন" ফিল্ডটি টাইপ করেন এবং "সন্ধান করুন" বোতামে ক্লিক করেন, পৃষ্ঠার ঠিকানাটি "http: //site/2011/06/forma-poiska-po-saitu..html থেকে পরিবর্তিত হবে ? পাঠ্য \u003d প্রশ্ন "আপনি যখন কোনও লিঙ্কে ক্লিক করেন তখন এটি ঘটে। পৃষ্ঠাটি লোড হয়ে গেলে, স্ক্রিপ্টটি ইউআরএলে নির্দিষ্ট পরামিতিগুলির উপস্থিতি যাচাই করে এবং যদি খুঁজে পাওয়া যায় তবে উত্স তৈরি করে এবং সাইটে অনুসন্ধানের ফলাফল প্রদর্শন করে।
তবে দস্তাবেজটি লোড করার গতি বাড়ানোর জন্য, স্ক্রিপ্ট যা অনুরোধটি প্রসেস করে, একটি নিয়ম হিসাবে, সাইটের কেবলমাত্র একটি পৃষ্ঠায় স্থাপন করা হয়, যেখানে স্থানান্তরের ব্যবস্থা করা হবে, যদি এর ঠিকানাটি ক্রিয়া বৈশিষ্ট্যে লেখা থাকে: " http: // সাইট / অনুসন্ধান /? পাঠ্য \u003d প্রশ্ন "।
স্ক্রিপ্টটি কাজ করার জন্য, অতিরিক্ত পরামিতিগুলির প্রয়োজন হতে পারে, যা নির্দিষ্ট করা আছে ... এই ক্ষেত্র প্রদর্শিত হয় না।? সার্চিড \u003d 808327& পাঠ্য \u003d প্রশ্ন "।
লক্ষ্য বৈশিষ্ট্যটি ব্যবহার করে একটি নতুন ট্যাবে ফর্মের ফলাফলটি খুলুন
যেখানে সাইট সন্ধানের স্ক্রিপ্ট পাবেন
তুমি ব্যবহার করতে পার
- ইয়ানডেক্স এবং গুগলের বিশেষ পরিষেবাদি দ্বারা প্রদত্ত,
- আপনি যে সিএমএস ব্যবহার করছেন তা এম্বেড হয়েছে (যদি উপলভ্য থাকে), উদাহরণস্বরূপ, "https: // এ ব্লগারে সাইট.ru/ অনুসন্ধান? q \u003d প্রশ্ন ", যেখানে" সাইট.ru "আপনার ব্লগের ঠিকানা দিয়ে প্রতিস্থাপন করা হয়েছে,
- যেমন পিএইচপি-তে স্বতন্ত্রভাবে বিকাশ ঘটে।
সবচেয়ে সহজ বিকল্পটি হ'ল গুগল অনুরোধটি পুনর্নির্দেশ করা:
বোতামে পাঠ্য: "অনুসন্ধান", "অনুসন্ধান", "সন্ধান করুন"
জিজ্ঞাসা শব্দের মধ্যে "সন্ধান করুন" এর একটি নিখুঁত ফর্ম রয়েছে এবং ইঙ্গিত দেয় যে অনুসন্ধান ফলাফলটি অবশ্যই ইতিবাচক হবে।
