Blog Me Stylish Search Box Kaise Add Kare ? How To Add Beautiful Blogger Custom Search Bar

Stylish Beautiful Blogger/ Blogspot Custom Search Box , (in Hindi)

Search Box kisi website / blog ke content ko khjane ke liye bahut hi important tool hota hai. Isase visitors aapke blog content ko aasani se search kar sakte hai. 

Read - मुफ़्त में वेबसाइट (ब्लॉग) कैसे बनाये ?

iske help se aapki site use karna aasan ho jata hai. isliye sabhi website/ blog  me search box jarur hona chahiye.

search box aapke blog design ko bhi better banane me  help karta hai.


Use Search Box In Website


Add Best & Cool Cusom Search Gadget to blogger-

aapko apne blog par aise search box ka use karna chahiye Jo dikhane me achha ho  aur usase aapka blog design improve ho sake.

mai yeha 2 best custom search box ke bare me jankari diya hu . aap chahe to usko use kar sakte hai. 

..........................................................................................................                    
Search Box Style -  1  : 
यह सर्च बॉक्स आपको ठीक वैसा ही दिखेगा जैसा आप इस ब्लॉग (webkaise.com) पर देख रहे है. यह मेरा favourite सर्च बॉक्स है आप भी इसे try कर सकते है. आप जहाँ भी इसको लगायेंगे ये सर्च बॉक्स स्पेस के अनुसार खुद को automatically customize कर लेगा.

(नीचे दिए कोड को कॉपी करें.)
............................................................................................................

<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 this website' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>

</div>


............................................................................................................
............................................................................................................



Search Box Style -  2  : ( Copy Code Given Below)

.................................................................................


<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(http://2.bp.blogspot.com/-vGjST2sX6Ts/T88uy-eRYUI/AAAAAAAAAog/xhJ2A0nGnpw/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">

<form id="abt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>

</div>
...........................................................................................................

Steps to add a custom search box to blogger.

Step 1- Blogger account me log in kare.
fir add a gadget pa click kare.

Step. 2- popup window se HTML / java script ko select kare

Step. 3-copy kiye code ko html box me paste kare. fir Save ki button par click kare.

Please comment kare.
aap hame comment karke bataye 'Blogger blog me stylish custom search box kaise add kare' ( How  How To Add Beautiful Blogger Custom Search Bar) ki yeh jankari aapko kaisi lagi.

Aap apni koi sawaal/ doubts bhi puchh sakte hai.

Thanks ! 
Blog Me Stylish Search Box Kaise Add Kare ? How To Add Beautiful Blogger Custom Search Bar Blog Me Stylish Search Box Kaise Add Kare ? How To Add Beautiful Blogger Custom Search Bar Reviewed by Admin on May 17, 2016 Rating: 5

30 comments:

  1. vinod ji badiya jankari share ki hai mera ek sawaal hai ki maine domain kharida hai or mere site me add kiya hai ab site open nahi ho pa rahi hai kitane day lagte hai site ko google me show hone me. or haa jaldi serch engine me kaise laya ja sakta hai agar koi tricks hai to bataiye vinod ji.

    ReplyDelete
    Replies
    1. site me domain add krne ke baad 24 ghante ke ander domain google me show hone lagta hai...agar 24 hour ke baad bhi site google me nhi show nhi ho rha hai ...iska matlab ki aapna domain sahi tarike se add nhi ho paya hai....please puri setting ko fir se check kare......search engine me post ko jaldi lane ke trick mai kuchh hi din me iss blog par share karunga...iske liye aap iss blog ko subscribe kar lijiye....thanks please keep visiting.

      Delete
  2. namskar sir,
    sir hamari site ke home page me ek hi post show hoti hai jabki mai 5 poast likh chuka hu blogger ki setting me jakar or post and comments ki setting me ja kar show at ke samen 10 ya 10 se adhik likh karke usko save kar diya lekin site ke home page me keval ek post show hoti hai . sir uska samadhan bataye.
    thanking you.

    ReplyDelete
    Replies
    1. hello Ramesh ji, aap apne blog ka template change karke dekhiye. ho sake to custom template ka use kare. agar iske baad bhi nhi hai to aap mujhe jarur bataye.

      Delete
  3. Bloger ka to thik h bt hame khud ka Search baar bana na h khud k page me search baar add krna h to uski coding batao.
    Ex. Jaise mere pass 4 pages h ek main page home page jis me search baar hoga or usi search baar se mai baaki k 3 pages ko search kr saku aise coding bataO. Please.

    ReplyDelete
  4. Sir meri blog me search box nhi lag rahah bad request reeor 400 show hota h please jaldi bataye

    ReplyDelete
    Replies
    1. मै इस पोस्ट में Search Box Style - 1 के कोड को अभी अपडेट किया हु. आप इसका use कीजिये . यह बहुत अच्छा है और ये जरुर काम करेगा. अगर अभी भी कोई समस्या हो तो जरुर पूछे .

      Delete
  5. Sir yah abhi bhi bhai bad request show ho rahah please help jaldi se jaldi

    ReplyDelete
    Replies
    1. यहाँ तो बिलकुल सही काम कर रहा हैं. आप अपने फ़ोन पर ब्लॉग चलाते है इसलिए हो सकता है कि ये फ़ोन में ठीक से लग नही हो पा रहा होगा. आप अपने ब्लॉग का link दीजिये. मै आपका ब्लॉग देख कर बताता हु. अपने ब्लॉग में कोड को लगा रहने दीजिये. मैं देखना चाहता हु की किस तरह का error आ रहा है.

      Delete
  6. Replies
    1. मै अभी आपका ब्लॉग चेक किया. आपके ब्लॉग में search box लग गया है. उसमे कोई गड़बड़ी नही है. बिल्कुल सही दिखाई दे रहा है.

      Delete
  7. Par yha view blog me show nahi ho raha sayad phone ki problem ho

    ReplyDelete
    Replies
    1. आप अपना ईमेल या फेसबुक id दीजिये. मैं वहां आपको उसका screen shot लेकर send कर दूंगा.

      Delete
    2. मै आपके ईमेल पर screenshot send कर दिया हूँ. आप अपना email चेक कीजिये.

      Delete
  8. Thank you very very much aap NE mujhe itna jhela aur mujhe antim time tak jabab diya pure aadar ke sath.time par jaldi jabab dene ka pair se thanks. Darasal view vabsit barjan karne par search box show hota h aur mera view mobile varjan ho raha tha. Maine kaibloger se chat/bat ki par aap bro abtak me sabhi se vast/achhye ho. Lageraho bro thanks. Thanks....

    ReplyDelete
    Replies
    1. इतने अच्छे शब्दों के लिए आपका बहुत धन्यवाद ! इसी तरह आप हमारे ब्लॉग को visit करते रहिये. अगर आपको ब्लॉग्गिंग में कभी भी कोई problem हो तो जरुर पूछे.

      Delete
  9. Hello bro Maine apna 1 blog delete Dardiy.par jab mai use search karta hu to show hota h.use Google search engine se kaise hataye.

    ReplyDelete
    Replies
    1. SHREEDAS जी...जब भी आप कोई ब्लॉग (या पोस्ट) डिलीट करते है तो वह कुछ दिनों तक सर्च रिजल्ट में show होता रहता है. आप खुद से उसको गूगल सर्च से नही हटा सकते है ...वह कुछ दिन बाद अपने आप हट जायेगा. इसलिए उसके बारे में चिंता ना करे .

      Delete
  10. Hello bro
    Layout me header ke liye digain banani h.kuch sait ke name batao.

    ReplyDelete
    Replies
    1. SHREEDAS जी...digain का मतलब मै नही समझ सका...क्या आपका मतलब design (logo) से है ?

      Delete
  11. Aur aap Mujhe shree bhi bol sakte ho

    ReplyDelete
    Replies
    1. okk Bro...logo बनाने के लिए onlinelogomaker.com एक बहुत अच्छा और मेरा favourite वेबसाइट है. अगर आपको इसे use करने में कोई problem हो तो आप textgiraffe.com से बहुत आसानी से फ्री logo बना सकते है.
      flamingtext.com भी अच्छी वेबसाइट है.मै इस पर एक पोस्ट भी लिखा हु. ( http://www.webkaise.com/2015/12/free-logo-kaise-banate-hai-website-ke.html )

      Delete
  12. Bro Aap mast ho. Aap ka hi samjana samaj aata h. Kyo ki Aap achhye Blogger ke sath achhye insan bhi ho.

    ReplyDelete
    Replies
    1. Thank you Shree...आप भी बहुत अच्छे हो.

      Delete
  13. Hello sir kya ham railway ka search box apni site me Laga sakte hai

    ReplyDelete

Powered by Blogger.