Learn How To Make A Search Bar Using HTML And CSS In 10 Just Minutes Step by step tutorials for beginners
In this video we will create a search bar where you can see the Blur Effect in the search field. When we write anything in the search bar and click on the search icon. It will open the google search result. We will make this search bar using HTML And CSS only in just 10 minutes
For Domain and web hosting
Visit Bluehost: https://bluehost.sjv.io/e414GQ
Bluehost tutorial:
https://youtu.be/5z0i35_oXO8
———————————–
Download images used in this tutorial:
https://drive.google.com/file/d/1arOg7E5-JN7Q31EGIQpZ8_5uSaqRdhYv/view?usp=sharing
————————————-
Recommended Videos:
Learn Complete HTML and CSS from basics:
► https://www.youtube.com/playlist?list=PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU
Make A Complete Website for college using HTML & CSS:
► https://www.youtube.com/playlist?list=PLjwm_8O3suyP5kGKmwS_DM0Hs1j7fshi5
How to make a Business website step by step:
► https://www.youtube.com/watch?v=99vHH_6F0Ko
How to make personal resume website step by step:
► https://www.youtube.com/watch?v=qCFN8EujbGI
How to make an Ecommerce Website Design:
► https://www.youtube.com/playlist?list=PLjwm_8O3suyM_2Lo9aAIw3HqjOPor8j9g
How to make travel website design with HTML CSS Bootstrap:
► https://www.youtube.com/watch?v=AiaEqc9UMf8
————————————-
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA/join
————————————-
Like – Follow & Subscribe us:
◼️ YouTube: https://goo.gl/tTFmPb
◼️ Facebook: https://goo.gl/qv7tEQ
◼️ Twitter: https://twitter.com/ItsAvinashKr
◼️ Instagram: https://instagram.com/iamavinashkr/
source
Thank you😇
boss your vc code softwer what vorsion ? plz tell me?
thank u so much bro <3 <3
The image don't work
I wrote
url(images/background.jpg)
OH SIR TUM SIKHATE ACHHA HO but sir Jo bhi aap code kartain ho uska result direct dikhane ka aap to pura code karnain ke baad dikhate ho toh isse confusion sir hota hai
Hello Please I want the image for the search bar
can you show some more sample for search then display results of search in a listbox
You're great bro
di tempat ku tataletak nya berantakan
I clicked on search it didn’t go to google lol
where a source code?
last get methode not working when i am searching anything then i type in search section and after clicking sarch button it just open google search page….not showing the result
bro not work
nice
If you share the file in the description that would help, thanks
You didn't explain the concepts that you were using, for me as a beginner, you I rewatched the video 9 times, but still didn't get anyshit that you were typing
good stuff. If I may ask though… Instead of a search icon image, can you use a font awesome search icon?
Great Job!
When I tried to change the value of the Name attribute from "q" to anything else, it did not work! Hopefully, you have the time to tell me why.
it didnt work
doesn't work
Thanks for the video brother
Sir action is not working when I am giving url of Google in action it doesn't work only Google page is open
the besssst
Hii bro….i made search bar from this video but whenever I try to search something…it saying that Google is refused to connect….how can I resolve this
how could i make the search bar search for words in my website? so for example, if I have the word safety on my page how could I make the search bar redirect to the page with that word when they search it?
I was going to copy and paste, but I learnt a lot. Ahah, thanks!
Thanks for your help ❤❤❤❤
can you do a fix on the backward search on a website like if type 'easy' it will be typed on the search bar like 'ysae'. Please thank you
Awesome bro 👌👌👌 super i found exactly wat i searched..thqqq so much
pls help
sir the backgarund pic is in half page
Sir nowadays instagram search bar is showing like placeholder texts are sliding. So how to make that Search bar where we can slide our placeholder texts. Pls help?
I always like your video it's too awesome
Pls how do make a search button where by when clicked the searched result will be displayed on another page with only the searched item or letter appearing
I copied your code exactly as shown in the video and it did not work. The problem was with the CSS. I change the CSS for Input to this and it worked: input[type=text] {
width: 400px;
height: 50px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid red;
border-radius: 20px;
font-size: 30px;
background-color: aqua;
mne yeh code as it as follow kjya but mera na background pic show horhi na style.css wala kam web arha css ko html se link b kya he as it as yahi code follow kya he pr kch nhn horha show
Sir agr google ki jgh apni koi site upload krni ho to kya kren