Нов дизайн на полето за търсене в блог на Blogger
.jpg)
вторник
Притурка за търсене в блог на Blogger. Притурките за търсене са често срещани във всеки блог, с помощта на които потребителите могат да търсят публикации в тях.
Когато търсят, те ще бъдат отведени до страницата за търсене (/ search), където се показват резултатите.
Как да направим така, че търсените резултати да се появяват в реално време, без да се отива до страницата за търсене (/ search) или да се презарежда страницата?
Това поле за търсене може да бъде персонализирано и може да бъде оформено в различни цветове.
➤Зарежда резултатите от търсенето без да презарежда страница или да пренасочва потребителите към друга страница;
➤Зарежда резултатите с ефект на превъртане, където потребителите могат да преглеждат всички резултати на една и съща страница;
➤Има много опции за цвят и други възможности за персонализиране, които са налице за притурката;
➤Притурката е лека и адаптивна, като може да се добавя и в страничната лента;
➤Разширява се при фокусиране и при въвеждане на текста за търсене;
➤Показва заглавието, мини изображението и малък фрагмент от резултатите от търсенето;
➤Ако не се намери миниатюрно изображение, показва изображение по подразбиране, което ще бъде показано на посетителите за оптимизиране на потребителския опит;
➤Влезте в профила си в Blogger и отворете таблото за управление;
➤В лявата странична лента ще намерите раздела Оформление, кликнете върху него;
➤Кликнете върху "Добавяне на притурка";
➤След като кликнете върху "Добавяне на притурка" изберете "HTML / JavaScript";
➤Сега копирайте кода по-долу и го поставете в празното поле на притурката "HTML / JavaScript".
Кодът е:
Кодът за овален анимиран дизайн на полето за търсене е:
Кодът е:
Това е. Благодаря за следването на инструкцията. Сега е време за персонализиране, за да направите притурката подходяща за дизайна на вашия блог.
➤Зеленият подчертан текст е отговорен за цвета на полето за търсене, Него може да го промените, но само в светли цветове;
➤Синият подчертан текст отговаря за следното:
◾ListBlogLink: Въведете тук URL адреса на своя блог, така че да изтегля публикациите от блога ви.
◾ListCount: Променете това, ако искате да намалите или увеличите броя на резултатите при търсене от потребителя.
◾TitleCount: Променете това, ако искате да увеличите или намалите дължината на заглавието на публикациите.
◾ChrCount: Променете това, ако искате да увеличите или намалите дължината на описанието на публикациите.
◾ImageSize: Променете това, ако искате да увеличите или намалите размера на изображението, но добавете px към стойността.
◾summary: Това е стойност, която ви пита дали искате да покажете описание или резюме със заглавието и мини изображението. По подразбиране е true, ако искате да я деактивирате, я направите на false.
➤Всичко е готово. Запазете притурката и я проверете в блога си.
Най-накрая добавихме притурка поле за търсене, която можем да редактираме според необходимостта ни.
Това приспособление е много персонализирано, така че можете да промените цвета, шрифта, формата му.
Ако откриете затруднения моля, коментирайте и споделете вашето ценно мнение. Останете настроени за повече уроци като този и споделете това с приятелите си.
P.S
Приятели, тези кодове в момента не работят. Моля за извинение и предлагам в края на публикацията работещ код за нов дизайн на полето за търсене в блог на Blogger.
31.03.2019
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Когато търсят, те ще бъдат отведени до страницата за търсене (/ search), където се показват резултатите.
Как да направим така, че търсените резултати да се появяват в реално време, без да се отива до страницата за търсене (/ 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" />
<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*/ }
: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>
<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>
<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>
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
