Stylish Beautiful Blogger Custom Search Box (in Hindi)

Blog me search box kaise add kare, Blogger me search box kaise lagaye. 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.


Blogger Blog Me Stylish Search Box Kaise Add Kare
Use Search Box In Website


Blog me stylish search box kaise add kare

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ZIEvGfutdmlxCBqvC9IUZwBJdZGmew1y8YevSEUjrDL2oM_ogKn9lCm_dI5ZHlSWpn4elpDxhyKuqhhYQvYO0lOk35rfC9IpeJ7i2YtyGwEltW3GHAEsJ_41laXBYGEruTP4kx4Qvqc/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>
..........................................................................................................


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



Ab Aapne seekh liya ki apne blog me stylish custom search box kaise add kare. 


____________________________________________________________________________________________________________






Blogger me Popular Post Ko Kaise Show Kare?

Agar aapka koi blog (website) hai to yeh post aapke liye hai. aap niche diye link se sikh sakte hai ki free me website kaise banaya jayta hai. Popular post widget (Gadget), blog ka page reviews badhane aur readers ko engage karne ka ek bahut hi effective tarika hai. iss tool se aap most visited posts ko show kar sakte hai.



Add a popular post widget-

(1.) sabse pehale blogger account me sign in kare fir layout section me jaye.


blogger layout


(2.) add a gadget par click kare fir ek page khulega.


Add a gadget in blogger


(3.) usme khojiye ki popular posts ka option kaha diya hai. fir popular post par click kare.



popular post in blogger


(4.) iske baad jo page khulega usme popular post ki setting karna hai. (screen shot dekhe).



steps to add popular post


image me dikhaye gaye steps

1. title me  popular post daale.

2. aap kitne din ka popular posts show karna chahte hai. uske anusar utne din ko select kijiye.

3. post ke title ke sath image dikhanae ke liye image thumnail ko select kare.


4. agar aap post title ke niche thoda discription bhi show karna chahte hai to snippet ko bhi tik kar lijiye.


5. kitne popular posts dikhana chahte hai. usko dropdown menu se select kare.

6. last me save ki option par click kare.


ab apne sikh liya ki Blogger Me Popular Post Widget Kaise Show kiya jata hai.



Aap hame comment karke bataye 'Blogger blog me stylish custom search box or popular post widget kaise add kare' ( How To Add Beautiful Blogger Custom Search Bar & popular post) ki yeh jankari aapko kaisi lagi. Aap apni koi sawaal/ doubts bhi puchh sakte hai.





Tags: Blog me search box kaise add kare, Blogger me search box kaise lagaye, popular post
Blogger Blog me Stylish Search Box Kaise Add Kare? Blogger Blog me Stylish Search Box Kaise Add Kare? Reviewed by VK Singh on May 30, 2020 Rating: 5
Powered by Blogger.