BloggingHindi - Blogging Aur Internet Ki Sabhi Jankari

  • About Us
  • Contact Us
  • Blogging
  • WordPress
  • SEO

Blogspot Blog me Search Box Kaise Add kare

Last Updated on January 5, 2021 by Md Arshad Noor Leave a Comment

हम इस Post में आपको एक ऐसे Widget के बारे में बताने जा रहे है जो की हर Blog में होना बहुत जरुरी होता है. आपको इस Post में हम Blog में Search Box Add करने के बारे में बताने जा रहे हैं। इस Post में हम आपको कई तरह के Search Box को Add करने के बारे में बताने जा रहे है. 

Apne Blogspot Blog me Search Box kaise Add kare How to Add Search Box in Blogger Blog

हम अपने Blog में बहुत सारे Articles को Publish करते हैं. आप सोच सकते हो की जिस Blog में 100+ Posts हो उसमे Visitor को अपने हिसाब से Post को खोजने में कितनी दिक्कत होती है. अगर आपके Blog में Search Box Add किया हुआ है तो इससे Visitors जल्दी Post को Search कर सकेगा. इससे उसको अपने हिसाब से Post को खोजने में Help मिलेगी।
बहुत सारे Blogger अपने Blog में Search Box को Add करके रखता है. हम आपको जिन Search Box के बारे में बताने जा रहे है उसमे Design भी बहुत अच्छा है और Fast loading भी है। जिससे Widget Load होने में ज्यादा Time नहीं लेगी.

Blog में Search Box कैसे Add करें
अब में आपको कुछ Steps बता रहा हूँ जिनको Follow करके आप अपने Blog में Easily इस Widget को Add कर सकते हो. 

Step 1: सबसे पहले Blogger में Login करके Blog के Dashboard पर जाइये।

  1. अब Layout पर Click करे
  2. अब जहाँ Search Box Add करना है वहाँ Add a widget पर Click करें
  3. अब HTML/Javascript पर Click कीजिए

Step 2: अब निचे दिए हुए किसी भी Style के Search box के code को copy कर लीजिए और Title लिखने के बाद Code को Past कर दे फिर Save कर दीजिए।

<style>#searchbox {width: 240px;}#

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: url(http://2.bp.blogspot.com/-

xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/

TyXhIfEIUy4/s1600/search-dark.png) no-

repeat 10px 13px #f2f2f2;border: 2px solid

#f2f2f2; font: bold 14px

Arial,Helvetica,Sans-serif; color: #6A6F75;

width: 160px; padding: 14px 17px 12px

30px; -webkit-border-radius: 5px 0px 0px

5px; -moz-border-radius: 5px 0px 0px 5px;

border-radius: 5px 0px 0px 5px; text-

shadow: 0 2px 3px #fff; -webkit-transition:

all 0.7s ease 0s;-moz-transition: all 0.7s

ease 0s;-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;}#searchbox

input[type="text"]:focus {background: #

f7f7f7;border: 2px solid #f7f7f7;width:

200px;padding-left: 10px;}#button-submit

{background: url(http://3.bp.blogspot.com/-

AdpPwxQzxRQ/VQGGkmYc75I/

AAAAAAAAANk/6moDe_NLLRo/s1600/slider-

arrow-right.png) no-repeat;margin-left:

-40px;border-width: 0px;width: 43px;height:

45px;}</style><form id="searchbox"

method="get" action="/search"

autocomplete="off"><input name="q"

type="text" size="15" placeholder="Search

here..." /><input id="button-submit"

type="submit" value=" "/></form>

<style>#searchbox {background: url

(http://3.bp.blogspot.com/-g-zH25_DoxI/

VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/

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:

15px; color: #828282; width: 70%;display:

inline-table; vertical-align: top;}#button-

submit { background: url

(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/

VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/

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/-4-xFDFGKJrA/

VD1Kn04f9TI/

AAAAAAAAAgw/2ta84QY1x9A/s1600/

magnifier-hover.png) no-repeat;}#button-

submit:active { background: url

(http://2.bp.blogspot.com/-4-xFDFGKJrA/

VD1Kn04f9TI/

AAAAAAAAAgw/2ta84QY1x9A/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

here....." /> <input id="button-submit"

type="submit" value="" /></form>

<style>

#searchbox {

width: 280px;

background: url(http://1.bp.blogspot.com/-

dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/

rbd0HN4EZrY/s1600/search-box.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://4.bp.blogspot.com/-4MYBYE0i0Xk/

VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/

s1600/search-icon.png) no-repeat;

margin-left: -40px;

border-width: 0px;

width: 40px;

height: 50px;

}

#button-submit:hover {

background: url

(http://4.bp.blogspot.com/-6S4K8eHPM-c/

VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/

s1600/search-icon-hover.png);

}

</style>

<form id="searchbox" method="get"

action="/search" autocomplete="off">

<input name="q" type="text" size="15"

placeholder="Search here....." />

<input id="button-submit" type="submit"

value=" "/>

</form>





I hope ये Post आपको अच्छी लगी होगी और आपके Blog में Search Box Add करने में Help करेगी. अगर आपको इस Widget को Blog में Add करने में दिक्कत हो तो हमें Comment में बताये और हमारे Blog से Subscribe करें।

You May Also Like

  • Blog Post ko Direct Koi Bhi Email Se Publish Kaise Kare

    Blog Post ko Direct Koi Bhi Email Se Publish Kaise Kare

  • CDN Kya hai Kyo Use kare 8 Fayde

    CDN Kya hai Kyo Use kare 8 Fayde

  • Youtube se paise kaise kamaye- A to Z puri jankari

    Youtube se paise kaise kamaye- A to Z puri jankari

  • YouTube Ke Top 10 Ranking Factors 2019

    YouTube Ke Top 10 Ranking Factors 2019

About Md Arshad Noor

हेलो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में इस ब्लॉग में रेगुलर नई नई आर्टिकल्स लिखता हूँ. यहाँ पर हम ज्यादातर Blogging, Make Money, SEO, WordPress आदि से सम्बंधित Article मिलेगी. आपको हमारी लेख पसंद आती है तो इसे सोशल मीडिया में शेयर करें। अगर आपको कोई सहायता चाहिए तो कमेंट कीजिए।

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Please do not spam! otherwise your comment will be removed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get it on Google Play

Useful Articles

Khush Nahi Rahne Wale Logo Ki 5 Buri Aadte

Revenue Hits kya hai aur isme Account kaise banaye

Blogspot Blog me Country Specific Redirect Disable kaise Kare

Spam Mail Sender Se Unsubscribe Karke Spam Mail Se Kaise Bache

Google Me Search Karne Ke Top 10 Tips & Trick – [Get Right Results Fast]

Google Search Results Me Blog Ke Sabhi Posts Me Star Rating Kaise Dikhaye

Blog Homepage Me Only Post Title Kaise Dikhaye

Blogging me fail hone ka 10 sabse Bada Karan

Social Media se More Traffic Pane ke Liye 10 Important Tips

Quora Se Blog Ki Traffic Kaise Badhaye? 5 Tips

Blog Post me Keyboard key kaise lagaye

YouTube Se PR9 Dofollow Backlink Kaise Receive Kare

Blog Post Copy Hone Par Copyright Post Me Automatic Apne Blog Ki Link Add Kare

About Us

mdarshadnoorहेल्लो दोस्तों, मेरा नाम मोहम्मद अरशद नूर है. में अररिया, बिहार का रहने वाला हूँ. मुझे नयी चीजें सीखना-सिखाना बहुत पसंद है. में पिछले 5 सालों से ब्लॉगिंग के फील्ड में हूँ. इस ब्लॉग में आपको ब्लॉगिंग और इन्टरनेट से सम्बन्धित जानकारी मिलेगी.

SUBSCRIBE OUR NEWSLATTER

हमारे ब्लॉग के रेगुलर विजिटर हो तो अभी Subscribe कर लीजिए ताकि आप हमारे नए पोस्ट को सबसे पहले पढ़ पाएँ!

Posts for WP Users:

WordPress Use Karne Ke Fayde Aur Nuksan (Pros And Cons)

Gravatar Me Account Bana Kar Comment Me Apna Photo Show Karwaye

Top 10 Common WordPress Mistakes – Jo Sabhi Beginners Karte Hai

WordPress Me HTTP Request Ki Number Kam Karke Fast Banaye

WordPress User Roles Ke Bare Me Puri Jankari [With Customization]

More Posts from this Category

Recommended For You

Blog Pageviews Increase Kaise Kare 10 Tips

Apko Blog Me Genesis Theme Kyu Use Karna Chahiye? [10 Reasons]

WordPress Me Email Se Login Karna Disable Kaise Kare [2 Mthods]

Domain Authority Kya hai?? Ise Increase Karne ke Liye 7 Tips

Blog Post Likhne Ke Liye 10 Rules [Must Follow]

[12 Baate] Google Apke Bare Me Janta Hai With Links

WordPress Me Comment Ki Minimum Aur Maximum Length Set Kare

Blogging Ke 6 Personal Side Effects (Nuksan)

New Bloggers Ke Liye Top 5 Best Adsense Alternative

Copyright © 2020 - All rights reserved.AboutContactSitemapDisclaimer