MASIGNCLEAN102

Easy Search Bar

easy search barIf you don't have Search Bar then how will people see other stuff you do?. Just copy and paste the code you like into your side bar or anywhere alse you like.

As you can see my search bar is on the top right for desktop but in the sidebar for mobile. If you need helping doing that type of setup just comment below for any help.

Copy The Full Code To Clipboard

  • Instructions and Editing
Let's add FontAwesome to the <head> of your site if you don't already have it.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML: Just past this into your side bar or anywhere else you would like it.

<center>
<div class="sbsearch-blocksb">
<meta expr:content='data:blog.homepageUrl' itemprop='url'/><ul><li>
<form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get'><meta content='/search?q={q}' itemprop='target'/>
<input  id='sbseatext' itemprop='query-input' name='q' placeholder='Search Here' required='required' type='text'>
  <i class="fa fa-search sbiconsea"></i></form></li></ul></div>
</center>
placeholder="": The wording that is inside the search bar.
fa-search: The Font Awesome icon. Find others HERE. if needed.
The other HTML code just pulls your URL and does what it needs to do to make it easy for you.

CSS: Lets add our styles. Just paste this with our HTML or right into the CSS file or part of your site.

<style>
.sbiconsea {    
color: #0EA9F4;
float: left;
margin-top: -48px;
z-index: 10;
position: relative;
font-size: 25px;
margin-left: 5px;
padding: 10px 10px 11px 7px;
border-right: 3px solid #fff;}

.sbsearch-blocksb input{
width:100%;
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
border-radius:12px;
border: 2px solid #eee;
border-radius: 10px 10px 10px 10px;
height:44px;
color:#6d6d6d;
text-decoration: none;
background-color:#f9f9f9;}

.sbsearch-blocksb input:focus{
outline:none;
width:100%;
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
border-radius:12px;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px;
height:44px;
color:#6d6d6d;
text-decoration: none;
background-color:#eee;}

.sbsearch-blocksb ul {
list-style: outside none none;padding:0px!important;}

#sbseatext {
font-size: 25px;
text-align:center;
-webkit-text-fill-color: #6d6d6d;}

.sbsearch-blocksb input:hover {border: 2px solid #fff;color:#0EA9F4!important;-webkit-text-fill-color: #0EA9F4!important;background-color:#eee;}

</style>
.sbiconsea: Color, size and position of the search icon. change it from the left to right if needed. Also sets a border on one side to give it more style.
.sbsearch-blocksb input: The look of the search bar. Box shadow, border, background and ETC. Width is set to 100% to fit into other elements like your sidebar. Set this to what ever is needed. .sbsearch-blocksb input:focus: Use this to change the look of the search bar when active. #sbseatext: This will change the color and size of the text in the search bar. .sbsearch-blocksb input:hover: And last as you know is to change the look of the bar when hovering it. Enjoy.
And That's it. Your done. Comment below if you need help.


Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

Thanks for stopping by. smile emoji
Please view our Terms of Use before using for any type of commercial use.
Thanks for being you! Come back for more great stuff monkey emoji
bell notification