Нов дизайн на полето за търсене в блог на Blogger

Притурка за търсене в блог на Blogger. Притурките за търсене са често срещани във всеки блог, с помощта на които потребителите могат да търсят публикации в тях.
Когато търсят, те ще бъдат отведени до страницата за търсене (/ search), където се показват резултатите.

1. Притурка за търсене в блог на Blogger
2. Функции на притурката
3. Добавяне на притурката в блога
4. Овален дизайн на полето за търсене
5. Стандартен вид на полето за търсене
6. Персонализиране
7. Заключение

Как да направим така, че търсените резултати да се появяват в реално време, без да се отива до страницата за търсене (/ search) или да се презарежда страницата?

Притурка за търсене в блог на Blogger

Днес споделям притурка за търсене, която показва резултатите без да обновява страницата. И всичко, което трябва да направите, е да въведете това, което търсите, след това натиснете клавиша за въвеждане Enter. Дисплеят за търсене ще покаже резултатите в реално време, без да презарежда страницата.
Това поле за търсене може да бъде персонализирано и може да бъде оформено в различни цветове.

Функции на притурката

Обърнете внимание на функциите на тази притурка.

➤Зарежда резултатите от търсенето без да презарежда страница или да пренасочва потребителите към друга страница;

➤Зарежда резултатите с ефект на превъртане, където потребителите могат да преглеждат всички резултати на една и съща страница;

➤Има много опции за цвят и други възможности за персонализиране, които са налице за притурката;

➤Притурката е лека и адаптивна, като може да се добавя и в страничната лента;

➤Разширява се при фокусиране и при въвеждане на текста за търсене;

➤Показва заглавието, мини изображението и малък фрагмент от резултатите от търсенето;

➤Ако не се намери миниатюрно изображение, показва изображение по подразбиране, което ще бъде показано на посетителите за оптимизиране на потребителския опит;

Добавяне на притурката в блога

➤Влезте в профила си в Blogger и отворете таблото за управление;

➤В лявата странична лента ще намерите раздела Оформление, кликнете върху него;

➤Кликнете върху "Добавяне на притурка";

➤След като кликнете върху "Добавяне на притурка" изберете "HTML / JavaScript";

➤Сега копирайте кода по-долу и го поставете в празното поле на притурката "HTML / JavaScript".

Овален дизайн на полето за търсене

Ако вече сте добавили скрипта JQuery и Oswald Font в блога си, не добавяйте тези два скрипта, подчертани в червен цвят

Кодът е:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<link rel="stylesheet" href="http://files.allbloggertricks.com/ABT_Style.css" />

<style>
 
    :root{
        --themeColor: #bata55;
/* Default theme is Light Green Color*/    }

</style>


<div class="abt_search_outer_wrap">
    <div class='abt_results_wrap'>

        <form action='/search'>
            <div class="input-group">
                <input id='search_box' name='q' placeholder='Press Enter To Search' onkeyup='resetField()' />

            </div>
        </form>

        <div id='showing_Headings'></div>

    </div>


    <div class="abt_search_wrap abt_switch_class">
        <div id='search-result-loader'>Loading Results...</div>
    </div>

</div>
 
<script>
 
 //----------------------------Defaults
    var input = document.getElementById("search_box");
    var ListBlogLink = "http://####";
    var ListCount = 9999;   <!-- Number of posts to display -->
    var TitleCount = 70; <!-- Length of the Title -->
    var ChrCount = 150; <!-- Description of the posts characters count -->
    var ImageSize = 150; <!-- Size of the thumbnail -->
    var summary = true; <!-- Whether to show description or not -->
    </script>

Кодът за овален анимиран дизайн на полето за търсене е:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqM9z-vEVcjSKL82UFZ00XlcRJWIxJFh2oSFQdywU2kDmw7CjbYMBqC6a2XNn1L8D5CTSRSioMcffvdX8sc3vlHkQEUOpTjUm0zTUpWjICp5w9loSjVVfqXbmr3ptK5qrn0yit6er_m-s/s1600/searchBox+Oval+Shape.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Search Box animation with focus effect" border="0" data-original-height="58" data-original-width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqM9z-vEVcjSKL82UFZ00XlcRJWIxJFh2oSFQdywU2kDmw7CjbYMBqC6a2XNn1L8D5CTSRSioMcffvdX8sc3vlHkQEUOpTjUm0zTUpWjICp5w9loSjVVfqXbmr3ptK5qrn0yit6er_m-s/s1600/searchBox+Oval+Shape.gif" title="Search Box animation with focus effect" /></a></div>

Стандартен вид на полето за търсене

Ако вече сте добавили скрипта JQuery и Oswald Font в блога си, не добавяйте тези два скрипта, подчертани в червен цвят

Кодът е:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<link rel="stylesheet" href="http://files.allbloggertricks.com/ABT_Style.css" />

<style>
 
    :root{
        --themeColor: #bada55 ;
/* Default theme is Light Green Color*/    }
 
 
 .abt_results_wrap .input-group::before {
        border-radius: 8px 30px 0px 8px!important;
        background: var(--themeColor);
    }
    .abt_results_wrap input {border-radius: 0px!important;}

</style>

<div class="abt_search_outer_wrap">
    <div class='abt_results_wrap'>

        <form autocomplete="off" action='/search'>
            <div class="input-group">
                <input id='search_box' name='q' placeholder='Press Enter To Search' onkeyup='resetField()' />
            </div>
        </form>

        <div id='showing_Headings'></div>

    </div>


    <div class="abt_search_wrap abt_switch_class">
        <div id='search-result-loader'>Loading Results...</div>
    </div>

</div>
 
<script>
 
    //----------------------------Defaults
    var input = document.getElementById("search_box");
    var ListBlogLink = "http://####";
    var ListCount = 9999;   <!-- Number of posts to display -->
    var TitleCount = 70; <!-- Length of the Title -->
    var ChrCount = 150; <!-- Description of the posts characters count -->
    var ImageSize = 150; <!-- Size of the thumbnail -->
    var summary = true; <!-- Whether to show description or not -->
    </script>

Това е. Благодаря за следването на инструкцията. Сега е време за персонализиране, за да направите притурката подходяща за дизайна на вашия блог.

Персонализиране

➤Червеният подчертан текст отговаря за Oswald Font Link и Jquery Script. Ако вече сте включили тези скрипти във вашия блог, моля, не ги добавяйте в кода на темата;

➤Зеленият подчертан текст е отговорен за цвета на полето за търсене, Него може да го промените, но само в светли цветове;

➤Синият подчертан текст отговаря за следното:

◾ListBlogLink: Въведете тук URL адреса на своя блог, така че да изтегля публикациите от блога ви.

◾ListCount: Променете това, ако искате да намалите или увеличите броя на резултатите при търсене от потребителя.

◾TitleCount: Променете това, ако искате да увеличите или намалите дължината на заглавието на публикациите.

◾ChrCount: Променете това, ако искате да увеличите или намалите дължината на описанието на публикациите.

◾ImageSize: Променете това, ако искате да увеличите или намалите размера на изображението, но добавете px към стойността.

◾summary: Това е стойност, която ви пита дали искате да покажете описание или резюме със заглавието и мини изображението. По подразбиране е true, ако искате да я деактивирате, я направите на false.

➤Всичко е готово. Запазете притурката и я проверете в блога си.

Заключение

Най-накрая добавихме притурка поле за търсене, която можем да редактираме според необходимостта ни.
Това приспособление е много персонализирано, така че можете да промените цвета, шрифта, формата му.
Ако откриете затруднения моля, коментирайте и споделете вашето ценно мнение. Останете настроени за повече уроци като този и споделете това с приятелите си.

P.S

Приятели, тези кодове в момента не работят. Моля за извинение и предлагам в края на публикацията работещ код за нов дизайн на полето за търсене в блог на Blogger.
31.03.2019

<style type="text/css">

#hbz-searchbox {

background-color: #F5F5F5;

border: 1px solid #EDEDED;

padding: 5px;

border-radius: 10px;

margin: 10px auto;

min-width: 238px;

max-width: 288px;

}

#hbz-input {

background-color: #FEFEFE;

border: medium none;

font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif;

margin-right: 2%;

padding: 4%;

box-shadow: 2px 1px 4px #999999 inset;

border-radius: 9px;

width: 60.33%;

}

#hbz-input:focus {

outline: medium none;

box-shadow: 1px 1px 4px #0D76BE inset;

}

#hbz-submit {

background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;

border-radius: 9px;

border: medium none;

color: #FFF;

cursor: pointer;

font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif;

padding: 4%;

width: 28%;

}

#hbz-submit:hover {

background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat;

}

</style>

<form id="hbz-searchbox" action="/search" method="get">

<input type="text" id="hbz-input" name="q" placeholder="Type Here..." />

<input type="hidden" name="max-results" value="8" />

<input id="hbz-submit" type="submit" value="Search" />

</form>

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: