LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Widgets / Website / Website Widgets / WordPress / WordPress Widgets » Stylish Search Box In POPUP For Blog And Websites

Stylish Search Box In POPUP For Blog And Websites

Stylish-Search-Box-In-POPUP-For-Blog-And-Websites
Search boxes not only help to increase your website’s design usability, but they’re very convenient to site visitors and regulars. For those that have been to your site before, they know what they want and they want it now. These are the impatient people who don’t feel like wading through different links. If you don’t accommodate this problem you might risk losing those readers.

The full screens search is becoming one of the significant parts of a website. With an increase in the number of mobile users, people are slowly inching towards full screen search as it dramatically improves the searching experience of mobile users. Since, mobiles are happen to be small in size, adding a full screen search would make it easier to type and search your website.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code Added.
3.) CSS3 Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

Recommended For You:
Add A Simple Contact Form In WordPress Page Without Plugin

CSS:

<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: #2EB0EC;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<style>
#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999;}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;}
#popup_searchBox_Data{position:absolute;top:50%;left:50%;width:300px;height:100px;margin:-50px 0 0 -150px;color:#FFFFFF;z-index:9999;}
</style>
<style>
.search-form-wrapper{background:#000;background:rgba(0,0,0,.8);z-index:99;position:fixed;width:100%;height:100%;left:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;color:#fff;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}
</style>

HTML:

<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />
</form>
</div>
<div id="popup_searchBox" style="display:none;">
<div id="popup_searchBox_Data">
<!-- Search Box -->
<div class="search-form-wrapper" style="display: block;">
<div class="search-form-overlay"></div>
<form action="/search" class="search-form" method="get">
<label class="search-form-label">Type something and Enter <button onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button></label>
<input class="search-text" name="q" type="text" value="">
<button class="hide search-submit" style="display:none;" type="submit"><trans>Search</trans></button>
</form>
</div>
<!-- Search Box -->
</div>
</div>

Customization:

1.) You can change the Codes if your are a Pro. Rest can ask for customization.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

You Like It, Please Share This Recipe With Your Friends Using...

11 Responses to “Stylish Search Box In POPUP For Blog And Websites”

  1. Nice article. It’s a great spot to find new information. Thank you so much for this wonderful post.

  2. very good,your article help me for improve the usability of my website

  3. Sheraz Jul says:

    Really liked your Blog. Inspired me to read more useful blogs like this. Most of points i read are valid and factual. Thanks for sharing your knowledge.

  4. Shariq says:

    This is a wonderful post! I hope to read more of your post which is very informative and useful to all the readers.

  5. very good,your article help me for improve the usability of my website

Leave a Reply to Shariq Cancel reply

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