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 ! 
Previous
Next Post »

30 comments

Click here for comments
Vakil Shaikh
admin
June 12, 2016 at 3:37 AM ×

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.

Reply
avatar
V K Singh
admin
June 12, 2016 at 9:28 AM ×

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.

Reply
avatar
June 24, 2016 at 9:58 AM ×

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.

Reply
avatar
V K Singh
admin
June 25, 2016 at 3:14 AM ×

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.

Reply
avatar
Anonymous
admin
November 25, 2016 at 10:40 AM ×

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.

Reply
avatar
V K Singh
admin
November 26, 2016 at 8:05 AM ×

mai aapki baat ko thik se samajh nhi paya.

Reply
avatar
March 22, 2017 at 10:27 PM ×

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

Reply
avatar
March 22, 2017 at 11:17 PM ×

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

Reply
avatar
March 23, 2017 at 12:31 AM ×

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

Reply
avatar
March 23, 2017 at 12:53 AM ×

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

Reply
avatar
March 23, 2017 at 2:11 AM ×

OK. Shreefeel.blogspot.com

Reply
avatar
March 23, 2017 at 5:31 AM ×

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

Reply
avatar
March 23, 2017 at 8:17 AM ×

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

Reply
avatar
March 23, 2017 at 7:24 PM ×

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

Reply
avatar
March 24, 2017 at 12:34 AM ×

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

Reply
avatar
March 24, 2017 at 3:26 AM ×

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

Reply
avatar
March 24, 2017 at 8:27 AM ×

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

Reply
avatar
April 3, 2017 at 10:44 AM ×

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.

Reply
avatar
April 3, 2017 at 9:59 PM ×

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

Reply
avatar
April 5, 2017 at 12:13 AM ×

Thanks brother thanks...

Reply
avatar
April 12, 2017 at 11:25 PM ×

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

Reply
avatar
April 13, 2017 at 1:29 AM ×

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

Reply
avatar
April 13, 2017 at 5:05 AM ×

Aur aap Mujhe shree bhi bol sakte ho

Reply
avatar
April 13, 2017 at 7:00 AM ×

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 )

Reply
avatar
April 14, 2017 at 12:19 AM ×

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

Reply
avatar
April 14, 2017 at 3:30 AM ×

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

Reply
avatar
August 31, 2017 at 2:32 AM ×

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

Reply
avatar
Thanks for your comment