ব্লগে যুক্ত করুন আকর্ষণীয় সার্চ বক্স
অনেক দিন পর ব্লগ সাইট নিয়ে টিউন লিখতে বসলাম আজকে ব্লগার ভাই দেড় জন্য নিয়ে আসলাম একটি স্টাইলিশ সার্চ বক্স।
আসুন আমরা প্রথমেই বুঝার চেষ্টা করি আমাদের সার্চ বক্স কেন প্রয়োজন।
বিশেষ করে একটি বড় মাপের ব্লগ সাইটের জন্যই একটি সার্চ বক্স দরকার কেননা একটি বড় মাপের ব্লগ সাইটে অনেক আর্টিকেল থাকে আর কোন একটি নির্দিষ্ট আর্টিকেল খুঁজতে ভিজিটররা সাধারণত সার্চ বক্স ব্যবহার করে থাকেন।
যদিও ব্লগ সাইট তৈরি করলে একটি ডিফল্ট সার্চ বক্স পাওয়া যায় কিন্তু যারা প্রফেশনাল ভাবে ব্লগিং করে থাকেন তারা তাদের ব্লগ সাইটকে সাজাতে বিভিন্ন ধরনের টেমপ্লেট ব্যবহার করে থাকে যার ফলে ব্লগের ডিফল্ট সার্চ বক্সটি এইসব টেমপ্লেট এর সাথে মানানসই হয়না আর তাই প্রয়োজন পরে স্টাইলিশ কোন সার্চ বক্সের।
যাহোক অনেক বক বক করে ফেললাম এবার কাজের কথায় আসি আজকে আপনাদের জন্য নিয়ে আসলাম দারুণ একটি স্টাইলিশ সার্চ বক্স।
চলুন দেখে আসি কিভাবে এই সার্চ বক্সটি আপনি আপনার ব্লগে যুক্ত করবেন।
আসুন আমরা প্রথমেই বুঝার চেষ্টা করি আমাদের সার্চ বক্স কেন প্রয়োজন।
বিশেষ করে একটি বড় মাপের ব্লগ সাইটের জন্যই একটি সার্চ বক্স দরকার কেননা একটি বড় মাপের ব্লগ সাইটে অনেক আর্টিকেল থাকে আর কোন একটি নির্দিষ্ট আর্টিকেল খুঁজতে ভিজিটররা সাধারণত সার্চ বক্স ব্যবহার করে থাকেন।
যদিও ব্লগ সাইট তৈরি করলে একটি ডিফল্ট সার্চ বক্স পাওয়া যায় কিন্তু যারা প্রফেশনাল ভাবে ব্লগিং করে থাকেন তারা তাদের ব্লগ সাইটকে সাজাতে বিভিন্ন ধরনের টেমপ্লেট ব্যবহার করে থাকে যার ফলে ব্লগের ডিফল্ট সার্চ বক্সটি এইসব টেমপ্লেট এর সাথে মানানসই হয়না আর তাই প্রয়োজন পরে স্টাইলিশ কোন সার্চ বক্সের।
যাহোক অনেক বক বক করে ফেললাম এবার কাজের কথায় আসি আজকে আপনাদের জন্য নিয়ে আসলাম দারুণ একটি স্টাইলিশ সার্চ বক্স।
চলুন দেখে আসি কিভাবে এই সার্চ বক্সটি আপনি আপনার ব্লগে যুক্ত করবেন।
কিভাবে যুক্ত করবেন?
প্রথমে আপনার ব্লগার ব্লগ লগইন করুন
ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন ।
এবার Add a Gadget এ ক্লিক করুন এবং HTML/
Javascript এ ক্লিক করুন ।
এবার টাইটেল ঘরে কিছু না লিখে contenet
ঘরে নিচের কোড গুল কপি পেস্ট করুন ।
<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq50MxX1RgZWOecz5G_xFlaC2dZlMP-g9uOoqXq4f0QBcUw-QQtnO4YA1H1wyB-ZvaHV_5IKpkRPeE1jnopGKeaT1kqUpmgAahV9pvcwlNWlEpIgG_gLxB4UC_8f9D1XO5b05X6IW6li7e/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="search..." onfocus='if (this.value == "search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "????? ???? ????? ????";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq50MxX1RgZWOecz5G_xFlaC2dZlMP-g9uOoqXq4f0QBcUw-QQtnO4YA1H1wyB-ZvaHV_5IKpkRPeE1jnopGKeaT1kqUpmgAahV9pvcwlNWlEpIgG_gLxB4UC_8f9D1XO5b05X6IW6li7e/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="search..." onfocus='if (this.value == "search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "????? ???? ????? ????";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
সব শেষে save বাটনে ক্লিক করে বেরিয়ে আসুন এবর আপনার ব্লগ ভিজিট করে দেখুন আশাকরি সার্চ বক্সটি দেখতে পাচ্ছেন ।
আজ এ পর্যন্তই দেখা হবে পরবর্তী টিউনে সেই পর্যন্ত সবাই ভালো থাকবেন। আল্লাহ হাফেজ
Post a Comment
0 comments
প্রিয় পাঠক পোস্টটি পড়ার পর যদি আপনার ভালো লাগে তাহলে দয়া করে গঠনমূলক মন্তব্য করুন । আপনার ছোট্ট একটি মন্তব্য আমাকে আরও ভালো এবং উন্নত মানের পোস্ট লিখতে উৎসাহ প্রদান-করবে। আর প্রাসঙ্গিক যেকোনো প্রশ্ন-সাহায্য-জিজ্ঞাসা-অভিযোগ থাকলে। মেইল করুন mrlutfor1@gmail.com এই ঠিকানায়। আপনার ছোট্ট একটি মন্তব্য আমার নিকট অধিক মূল্যবান। আসা-করছি সাথেই থাকবেন। ধন্যবাদান্তে -লুৎফর রহমান।