নিয়ে নিন অসাধারণ ২টী সার্চ বক্স আপনার ব্লগার বা ওয়েবসাইট এর জন্য !!!

0
287

আসসালামুয়ালাইকুম্‌ ভাই কেমন আচেন ??
আমাদের প্রাই অনেকের কাছেয় ব্লগার বা অন্ন কোন প্লাটফরম এ নিজের একটা ব্লগ থাকেয়। এবং আমরা তাকে সাজাতে চাই নিজের মত,
আজ আমি আপনার দের কাছে নিয়ে এলাম, ২ টি সুন্দর সার্চ বক্স।
আমি আজকে সকালেও আরেক্তা পোস্ট করেচিলাম, যদি আপনারা টা মিস করে থাকেন , তাহলে নিচের লিঙ্ক এ জান।

নিয়ে নিন অসাধারণ 8 টি CSS3 & HTML মেনু আপনার ওয়েবসাইট এর জন্য !!!

আমি এইখানে ২টা সার্চ বক্স শেয়ার করব …

একটা নীল অ্যান্ড আরেকটি অরেঞ্জ 

প্রথমে আপনি আপনার ব্লগার ড্যাশবোর্ড এ জান্‌, তারপর যেইখানে আপনার সার্চ বক্স বসাতে চাইবেন্‌ সেইখানে ADD A GADGET এ ক্লিক করে HTML/JAVASCRIT এ কোড গুলা পেস্ট করে সেভ করুন <<<ঃঃ

নিয়ে নিন অসাধারণ ২টী সার্চ বক্স আপনার ব্লগার বা ওয়েবসাইট এর জন্য !!!

নীল  সার্চ বক্স এর কোড ঃ 

<style>
#iseosearch{
border: 1px solid #DDD;
box-sizing: border-box;
color: black;
font-family: ‘Lora’, serif;
font-size: 14px;
padding:9px;
width: 180px;
}

/* http://livemecca.blogspot.com/ #Rashedul Islam */
.s {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.s:hover {
box-shadow:inset 1px 1px 8px gainsboro;
}

/* http://livemecca.blogspot.com/ #Rashedul Islam */
.s:focus {
background-image: -webkit-linear-gradient(white,white); background-image: -moz-linear-gradient(white,white); background-image: -ms-linear-gradient(white,white);
background-image: -o-linear-gradient(white,white);
background-color:white; outline:1px solid rgb(0, 152, 253); color:black; font-style:normal; box-shadow:inset 1px 1px 8px gainsboro; border:1px solid rgb(0, 152, 253);
}

/* http://livemecca.blogspot.com/ #Rashedul Islam */
.searchsubmit{
background:#00A7ED;
border: 1px solid #0094D2;
color: white;
cursor: pointer;
font-family: ‘Droid Sans’, sans-serif !important;
color: #fff;
cursor: pointer;
line-height: 19px;
padding: 8px 10px;
text-decoration: none;
}

/* http://livemecca.blogspot.com/ #Rashedul Islam */
.searchsubmit:hover{
background:#0094D2;
}
</style>
<div id=’search-box’>
<form class=”searchform” action=”/search”>
<input id=”iseosearch” class=”s” name=”q” x-webkit-speech=”true” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Search This Website …&quot;;}” onfocus=”if (this.value == &quot;Search This Website …&quot;) {this.value = &quot;&quot;}” value=”Search This Website …” type=”text”>
<input value=”Search” class=”searchsubmit” type=”submit”>
</form>
</div>

 

 অরেঞ্জ সার্চ বক্স এর কোড ঃঃ>> 

 

<style>
#iseosearch {
border: 1px solid rgb(221, 221, 221);
background-color: whiteSmoke;
color: black;
font-family: ‘Lora’,serif;
font-size: 14px;
padding: 9px;
width: 180px;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
.searchsubmit:hover {
background: url(“http://4.bp.blogspot.com/-taDC-lU0_tY/UNPf1cwXFBI/AAAAAAAAHvA/64FgVp9E0Zk/s1600/gradient.png”) repeat scroll 0px -33px transparent;
text-decoration: none;
}
.s:focus {
background-image: -webkit-linear-gradient(white,white); background-image: -moz-linear-gradient(white,white); background-image: -ms-linear-gradient(white,white);
background-image: -o-linear-gradient(white,white);
background-color:white; outline:1px solid rgb(0, 152, 253); color:black; font-style:normal; box-shadow:inset 1px 1px 8px gainsboro; border:1px solid rgb(0, 152, 253);
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
.searchsubmit {
background: url(“http://4.bp.blogspot.com/-taDC-lU0_tY/UNPf1cwXFBI/AAAAAAAAHvA/64FgVp9E0Zk/s1600/gradient.png”) repeat scroll 0px 0px transparent;
border: 1px solid rgb(237, 112, 43);
color: rgb(255, 255, 255);
cursor: pointer;
line-height: 19px;
padding: 8px 10px;
text-decoration: none;
}
/* http://livemecca.blogspot.com/ #Rashedul Islam */
</style>
<form class=”searchform” action=”/search”>
<input class=”s” name=”q” id=”iseosearch” x-webkit-speech=”true” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Search This Website …&quot;;}” onfocus=”if (this.value == &quot;Search This Website …&quot;) {this.value = &quot;&quot;}” value=”Search This Website …” type=”text”>
<input value=”Search” class=”searchsubmit” type=”submit”>
</form>

 

ভাল লাগ্লে কমেন্ট করে জানাবেন ্‌

আমার ব্লগ, 

আমার ফেসবুক আইডি। 

একটি উত্তর ত্যাগ