0

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

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



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

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

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








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

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

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

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

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

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

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

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

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

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


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

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

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

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


    "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://2.bp.blogspot.com/-LL2NQgvln5U/Wh_SQG3Z7HI/AAAAAAAAN4s/qLDs653FKdo594Ymt34O4OCpyytlS1uxgCLcBGAs/s1600/searchBox%2BOval%2BShape.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://2.bp.blogspot.com/-LL2NQgvln5U/Wh_SQG3Z7HI/AAAAAAAAN4s/qLDs653FKdo594Ymt34O4OCpyytlS1uxgCLcBGAs/s1600/searchBox%2BOval%2BShape.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.

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

    Заключение


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

    Източник: all blogger tricks


    Няма коментари :

    Публикуване на коментар

    Ще съм признателна и наистина оценявам вашите приятелски коментари. Всеки опит да бъдат въведени автора и читателите в дискусия, както и препратките към външни ресурси ще бъдат премахвани. Моля, прочетете Terms of use And Privacy Policy. Благодаря за вашия отзив.

    Loading Results...

    Copyright © БЛОГ ЗА БЛОГОВЕ  2016 - . All Rights Reserved