Expand Click Search Box like the image above is a search box if the visitor/user wants to search and click on search box, it will be expand towards the position that we defined according with the position of search box that we place on the template of our site/blog. This style gives an impression more elegant, exciting the visitors who want to search the content and make comfortable.
In this case I will apply the process about to change the standard search box on the blog template that created by Artisteer so that it becomes more attractive search box that I called Expand Click Search Box Float Right. For other types of templates, you have to take this analogy. Let's see the standards search box that may be you have. We're going to make it to be more interactive with the same function.
Right click on the area around search box on the template of your blog. If you are using mozilla firefox as the browser will appears inspect element (Q) then you click there. You will get the information of the search box with html code on the template that you use as shown as the right picture above. <form….>...</ form> will display the search box according with css style that we going to change, receive the input from the visitor/user and then execute by action path that you have defined.
Descriptions of the right picture above :
- Number 1: caller css class script that determines the position of the search box on the template ( it is depending on the template that you use)
- Number 2: css class that will give you style search box, which will change with the style of expand click search box
- Number 3: path execution of the search box into your blog content search based on keywords typed by visitor/user.
According with the logic above I hope you do not get confused when you apply it to your template. Let's begin with the following steps
1. Find search box tag on the template of your blog. Login to the dashboard of your blog and click Template> Edit Html and Ctrl+F inside the template code. In this case i just Type "<form", i will find the tag form of search box as shown as the picture below!
Then we are going to change the part of tag <form…> .... </ form> with the script below
<form action='/2013/06/search.html' id='search' method='get'> <input name='q' placeholder='Search...' size='40' type='text'/> </form>
- '/2013/06/search.html' is the path of the search page integrate with google CSE of the search post article.
- 'search' is the css style of the expand click search box that I will give then.
- placeholder='Search...' is the text that appears when the search box is not active or have not entered keyword by visitor/user.
2. Define the style of expand click search box, like the script code below!
#search {
}
#search input[type="text"] {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwB-3J9EDXtqjo-kZysFBqkITiinAbGSTS5nXAgKRdCk6lG9vioqBzPCRrs2XhCc8x9exmJZnwiIypQ8QzOzJ2WCpMig6IFAYTu1_0ROm3hPNGFvk_AnUX3rHytSMuEjPFmOdjFRnlAE/s2048/searchicon.png') no-repeat 10px 6px #ffffff;
border: 1px solid #000000;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #000000;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 1px rgb(26, 56, 103) inset;
transition: all 0.5s ease-in-out 0s;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
float:right;
}
#search input[type="text"]:focus {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiwB-3J9EDXtqjo-kZysFBqkITiinAbGSTS5nXAgKRdCk6lG9vioqBzPCRrs2XhCc8x9exmJZnwiIypQ8QzOzJ2WCpMig6IFAYTu1_0ROm3hPNGFvk_AnUX3rHytSMuEjPFmOdjFRnlAE/s2048/searchicon.png') no-repeat 10px 6px #fcfcfc;
width: 230px;
float:right;
}
- float:right; is determines the direction of expanding search box when activeted.
- background: url(... is the image icon of search box is used which can be changed as you wish. You can exploring by changing css script above. Insert the script above into the skin of your blog template.
3. adjust the expand search box position. In this case the template that I used to have css class ".art-object989822972" so that the css tag of position to be the css script below. It really depends on the definition of the form tag search box based on template that you use.
.art-object989822972{
position: absolute;
top: 110px;
right:10px;
width:300px;
height: 24px;
}
Or you can also change the name of the css class on the tag form of expand click search box, then you define the value as the script ".art-object989822972" above. Hope can help you, if not clear let's see the following video!
Related Articles
Awesome blog! I am really impressed by this blog! The pictures are really nice and cool
ReplyDelete123 hp oj2620 setup