» » Окно поиска для Блоггер

Окно поиска для Блоггер

Окно поиска на блоге помогает читателю быстро отыскать нужные статьи. Если у вас стоит обычный гаджет поиска от Блоггер, то его можно быстро заменить на более привлекательный. Все предложенные в посте виды окон поиска устанавливаются в Дизайн/Добавить гаджет/HTML/JavaScript.

Первый стиль

Простенькой на вид окошко. В коде можно менять любой цвет оформления на подходящий вам. Так же меняйте шрифт, размер шрифта и так далее.
Синим выделила ссылку на картинку лупы. Вы можете добавить своё изображение, необязательно лупу, любую другую иконку. Размер значка желательно брать 15 на 15px или 16 на 16px. Ищите картинки по ссылкам ниже:
https://icon-icons.com/ru
https://iconbird.com
https://v1.iconsearch.ru
Красным выделила текст, который вы можете заменить на свой.
Зелёным — размер окна поиска.
Подстраивать код под свой блог — менять цвет, размер и т.д. удобно в визуальном редакторе. 
<style type="text/css">
#searchbox{background:#f8f8ff;border:4px solid #f8f4ff;padding:20px 10px;width:240px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://i.yapx.ru/JYw2R.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bdbdf2;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6c6874;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#8a9597;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Я ищу..." />
<input id="button-submit" type="submit" /></form>

Второй стиль

Выглядит окно поиска вот так:
Второй стиль
А если немного подредактировать код, то можно сделать, например, вот такой вид:
подредактировать код
Вставьте в редактор код окна поиска и рассмотрите виджет поближе.
<style type="text/css">
#searchbox{width:280px;background:url(https://i.yapx.ru/JZEMk.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://i.yapx.ru/JZGEZ.png) no-repeat;margin-left:-50px;border-width:0;width:50px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://i.yapx.ru/JZGEc.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Я ищу на сайте..." /><input id="button-submit" type="submit" value=" "/></form>
Синим в коде выделила ссылку на картинку. Если вы захотите поменять на другую, то ищите, например, картинки мазок кисти на прозрачном фоне или любую другую на ваш вкус. Размер 280 на 50px. 
Ссылка на чёрную картинку в первоначальном варианте кода:  https://i.yapx.ru/JZHMc.png
Ссылки на лупу в первоначальном варианте кода:
1) https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQBDNFeF6Lm7tJQi0Q8qntWONVrwcZL3NblDb4B174JK3LHZuHo04I1cVMStq39ptvRGCGrcUGdEZphaZbdet261OTsljaQQ3-mBtL0oCZT_Ezl9bMJ9abt68pWrRBmj1wNJnjfLdmxDc/s1600/search-icon.png
2)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDtaYoyzzSasLSUKDIdHvU4IF5bzjEnT3g_d4LjMUobq9GolFL7YrpJ1zsVIf6zGLU8dCTOUNTtvFHwFhRfNrekXQ3dRlT9LQQB42ruEHmpjGB6lWBHzeuQwmBZL00qI64Bhq6e0-LQXD3/s1600/search-icon-hover.png
Оранжевым выделила ссылку на иконку лупы.
Зелёным — ссылка на иконку лупы, при наведении курсора. (меняется её цвет).
Размер лупы 50 на 50px, если будете менять картинку или размер лупы, то и в коде отмечайте свой размер — выделила красным.
Розовым выделила текст, который можно поменять на свой.

Третий стиль

Третий стиль
Все цвета в третьем стиле можно менять под свой блог.
<style type="text/css">
    #hbz-searchbox {
        height: 40px;
        position: relative;
        min-width: 250px;
        max-width: 300px;
        margin: 10px auto;
    }
    .hbz-buttonwrap {
        border: none;
        width: 14%;
        height: 35px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: #8d6340;
        cursor: pointer;
        border-bottom: 5px solid #c4a431;
    }
    .hbz-buttonwrap:hover {
        border-bottom: 5px solid #be885b;
        background: #d75813;
    }
    .hbz-submit {
        width: 35px;
        height: 35px;
        background: transparent;
        cursor: pointer;
        position: absolute;
        right: 50%;
        top: 50%;
        margin-top: -17.5px;
        margin-right: -17.5px;
        border: none;
    }
    .hbz-submit:after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        border: 2px solid white;
        border-radius: 50%;
        left: 10px;
        top: 9px;
        box-sizing: content-box;
    }
    .hbz-submit:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 2px;
        background: white;
        transform: rotate(-35deg);
        top: 19px;
        left: 21px;
    }
    #hbz-input {
        height: 32px;
        width: 82%;
        position: absolute;
        padding-left: 4%;
        border: none;
        outline: none;
        right: 14%;
        border-bottom: 5px solid #bbb;
        border-left: 1px solid #eaeaea;
        background-color: #fbfbfb;
        border-top: 1px solid #eaeaea;
        box-shadow: 1px 1px 2px #e9e4e4 inset;
    }
    #hbz-input:focus,
    #hbz-input:active {
        background-color: #fff;
    }
</style>
<form action="/search" id="hbz-searchbox" method="get">
    <span class="hbz-buttonwrap"><button class="hbz-submit" value="" type="submit"></button></span>
    <input type="text" name="q" id="hbz-input" placeholder="Я ищу на сайте ..." />
    <input type="hidden" name="max-results" value="8" />
</form>
Выделенное в коде красным можно заменить своим текстом.

Ваши комментарии:

Комментарии со спамом удаляются.