Blogger ke Liye Top 10 Stylish Search Box Widget

Blogger me Stylish Search Box Kaise lagaye

दोस्तों सर्च बॉक्स बहुत काम का है एक ब्लॉग या वेबसाइट के लिए. अगर आपके पास ब्लॉग या वेबसाइट है तो उसमे एक सर्च बॉक्स होना बहुत जरूरी है.  सर्च बॉक्स का काम है आपके ब्लॉग पर जितना पोस्ट है ओर जितना पोस्ट है उन सब को शो करना. अगर आपके ब्लॉग पर किसी भी विज़िटर कोई पोस्ट सर्च करते है इस सर्च बॉक्स को इस्तेमाल करके तब आपके ब्लॉग तब विजिटर को फ़ायदा होगा और कोई भी पोस्ट वो अपने हिसाब से ढूंढ सकता है. (Blogger ke Liye Top 10 Stylish Search Box Widget)

आपकी ब्लॉग पर जब ज्यादा पोस्ट्स हो जाएगी तो सर्च बॉक्स आपके विज़िटर को बहोत ही ज्यादा हेल्प कर सकता है. आपके ब्लॉग पर विज़िटर्स या कस्टमर जिनको पहले से पता है की वो किस टॉपिक के बारे मे पढ़ना चाहते है उन्हे उपयोगी साबित हो सकता है. अगर आपके ब्लॉग पर सर्च बॉक्स नही है तो आपकी वेबसाइट पर आने वाले व्यक्ति को आपके ब्लॉग पर आर्टिकल्स ढूंढ ने  मे बहोत परेशानी होगी इस लिए आपके ब्लॉग में ये बहुत जरूरी है तो दोस्तों इस पोस्ट में आपको में टॉप 10 स्टाइलिश सर्च बॉक्स विजेट के बारे में बताने जा रहा हु तो चलों जाने कैसे लगाये ये सर्च बॉक्स अपने ब्लॉग में. (Blogger ke Liye Top 10 Stylish Search Box Widget)

ब्लोगर में सर्च बॉक्स कैसे लगाये (Add Stylish Search Boxes To Blogger in Hindi)

Step 1: सबसे पहले आप अपने blogger में जाये.

Step 2: फिर आप Layout में क्लिक करे.

Step 3: अब आपको जहा भी सर्च बॉक्स add करना है वहा Add Gadget पर क्लिक करे.

Step 4: फिर एक पॉपअप ओपन होगा उसमे आप HTML/JavaScript को सिलेक्ट कीजिये.

Step 5: अब में आपको टॉप 10 स्टाइलिश सर्च बॉक्स का कोड देता उसमे से कोई एक सर्च बॉक्स पसंद करके उसका कोड कॉपी किजिए और उसे HTML/JavaScript में पेस्ट कीजिये.

Style 1:

<style>
#hg-searchexpandbox1
{
padding:10px;
}
#hg-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#hg-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#hg-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='hg-searchexpand1'>
         <form action='/search/max-results=8'  method='get' id="hg-searchexpandbox1">
            <input name='q' id='hg-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='hg-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>

Style 2:

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}
.cf:after{
    clear:both;
}
.cf{
    zoom:1;
}

 /* Form wrapper styling */
.search-wrapper {
width: 220px;
margin: 45px auto 50px auto;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
/* Form text input */
.search-wrapper input {
width: 138px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}
.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}
.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}
.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 72px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.search-wrapper button:hover{  
    background: #e54040;
}

.search-wrapper button:active,
.search-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}
.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}
.search-wrapper button:hover:before{
    border-right-color: #e54040;
}
.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}  

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Search here." required="" />
        <button type="submit">Search</button>
    </form>

Style 3: 

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}
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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDDnAF4IqkXwWytcVVjSdjVk5nMFWbjsOz4NWdY8vAsCIgwETneUMp5Nf2sBJiqpPj7X64juDomjYIc0l962ucDytrxqNjP0qYjMDdZmI4CtIPxBwfmAFLRMtb-lK9FQPo93tmPKGaByL/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}
#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
    background: #4f5356;
}
#button-submit:active {
    background: #5b5d60;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

Style 4:

<style>
#hg-search-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}
#hg-search-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="hg-search-box" name="q" size="40" type="text" placeholder="  Search here.. "/>
<input id="hg-search-btn" value="Search" type="submit"/>
</form> 

Style 5:

<style>
#searchbox {
    background: url(http://4.bp.blogspot.com/-fm03iTdpNCc/VSTbYA6xniI/AAAAAAAABlo/TLczwloMSBc/s1600/search-boxh.png) no-repeat;
    width: 250px;
    height: 65px;
}
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;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(http://3.bp.blogspot.com/-Wc5AyBrJlyU/VSTbggxO5lI/AAAAAAAABlw/TsvNwZLWcL0/s1600/magnifierh.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}
#button-submit:hover {
    background: url(http://3.bp.blogspot.com/-ZIYN_D0sAYQ/VSTbu3AevNI/AAAAAAAABmA/PDuuAFmBPkY/s320/magnifier-hoverh.png) no-repeat;
}
#button-submit:active {
    background: url(http://3.bp.blogspot.com/-ZIYN_D0sAYQ/VSTbu3AevNI/AAAAAAAABmA/PDuuAFmBPkY/s320/magnifier-hoverh.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

Style 6:

<style>
#search-box {
position: relative;
width: 100%;
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='Search' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Style 7:

<div class="flexsearch">
<div class="flexsearch--wrapper">
<form class="flexsearch--form" action="/search" method="get">
<div class="flexsearch--input-wrapper">
<input class="flexsearch--input" type="text" placeholder="search here..." name="q" />
</div>
<input class="flexsearch--submit" type="submit" value="&#10140;"/>
</form>
</div>
</div>
<style>
/***********************
 * Essential Structure *
 ***********************/
.flexsearch--wrapper {
height: auto;
width: auto;
max-width: 100%;
overflow: hidden;
background: transparent;
margin: 0;
position: static;
}
.flexsearch--form {
overflow: hidden;
position: relative;
}
.flexsearch--input-wrapper {
padding: 0 66px 0 0; /* Right padding for submit button width */
overflow: hidden;
}
.flexsearch--input {
  width: 100%;
}
/***********************
 * Configurable Styles *
 ***********************/
.flexsearch--input {
  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
  height: 40px;
  padding: 0 46px 0 10px;
border-color: #888;
  border-radius: 35px; /* (height/2) + border-width */
  border-style: solid;
border-width: 3px;
  margin-top: 15px;
  color: #333;
  font-family: 'Helvetica', sans-serif;
font-size: 26px;
-webkit-appearance: none;
-moz-appearance: none;
}
.flexsearch--submit {
  position: absolute;
right: 0;
top: -10px;
display: block;
width: 60px;
height: 60px;
  padding: 0;
  border: none;
margin-top: 20px; /* margin-top + border-width */
  margin-right: 5px; /* border-width */
background: transparent;
  color: #888;
  font-family: 'Helvetica', sans-serif;
  font-size: 27px;
  line-height: 60px;
}
.flexsearch--input:focus {
  outline: none;
  border-color: #2288bb;
}
.flexsearch--input:focus.flexsearch--submit {
  color: #333;
}
.flexsearch--submit:hover {
  color: #2288bb;
  cursor: pointer;
}
::-webkit-input-placeholder {
color: #888;
}
input:-moz-placeholder {
  color: #888
}
</style>

Style 8:

<style>
#searchbox {
width: 280px;
background: url(http://3.bp.blogspot.com/-TU69P22GVgE/VSTaX8VD3xI/AAAAAAAABlQ/wrgX6Z45kEU/s1600/search-boxhac.png) no-repeat;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}
#button-submit{
background: url(http://2.bp.blogspot.com/-G03YJV1xvJ4/VSTajx4HZ4I/AAAAAAAABlY/_Wks2lXZ7h8/s1600/search-iconh.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}
#button-submit:hover {
background: url(http://2.bp.blogspot.com/-G03YJV1xvJ4/VSTajx4HZ4I/AAAAAAAABlY/_Wks2lXZ7h8/s1600/search-iconh.png);
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Style 9:

<style>
#searchbox {
    background: url(http://2.bp.blogspot.com/-Hy8F3z7aCgI/VSTZLDKFi0I/AAAAAAAABkw/4c6-0DRRQP8/s1600/searchbar.png) no-repeat;
    width: 208px;
    height: 29px;
}
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: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(http://2.bp.blogspot.com/-hXTbaNRPaJQ/VSTZXqH5ETI/AAAAAAAABk4/HUvhQC4up5k/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(http://2.bp.blogspot.com/-Tv_vuvHoJCE/VSTZguLBqqI/AAAAAAAABlA/uAmTgzTTaw4/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(http://2.bp.blogspot.com/-Tv_vuvHoJCE/VSTZguLBqqI/AAAAAAAABlA/uAmTgzTTaw4/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
</form>

Style 10:

<style>

#search-box {

position: relative;

width: 100%;

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: #db4437;

-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='Search Customize Blogging' type='text'/>

<button id='search-button' type='submit'><span>Search</span></button>

</form>

</div>

Step 6: अब इनमे से कोई भी स्टाइल के कोड को पेस्ट करके HTML/JavaScript विजेट सेव करदे.

तो दोस्तों इस प्रकार हम ब्लोगर पे सर्च बॉक्स लगा सकते है. अगर आपको सर्च बॉक्स लगाने में कोइ परेशानी हो रही है तो आप हमे कमेन्ट के जरिये जरुर बताये हम आपकी तुरंत मदद करेंगे.

Share Post

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Pinterest
• LinkedIn