5+ Виджеты окна поиска Blogger: стильные окна поиска
Виджет окна поиска Blogger должен использоваться в каждом блоге, чтобы улучшить взаимодействие с читателем и снизить показатель отказов.
Виджеты окна поиска Blogger
Виджет окна поиска Blogger является важной частью вашего блога. Очевидно, вы должны подумать обо всех виджетах, которые должны использоваться после создания вашего блога. В этом случае нет возможности избежать виджет окна поиска для Blogger , как и виджет популярные сообщения , виджет последние сообщения , виджет подписки и т.д. На самом деле, красивая и стильная форма поиска Blogger позволит вашим читателям более эффективно ориентироваться в блоге.Виджеты очень важны как для SEO, так и для читателя. По этой причине мы должны уметь выбирать, какие виджеты мы должны использовать в нашем блоге и какие виджеты мы можем избежать. По моему мнению, виджет окна поиска Blogger должен использоваться в каждом блоге, чтобы улучшить взаимодействие с читателем и снизить показатель отказов.
Важность виджетов окна поиска Blogger
На самом деле создание блога на Blogger - дело нескольких кликов, но стать успешным блогером довольно сложно. По сути, мы должны сосредоточиться на некоторых важных моментах после создания блога. Среди них, контент, SEO и виджеты очень заметны. Хотя Blogger является одной из самых популярных бесплатных платформ для ведения блогов, но по умолчанию в шаблонах Blogger недостаточно виджетов, чтобы иметь все последние функции и возможности.По этой причине нам приходится использовать множество сторонних виджетов и шаблонов Blogger . Иногда после использования некоторых стандартных шаблонов Blogger они нас не устраивают из-за простых стилей и внешнего вида этих виджетов. Вот почему мы ищем какой-то собственный стиль виджетов, предоставляемый многими веб-дизайнерами и разработчиками.
В этом случае мы можем привести пример контактной формы Blogger по умолчанию . Если вы добавите виджет, вы увидите очень простую форму. Таким же образом вы найдете окно поиска Blogger по умолчанию. Поэтому я собираюсь настроить это окно поиска, чтобы сделать его более привлекательным и удобным для читателя. Вы можете значительно повысить удобство использования веб-сайта с помощью этих бесплатных виджетов окна поиска Blogger.
Список виджетов окна поиска Blogger:
Вы, возможно, видели много привлекательных виджетов окна поиска Blogger на разных сайтах и думали применить свой собственный стиль окна поиска. Кроме того, если вы пытаетесь сделать окна поиска по умолчанию для Blogger более профессионально выглядящими, вам понравится этот список. Я собираюсь предоставить полный код для некоторых профессионально выглядящих окон поиска. Просто скопируйте и вставьте нужный вам код.Стиль виджета окна поиска Blogger 1:
<style>
#search-box-danger {margin:0 auto;height: 36px;position:relative;width:100%;float:none;}
#bo-search-box{padding:0;background:#fff;height: 35px;position:relative;line-height:1.5em;font-weight:normal;margin:0;border-radius:5px;border:1px solid #ddd;}
.bo-sb-buttonwrap {border-top-right-radius: 5px;border: none;cursor: pointer;position: absolute;height: 35px;right: 0;border-bottom-right-radius: 5px;width: 14%;display: block;top: 0;background: #d9534f;}
.bo-sb-buttonwrap:hover {background-color: #c9302c;}
.bo-sb-submit {height: 35px;right: 50%;background: transparent;position: absolute;width: 35px;cursor: pointer;margin-right: -17.5px;margin-top: -17.5px;top: 50%;border: none;}
.bo-sb-submit:after {position: absolute;border: 2px solid white;left: 10px;height: 8px;content: '';top: 9px;width: 8px;border-radius: 50%;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;position: absolute;transform: rotate(-35deg);left: 21px;content: '';top: 19px;height: 8px;background: white;}
#bo-sb-input {outline: none;border-top-left-radius: 5px;padding: 0 15px;transition: all 0.5s;width: 84%;border: none;position: absolute;height: 35px;background-color: #fff;color: #333;border-bottom-left-radius: 5px;}
#bo-sb-input:focus {outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-danger">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>
Стиль виджета окна поиска Blogger 2:
<style>
#search-box-info {position:relative;margin:0 auto;width:100%;height: 36px;float:none;}
#bo-search-box{height: 35px;border:1px solid #ddd;line-height:1.5em;margin:0;font-weight:normal;padding:0;border-radius:5px;position:relative;background:#fff;}
.bo-sb-buttonwrap {border-bottom-right-radius: 5px;width: 14%;background-color: #5bc0de;position: absolute;border: none;border-top-right-radius: 5px;right: 0;cursor: pointer;display: block;height: 35px;top: 0;}
.bo-sb-buttonwrap:hover {background-color: #31b0d5;}
.bo-sb-submit {background: transparent;top: 50%;cursor: pointer;right: 50%;height: 35px;position: absolute;margin-top: -17.5px;width: 35px;border: none;margin-right: -17.5px;}
.bo-sb-submit:after {border-radius: 50%;top: 9px;position: absolute;height: 8px;content: '';width: 8px;border: 2px solid white;left: 10px;box-sizing: content-box;}
.bo-sb-submit:before {transform: rotate(-35deg);position: absolute;content: '';width: 2px;left: 21px;height: 8px;background: white;top: 19px;}
#bo-sb-input {width: 84%;border: none;border-bottom-left-radius: 5px;position: absolute;padding: 0 15px;height: 35px;color: #333;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);border-color: #66afe9;}
</style>
<div id="search-box-info">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>
Стиль виджета окна поиска Blogger 3:
<style>
#search-box-primary {float:none;position:relative;height: 36px;width:100%;margin:0 auto;}
#bo-search-box{margin:0;padding:0;position:relative;background:#fff;height: 35px;border:1px solid #ddd;line-height:1.5em;border-radius:5px;font-weight:normal;}
.bo-sb-buttonwrap {cursor: pointer;height: 35px;position: absolute;border-bottom-right-radius: 5px;right: 0;border: none;width: 14%;background-color: #337ab7;top: 0;border-top-right-radius: 5px;display: block;}
.bo-sb-buttonwrap:hover {background-color: #286090;}
.bo-sb-submit {cursor: pointer;margin-top: -17.5px;position: absolute;top: 50%;background: transparent;right: 50%;width: 35px;height: 35px;border: none;margin-right: -17.5px;}
.bo-sb-submit:after {width: 8px;left: 10px;content: '';top: 9px;height: 8px;border-radius: 50%;position: absolute;box-sizing: content-box;border: 2px solid white;}
.bo-sb-submit:before {transform: rotate(-35deg);height: 8px;background: white;position: absolute;width: 2px;top: 19px;content: '';left: 21px;}
#bo-sb-input {border: none;width: 84%;color: #333;padding: 0 15px; height: 35px;position: absolute;border-bottom-left-radius: 5px;outline: none;background-color: #fff;border-top-left-radius: 5px;transition: all 0.5s;}
#bo-sb-input:focus {border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;}
</style>
<div id="search-box-primary">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>
Стиль виджета окна поиска Blogger 4:
<style>
#search-box-success {height: 36px;float:none;position:relative;width:100%;margin:0 auto;}
#bo-search-box{background:#fff;line-height:1.5em;height: 35px;border-radius:5px;border:1px solid #ddd;margin:0;padding:0;font-weight:normal;position:relative;}
.bo-sb-buttonwrap {background-color: #5cb85c;display: block;border: none;border-top-right-radius: 5px;height: 35px;height: 35px;position: absolute;right: 0;border-bottom-right-radius: 5px;width: 14%;top: 0;cursor: pointer;}
.bo-sb-buttonwrap:hover {background-color: #449d44;}
.bo-sb-submit {position: absolute;margin-right: -17.5px;right: 50%;margin-top: -17.5px;cursor: pointer;top: 50%;height: 35px;width: 35px;background: transparent;border: none;}
.bo-sb-submit:after {top: 9px;border-radius: 50%;content: '';height: 8px;width: 8px;border: 2px solid white;left: 10px;position: absolute;box-sizing: content-box;}
.bo-sb-submit:before {width: 2px;top: 19px;height: 8px;position: absolute;background: white;left: 21px;content: '';transform: rotate(-35deg);}
#bo-sb-input {padding: 0 15px;background-color: #fff;border-bottom-left-radius: 5px;height: 35px;transition: all 0.5s;color: #333;outline: none;width: 84%;border: none;position: absolute;border-top-left-radius: 5px;}
#bo-sb-input:focus {box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-success">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>
Стиль виджета окна поиска Blogger 5:
<style>
#search-box-default {width:100%;position:relative;margin:0 auto;float:none;height: 36px;}
#bo-search-box{border-radius:5px;border:1px solid #ddd;height: 35px;position:relative;line-height:1.5em;margin:0;background:#fff;padding:0;font-weight:normal;}
.bo-sb-buttonwrap {position: absolute;right: 0;border-top-right-radius: 5px;background-color: #fff;border: none;width: 14%;display: block;top: 0;cursor: pointer;height: 35px;border-bottom-right-radius: 5px;border-left: 1px solid #ddd;}
.bo-sb-buttonwrap:hover {background-color: #e6e6e6;}
.bo-sb-submit {right: 50%;border: none;top: 50%;margin-right: -17.5px;position: absolute;margin-top: -17.5px;background: transparent;width: 35px;cursor: pointer;height: 35px;}
.bo-sb-submit:after {left: 10px;width: 8px;border-radius: 50%;height: 8px;content: '';position: absolute;border: 2px solid black;box-sizing: content-box;top: 9px;}
.bo-sb-submit:before {content: '';background: black;transform: rotate(-35deg);position: absolute;height: 8px;left: 21px;width: 2px;top: 19px;}
#bo-sb-input {height: 35px;background-color: #fff;width: 84%;border: none;border-top-left-radius: 5px;outline: none;border-bottom-left-radius: 5px;padding: 0 15px;position: absolute;transition: all 0.5s;color: #333;}
#bo-sb-input:focus {-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);outline: 0;border-color: #66afe9;box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);}
</style>
<div id="search-box-default">
<form action="/search" id="bo-search-box" method="get">
<input id="bo-sb-input" name="q" placeholder="Search Here..." type="text" required/>
<span class="bo-sb-buttonwrap"><button class="bo-sb-submit" value="" type="submit"></button></span>
</form>
</div>
Как добавить виджет окна поиска Blogger?
Добавить свой виджет окна поиска Blogger очень просто. На самом деле, это всего лишь несколько кликов. Просто следуйте моей инструкции, чтобы добавить любой из вышеперечисленных стилей окна поиска Blogger в свой блог.2. Обычно мы используем это окно поиска в Blogger в верхней части боковой панели. Найдите раздел боковой панели и нажмите ссылку « Добавить гаджет ».
3. Появится всплывающее окно с множеством виджетов. Найдите гаджет « HTML / JavaScript» в списке и нажмите синюю кнопку «плюс», чтобы добавить его в свой блог.
4. Теперь скопируйте код выбранного окна поиска Blogger: из приведенного выше списка и вставьте его в текстовую область, как показано ниже.
