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

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

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

ডেমো ফটো

সোর্স কোড,

<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shrnbox {
background: linear-gradient(#7aeb0c, red, #529d09,yellow, blue, white, brown, #ff3300,#FFCC99,red,lime);
border-radius: 25px;
border-shadow: 4px 2px 2px 9px #000000;
padding: 20px 10px;
width: 40%;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#shrnbox input {
outline: none;
}

#shrnbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiovvNNqInub-O3NrXhrJ0cNvg4sWfIVhN1PrYFaXvcq5OPjevFMhOoTjWN8DXolQEM2zJnktj6POFX-nQ2Ehk9XS7HjK0yFwkQKOxHZHtFye1S61xD8VQlRZ6f95kVCoiCJFIbidLBr0d4/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;
}

#btoon-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, red, #529d09,yellow, blue, white, brown, #ff3300,#FFCC99,red,lime);
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;`
}

#btoon-submit:hover {
background: lime;

}

#btoon-submit:active {
background: lime
;
outline: none;
}

#btoon-submit::-moz-focus-inner {
border: 0;
}
</style>
<br /><br /><br />
<form action="/search" id="shrnbox" method="get">

<center><input name="q" placeholder="টাইপ করুন" size="15" type="text" /></center>
<input id="btoon-submit" type="submit" value="ক্লিক করুন" />
</form>

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

;
<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>/*Pillowbar Search Box For Blogger by http://www.grplusbd.cf*/#searchbox {    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxX1u6C4ZgQXu8gK68ydxLecbYxRBcqFd_iYWr55iRjR4397wQj_z4Bvz30bZtXEMaaFPSM8oOOgCmY8wrxIxvBXEWk49fp8fdAvUkJVG0uPevCckdS5POT1TgQWY4NXquP9GGjmYURZkh/s1600/pop.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: 20px;
    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>
<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="কি-ওয়ার্ড লিখে ইন্টার চাপুন" />
    <input id="button-submit" type="submit" value="" />
</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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiovvNNqInub-O3NrXhrJ0cNvg4sWfIVhN1PrYFaXvcq5OPjevFMhOoTjWN8DXolQEM2zJnktj6POFX-nQ2Ehk9XS7HjK0yFwkQKOxHZHtFye1S61xD8VQlRZ6f95kVCoiCJFIbidLBr0d4/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 সার্চ বক্স

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

<style>

/*Naomi Search Box For Blogger by http://www.grplusbd.cf*/
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtgKSrJgCLWuUgKMtJqYbmycoRa0n0HK4aDnOny9Ex7Ot91m-hMu1QH_YFtzLRhZAkYNBcj4TxJIrNxehIFN2BfhjidYJU9tyEz6LgFgtBdtpA7MGMCyxSPYArG4Q-_HpwJIhVXeU1Rck/s1600/Ca+-+Copy.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>

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

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

<style>
/*Simple Search Box For Blogger by http://www.grplusbd.cf*/
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbmAzEt2yvswsy0O4ierqia_RvUP1-OVaQ0ogzvQPIXxeyDq4_HS-dxRB1THMZhT4mVgpiEydGxCKfA838uFpn0oCvinTA4WdRmGJi6Gyd54Tkd14GaAG4l00I8aH_gXmALSJwSYVUvxs/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>

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

Wednesday, August 26, 2015

কিছু অসাধারণ কাস্টম ডিজাইনড ব্লগার সার্চ বক্স