JSON Search Box Widget show real-time results for blogger blogs

JSON Search Box Widget show real-time results for blogger blogs




    Search Widgets are common in every blog where users can search there posts. When they search they will be taken to the search page [/search] where the results are shown. 

    What if you want the searched results real-time without going or refreshing the page? 

    Yes today we are sharing the search widget which displays the results without refreshing the page all you need to do is type what you are searching then press on enter key the search widget will show the results in real-time without refreshing the page.

    This search-box can be customized and can be styled in unlimited colors themes.  This search box is possible because of Google Blogger enabled the support to JSON feeds as the alternate to XML feeds.

    Note the features of this widget:

    1. Loads the search results without refreshing page or taking users to another page
    2. Loads the results with scroll effect where users can scroll all the results in the same page
    3. Many color options and other looks customization available for the widget
    4. Flexible Light weight and responsive can be added in the sidebar also
    5. Search box will expand on focus means when the uses click on the input box to type the text then the search box will expand
    6. Search box will show the title, thumbnail and little snippet of the search results.
    7. If no thumbnail found in the poss then there is a default image which will be shown to the visitors to optimize the user experience

    Adding The Widget in the Blog:

    STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard


    Blogger Layout

    STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.


    Add a Gadget


    STEP 3: Click On "Add a Gadget" As highlighted in the image above.



    STEP 4: After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

    STEP 5:  Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

    JSON Search Box Rounded: 

    Search Box with focus effect

    Search Box animation with focus effect


    If you have already added JQuery and Oswald Font script in your blog then don't add this two scripts highlighted in red color.
    <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" />

    <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://www.allbloggertricks.com";
        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>
        
     <script src="http://files.allbloggertricks.com/searchScript.js"></script>   

    JSON Search Box Standard Look: 

    Rectangular Search Box for blogger



    If you have already added JQuery and Oswald Font script in your blog then don't add this two scripts highlighted in red color.
      <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://www.allbloggertricks.com";
        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>
        
     <script src="http://files.allbloggertricks.com/searchScript.js"></script>   
    That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

    Customization:

    • The Red Highlighted Text is responsible for Oswald Font Link and Jquery Script if you already included this style-sheet and script in your blog template then please don't add this both in your blog .
    • The Green Highlighted Text is Responsible for The theme color of the search box change it with light colors.
    • The Light-blue Highlighted Text is Responsible For The Following:

    1. ListBlogLink : Enter your blog URL here so that it should fetch your blog posts.
    2. ListCount : Change this if you want to limit or increase the results means it will show the number of posts when user search.
    3. TitleCount : Change this if you want to increase or decrease the title length of the posts.
    4. ChrCount: Change this if you want to increase or decrease the description length of the posts.
    5. ImageSize : Change this if you want to increase or decrease the image size but add the px at the of your value.
    6. summary : This is a boolean value asking whether you want to show description or summary with the title and thumbnail. By default it is true if you want to disable change it to false.

    STEP 6:  All Done Save the Gadget and Check it in your blog.

    Conclusion:

    We finally added the widget now its time to check and edit the widget according to the need. We know Blogger has a disadvantage that we cannot use plugin that will install itself and has its own interface so every blogger user should know little coding so that they can solve their problems by themselves instead of hiring designers.

    This widget is highly customizable so you can change its color, font, shape of the box, results page etc. 

    And those who have added this widget successfully without any hurdles congrats to them. and if you want any styling or improvement notify us we will try to add it for you.


    That's It Thanks For Following our Tutorial '' JSON Search Box Widget show real-time results for blogger blogs '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

    8 comments:

    1. How to change the color from green to blue in the first option?
      Thanks.

      ReplyDelete
      Replies
      1. Hello so you want the first search box but you want different color theme just add this code block after the link tags like in second search box script

        :root{
        --themeColor: #bada55 ; /* Default theme is Light Green Color*/ }


        please wrap this code in the style tag as in comment we do not allow it. Add the above code then change the color but use light colors.

        Delete
      2. Does not work, does not change the green color

        Delete
      3. Please can you say me where and how you have added the code. Kindly refer this screenshot https://prnt.sc/hhtt0u hope your problem will be solved.

        Delete
      4. Thank you so much. Everything is right now. Just as I wanted. Thank you.

        Delete
      5. Always Welcome, If you like our blog please support us and share our posts with your friends. :)

        Delete
    2. Please tell me what should I add in the code
      to get a gif image.

      ReplyDelete
    3. Thanx for sharing it

      ReplyDelete