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 10, 2023 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 कीजिए

Blogspot Blog me Search Box Kaise Add kare 1

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

Blogspot Blog me Search Box Kaise Add kare 2

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

Blogspot Blog me Search Box Kaise Add kare 3

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

Blogspot Blog me Search Box Kaise Add kare 4

<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 Me Dusre Post Ka Link Kyu Aur Kaise Add Kare

    Blog Post Me Dusre Post Ka Link Kyu Aur Kaise Add Kare

  • Blog Post me Keyboard key kaise lagaye

    Blog Post me Keyboard key kaise lagaye

  • Adsense RPM kya hai? Adsense RPM increase kaise kare 7 tips

    Adsense RPM kya hai? Adsense RPM increase kaise kare 7 tips

  • Blogspot Blog ko WordPress par Kab Aur Kyo transfer kare 7 karan

    Blogspot Blog ko WordPress par Kab Aur Kyo transfer kare 7 karan

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.

Useful Articles

Successful YouTuber Banne Ke Liye 6 Ways [Full Guide]

Chartered Accountant (CA) कैसे बनें? चार्टर्ड अकाउंटेंट बनने की प्रक्रिया

WordPress Blog Post URL Ke Last Me .html Kaise Add Kare Aur Q Kare

Adsense se related 30+ important questions & Answers

Kisi Bhi Blogger Ko Link Exchange Kyu Nahi Karna Chahiye? [5 Reasons]

Blogging Ke 10 Important Myths ke Bare Me Apko Pata Hona Chahiye

WordPress Ke Text Widget Me PHP Kaise Use Kare

Successful Blogger 5 Tariko Se INCOME Karte Hai

7 Karn WordPress Me Jyada Plugin Use Nahi Karni Chahiye

Custom Email Account Ko Gmail Account Se Connect Kaise Kare [Step by Step]

10 Chije (Things) Jo Apko Successful Blogger Banne Me Badha Degi

Blog Ki Loading Speed Mayne (Matter) Kyu Rakhta Hai [5 Karan]

WordPress Me Bina Plugin Ke Social Media Sharing Button Kaise Add Kare

About Us

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

SUBSCRIBE OUR NEWSLATTER

हमारे नवीनतम पोस्ट की सूचना एवं उपयोगी सामग्री प्राप्त करने के लिए हमसे जुड़ें

Posts for WP Users:

WordPress Me AMP Kaise Setup Kare [Complete Guide]

WordPress Ya Blogger Me Drop Caps Kaise Use Kare/Banaye [Complete Guide]

WordPress Blog Me Font Awesome Add Karne Ke 5 Easy Methods

More Posts from this Category

DMCA.com Protection Status

Recommended For You

Blogspot Ya WordPress Blog Me Calculator Tool Kaise Add Kare

Blogger Template Download Karne Ke Liye Top 10 Trusted Websites

सरकारी शिक्षक कैसे बनें? Government Teacher बनने की जानकारी

Bloggers Ke Liye 8 Important Time Management Tips

Yoast SEO Plugin Ko SetUp Kaise Karte Hai [Complete Guide]

Google Keyword Ranking Check karne ke liye 5 Best Website

Copyright © 2023 - All rights reserved. AboutContactSitemapDisclaimer