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

আমাদের ব্লগ, ভালো লাগ্লে দেখবেন

রেইনবো ডিলাইট

আরেকটি অশাধারন সার্চবক্স। সম্পূর্ণই ইউনিক। আমাদের বানানো। আল্টিমা গ্রিনের মডিফাই করা ভার্সন।

ডেমো ফটো

সোর্স কোড,

আস্যাজ সার্চ বক্স

<!--Search Box By http://www.grplusbd.cf--&gt;
<link href="http://ge.tt/api/1/files/3pGCbnJ2/0/blob?download" rel="stylesheet" type="text/css"></link>
<br />
<form action="/search" id="searchbox" method="get">
<input name="q" placeholder="Type here..." size="15" type="text" />
<input id="button-submit" type="submit" value="Search" />
<br />
<br /></form>

গ্রিন বার

সার্চ বক্সের ছবি

এখানে উইডগেট কোড দেওয়া আছে,

[একটা সার্চ বক্স আগে থেকে থাকলে সেটি রিমুভ করে নেবেন, নাহলে সিএসএস কনফ্লিক্ত করে সার্চ বক্স ক্রাশ করতে পারে ]

টাইটেনিয়াম সার্চ বক্স

কোড,

আলটিমা গ্রিন

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

<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>

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

আমার ব্যক্তিগত ব্লগ, সবই পাবেন

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