আসসালামলাইকুম। কেমন আছেন সবাই? আশা করি ভালই আছেন। পরীক্ষা থাকার কারনে এতদিন টিউন করতে পারিনি। যাক, আজকে যা নিয়ে লিখব তা হল আপনার ব্লগে কিভাবে একটি সার্চ বক্স যোগ করবেন।

প্রথমে আপনার ব্লগার অ্যাকাউন্টে লগইন করুন। লেআউটে যান।  HTML/JavaScript  এ যান। তারপর নিচের কোডটি কপি-পেস্ট করে সেভ করুন।

<style>
#search-box {
position: relative;
width: 115
\%;
margin: 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='বাংলায় লিখে সার্চ করুন' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div> 

৫৬ নাম্বার লাইনে "বাংলায় লিখে সার্চ করুন" এর বদলে আপনি যে কথাটি সার্চ বক্সের মধ্যে দেখাতে চান তা লিখুন। আর ৪ নাম্বার লাইনে যে width ১১৫% দেয়া আছে তা ইচ্ছে হলে পরিবর্তন করতে পারেন। ৫৭ নাম্বার লাইনে যে Search কথাটি আছে তা হল সার্চ বাটনের মধ্যে যে কথাটি দেখাবে। এটাও পরিবর্তন করে নিতে পারেন। ৪৬ নাম্বার লাইনে কালার কোড হল নীল রঙের। আরও কালারের জন্য এখানে দেখুন। লাইভ ডেমো দেখতে চাইলে আর কিছু মনে না করলে কষ্ট করে  আমার ব্লগে যেতে হবে। 

পূর্বে প্রকাশ করেছিলাম আমার ব্লগ ইমতিয়ার.ব্লগস্পট.কম এ

ফেসবুকে আমাকে ফলো করতে পারেন এখানে।