Как добавить на сайт - блог поисковое окно

 

Blogger - blogspot, как добавить (установить) на сайт - блог стильное поисковое окно.

Всем привет. Вот и наступила среда, неделя добралась до экватора. А мы продолжаем изучать виджеты и гаджеты для сайтов и блогов. И вот наконец-то на этой недели мы добрались к действительно интересной теме: "Поисковое окно для сайта - блога". Думаю особого разъяснения о том, что это и для чего нужно, оно не требует. И так понятно, что польза поискового окошка заключается в том, чтобы пользователь мог быстро найти нужный ему контент вашего веб-ресурса. Если же сайт не содержит в себе много информации к примеру он одностраничный или состоит из нескольких постов, в таком случае добавлять этот виджет нет смысла. Как будет выглядеть поисковое окно вы можете увидеть на одном из наших шаблонов.
Обладает оно эффектом удлинения при наведении на него курсором мыши.

Для установки нужно перейти в раздел Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:


/* Search Box
----------------------------------------------- */
#searchformfix
{
float:right;
overflow:hidden;
position:relative;
margin-right: 0px;
margin-top: 3px;
}
#searchform
{
margin:7px 0 0;
padding:0;
}
#searchform fieldset
{
padding:0;
border:none;
margin:0;
}
#searchform input[type="text"]{
background: ;
border: none;
float: left;
padding: 0px 10px 0px 15px;
margin: 0px;
width: 150px;
height: 34px;
line-height: 34px;
transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-moz-transition: all 300ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-webkit-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
-o-transition: all 600ms cubic-bezier(0.215,0.61,0.355,1) 0s;
color: #333;}
#searchform input[type=text]:hover,#searchform input[type=text]:focus
{
width:200px;
}
#searchform input[type=submit]
{
background:url(http://4.bp.blogspot.com/-R8OKVUsis3s/UgZEksy0V1I/AAAAAAAAAT4/QtN9sBHMZis/s1600/icon-search.png) center 9px no-repeat;
cursor:pointer;
margin:0;
padding:0;
width:37px;
height:34px;
line-height:34px;
background-color: #FF3D00;
}
input[type=submit]
{
padding:4px 17px;
color:#ffffcolor:#585858;
text-transform:uppercase;
border:none;
font-size:20px;
background:url(gradient.png) bottom repeat-x;
cursor:pointer;
margin-top:10px;
float:left;
overflow:visible;
transition:all .3s linear;
-moz-transition:all .3s linear;
-o-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
#searchform input[type=submit]:hover
{
background-color:#444 ;
}
.selectnav {
display:none;
}
  
Сохраняете шаблон.

Следующий код вы можете разместить в разделе Дизайн - добавить гаджет - HTML\Javascript. Вот сам код:

<div id='searchformfix'>
          <form action='/search' id='searchform'>
            <input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Поиск...&quot;;}' onfocus='if (this.value == &quot;Поиск...&quot;) {this.value = &quot;&quot;;}' type='text' value='Поиск...'/>
            <input type='submit' value=''/>
          </form>
        </div>
  
Сохраняете гаджет и радуетесь появлению на сайте - блоге стильного поискового окна.


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Как добавить на сайт - блог поисковое окно
Как добавить на сайт - блог поисковое окно
Blogger - blogspot, как добавить (установить) на сайт - блог стильное поисковое окно.
http://1.bp.blogspot.com/-0jO7yTNz5cE/VjCLRllKQfI/AAAAAAAAh_0/DxH46MDxzqI/s400/blogger-blogspot-%25D0%25BF%25D0%25BE%25D0%25B8%25D1%2581%25D0%25BA%25D0%25BE%25D0%25B2%25D0%25BE%25D0%25B5-%25D0%25BE%25D0%25BA%25D0%25BD%25D0%25BE-%25D0%25B4%25D0%25BB%25D1%258F-%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0-%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0.jpg
http://1.bp.blogspot.com/-0jO7yTNz5cE/VjCLRllKQfI/AAAAAAAAh_0/DxH46MDxzqI/s72-c/blogger-blogspot-%25D0%25BF%25D0%25BE%25D0%25B8%25D1%2581%25D0%25BA%25D0%25BE%25D0%25B2%25D0%25BE%25D0%25B5-%25D0%25BE%25D0%25BA%25D0%25BD%25D0%25BE-%25D0%25B4%25D0%25BB%25D1%258F-%25D1%2581%25D0%25B0%25D0%25B9%25D1%2582%25D0%25B0-%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/10/dobavit-na-sajt-blog-poiskovoe-okno.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/10/dobavit-na-sajt-blog-poiskovoe-okno.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy