Google+ Followers

Будь в курсе событий!

30.11.2013

Виджет строка поиска

Leave a Comment

 

Привет друзья, делал тут строку поиска и подумал а чего бы не написать об этом статью. Так то виджет есть в блоггер, но если кому нибудь понадобится скрипт поиска то я его выкладываю тут.
<style type='text/css'>
/*-[ Search Form ]-----------------------------*/
#searchform fieldset {
float: left;
color: #888;
border: 1px solid #DFDFDF;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04
), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1px;
width: 100%;
margin: 1px;
}
#searchform fieldset:hover {
border: 1px solid #41B7D8;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
}
#searchform {
margin: 0 10px 10px 0;
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
#s {
float: left;
color: #888;
background: none;
border: 0;
width: 80%;
padding: 0.6em;
}
#searchform .sbutton {
cursor: pointer;
padding:8px;
float:right;
}
</style>

<form _lpchecked="1" action="/search" class="search-form" id="searchform" method="get">
<fieldset>
<input type="text" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech="" onfocus="if(this.value==&#39;Search this Site...&#39;)this.value=&#39;&#39;;" value="Поиск по сайту...."
 id="s" name="q" />

<input type="image" style="border:0; vertical-align: top;" src="http://3.bp.blogspot.com/-e1aL0ld3cL4/UcAHpcktFSI/AAAAAAAACZo/1LFcSxW0iHQ/s1600/search.png" class="sbutton" id="search-image" class="sbutton" id="search-image" />
</fieldset>
</form>



Но как вы видели, себе я слелал  строку поиска вместе со временнем, и если кому то нравится такое решение как у меня в блоге, то можете использовать его и у себя.  А вот и сам скрипт, с счетчиком времени.
<style type='text/css'>
/*-[ Search Form ]-----------------------------*/
#searchform fieldset {
float: left;
color: #888;
border: 1px solid #DFDFDF;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04
), inset 0 2px 8px 0 rgba(0, 0, 0, 0.075);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1px;
width: 100%;
margin: 1px;
}
#searchform fieldset:hover {
border: 1px solid #41B7D8;
-webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
-moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04), inset 0 2px 8px 0 rgba(65, 183, 216, 0.4);
}
#searchform {
margin: 0 10px 10px 0;
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
#s {
float: left;
color: #888;
background: none;
border: 0;
width: 80%;
padding: 0.6em;
}
#searchform .sbutton {
cursor: pointer;
padding:8px;
float:right;
}
</style>

<form _lpchecked="1" action="/search" class="search-form" id="searchform" method="get">
<fieldset>
<input type="text" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech="" onfocus="if(this.value==&#39;Search this Site...&#39;)this.value=&#39;&#39;;" value="Поиск по сайту...."
 id="s" name="q" />
<embed src="http://www.clocktag.com/cs/d152.swf"  width="45" height="15"  wmode="transparent" type="application/x-shockwave-flash"></embed>
<input type="image" style="border:0; vertical-align: top;" src="http://3.bp.blogspot.com/-e1aL0ld3cL4/UcAHpcktFSI/AAAAAAAACZo/1LFcSxW0iHQ/s1600/search.png" class="sbutton" id="search-image" class="sbutton" id="search-image" />
</fieldset>
</form>


Теперь же про установку, вставлять данный скрипт надо в  виджет для этого  заходим в дизайн, добавить гаджет, ищем в поиске HTMLjawascript вставляем скрипт в него. А  теперь про настройку, в коде скрипта я пометил зеленым маркером  длину строчки поиска, оранжевымширину часов, а фиолетовым высоту часов.

0 коммент. :

© 2012-2017 Cash's from program