আসসালামু আলাইকুম। ব্লগস্পটের জন্য আমি নিয়ে আসলাম আমাদের ডিজাইন করা কিছু সার্চ বক্স। ব্লগস্পটে সার্চ বক্সগুলো সাধারণত খুব সিম্পল হয়। তাই আমরা এটার দিকেই নজর দিয়েছি।

আলটিমা গ্রিন

ডেমো: এখানে দেখুন।

<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shbox {
background: linear-gradient(#7aeb0c, #529d09);
border: 4px solid lime;
border-shadow: 4px 2px 2px 9px #000000;
padding: 20px 10px;
width: 500px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#shbox input {
outline: none;
}
#shbox input[type="text"] {
background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: transparent;
font: bold 12px siyam rupali;
color: black;
width: 90%;
padding: 8px 15px 8px 30px;
}
#bton-submit {
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: #000000;
background-color: lime;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#7aeb0c, #529d09);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;
font-family: siyam rupali;`
}
#bton-submit:hover {
background: lime;
}
#bton-submit:active {
background: lime
;
outline: none;
}
#bton-submit::-moz-focus-inner {
border: 0;
}
</style>
<br />
<br />
<form action="/search" id="shbox" method="get">
<center>
<input name="q" placeholder="টাইপ করুন" size="15" type="text" /></center>
<center>
<input id="bton-submit" type="submit" value="ক্লিক করুন" /></center>
</form>

NAOMI সার্চ বক্স

ইউনিক ডিজাইন, ইউনিক কালার। ডেমো: এখানে দেখুন।

/*Naomi Search Box For Blogger by http://www.grplusbd.cf*/
#searchbox {
background: url(http://4.bp.blogspot.com/-YVjKRxloMrU/VdB6dbuBbrI/AAAAAAAAAQY/uzpoLnYB30Y/s1600/Ca%2B-%2BCopy.PNG) no-repeat;
width: 300px;
height: 50px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "siyam rupali";
font-size: 10px;
color: #ff0000;
width: 90%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url() no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 25px;
height: 25px;
}
#button-submit:hover {
background: url() no-repeat;
}
#button-submit:active {
background: url() no-repeat;
outline: none;
}

</style>

</div>
<div style="text-align: center;">
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="কি-ওয়ার্ড লিখে ইন্টার চাপুন" size="10" type="text" />
<input id="button-submit" type="submit" value="" />
</form>

Colored Life Search Box

স্ক্রিণশট

ডেমো: http://www.grplusbd.cf/2015/08/blog-post_17.html

<style> /*Colored Life Search Box 1.0 For Blogger by http://www.grplusbd.cf*/
#searchbox {
background: url(http://2.bp.blogspot.com/-5v4dwCuhlbA/VdHXacC-uTI/AAAAAAAAAQ8/OnFXy9bM9fw/s1600/Ca%2B-%2BCopy.PNG) no-repeat;
width: 300px;
height: 50px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "siyam rupali";
font-size: 10px;
color: #ff0000;
width: 90%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url() no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 25px;
height: 25px;
}
#button-submit:hover {
background: url() no-repeat;
}
#button-submit:active {
background: url() no-repeat;
outline: none;
}

</style>

</div>
<div style="text-align: center;">
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="কি-ওয়ার্ড লিখে ইন্টার চাপুন" size="10" type="text" />
<input id="button-submit" type="submit" value="" />
</form>

সিম্পল সার্চ বক্স

ডেমো: এখানে দেখুন।

<style>

/*Simple Search Box For Blogger by http://www.grplusbd.cf*/
#searchbox {
background: url(http://1.bp.blogspot.com/-aTICqFQKtCk/VdBxFWu39VI/AAAAAAAAAP8/LS18MCT-jGo/s1600/%25E0%25A6%25B8%25E0%25A6%25BF%25E0%25A6%25AE%25E0%25A7%258D%25E0%25A6%25AA%25E0%25A6%25B2.png) no-repeat;
width: 300px;
height: 50px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "siyam rupali";
font-size: 10px;
color: #ff0000;
width: 90%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url() no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 25px;
height: 25px;
}
#button-submit:hover {
background: url() no-repeat;
}
#button-submit:active {
background: url() no-repeat;
outline: none;
}

</style>

</div>
<div style="text-align: center;">
<form action="/search" autocomplete="off" id="searchbox" method="get">
<input name="q" placeholder="কি-ওয়ার্ড লিখে ইন্টার চাপুন" size="10" type="text" />
<input id="button-submit" type="submit" value="" />
</form>

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

আল্লাহহাফেজ।