Full Width Feature Rich Animated Content Slider For Blog/Website

Full Width Feature Rich Animated Content Slider For Blog/Website




    We are very excited today because we are sharing a Full Width JQuery Content Slider For Blogs or any websites. This is a static content slider here you have manually add link and images of your preferred posts you can add any number of posts links and images. 

    We used JQuery to create this slider because of cross browser support and less script more functionality.

    This is a premium slider when it comes to features. But we are publishing it for free so that all blogs or websites can use it on their blogs and support us.

    Some of the important features we like to share are:

    1. This Slider is a full width and will fit to your blog sections from a small 400px to large 1920px. Add it and enjoy
    2. This Slider has a Sliding Left and Right effect thanks to JQuery Framework. The Content Title also has sliding effects.
    3. The look of the slider is Classic Looks amazing on large Screen Devices. We used Font Awesome icons.
    4. You can Customize this slider in many ways from it looks to its functionality, its effects, its speed etc
    5. Auto Sliding Feature is also enabled and has controls like the duration, speed.

    This Slider Loops again and again the images means when the user reached the last slide the slider again go back to start from the first slide.

    We also used Oswald Font as it looks good in the slider but it is on you if you don't want to add that you can do it easily by removing the script.

    So Let start adding the widget it is very easy.

    Adding The Widget For Blogger Users:

    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.

    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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

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

    <div class="SliderOuterWrap">
        <span id='prev'><i class="fa fa-arrow-circle-left"></i></span>
        <div class="slidesWrap">
            <div class="slide">
                <div class="abt_post_title">
                    <h3><i class="fa fa-info-circle" aria-hidden="true"></i>
                        <a href="Link To Your Post Here">
                            <!--Your Post Title Here-->
                        </a>
                    </h3>
                </div>

                <img src="your 1st image url here" alt="">

            </div>
            <div class="slide">
                <div class="abt_post_title">
                    <h3><i class="fa fa-info-circle" aria-hidden="true"></i>
                        <a href="Link To Your Post Here">
                            <!--Your 2nd Post Title Here-->
                        </a>
                    </h3>
                </div>
                <img src="your 2nd image url here" alt=""></div>
            <div class="slide">

                <div class="abt_post_title">
                    <h3><i class="fa fa-info-circle" aria-hidden="true"></i>
                        <a href="Link To Your Post Here">
                            <!--Your 3rd Post Title Here-->
                        </a>
                    </h3>
                </div>

                <img src="your 3rd image url here" alt="">

            </div>
            <div class="slide">

                <div class="abt_post_title">
                    <h3><i class="fa fa-info-circle" aria-hidden="true"></i>
                        <a href="Link To Your Post Here">
                            <!--Your 4th Post Title Here-->
                        </a>
                    </h3>
                </div>

                <img src="your 4th image url here" alt="">


            </div>
        </div>
        <span id='next'><i class="fa fa-arrow-circle-right"></i></span>
    </div>
       
       <script>
      
    var speed = "slow";
    var autoslide = true;
    var autoSlideDuration = 5000; // 5 Seconds

        </script>
    <script src="http://files.allbloggertricks.com/FullWidthSlider.js"></script>   

    What if you want to add more slides or remove some slides ?
    Yes You can do it if you want to add more slide the all you need to do is copy the below block of code starting from class slide to the end of that div and paste it after the dark green highlighted div.
     <div class="slide">
                <div class="abt_post_title">
                    <h3><i class="fa fa-info-circle" aria-hidden="true"></i>
                        <a href="#">
                            <!--Your Post Title Here-->
                        </a>
                    </h3>
                </div>
                <img src="your image url here" alt="">
               
            </div>   
    Add That Above Code if you want to add more slides after the Dark Green Highlighted color at the bottom of the code.

    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, Font-awesome 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 Orange Highlighted Text is Responsible for The Title of your posts or caption of your image. and Orange text is responsible for the link to your post.
    • The Light-blue Highlighted Text is Responsible For The Images in slides.

    JavaScript Part:

    • The Light-green Highlighted Text is Responsible For The Sliding Speed of the slider. By Default it is slow you can change it to medium, Fast and you can add numbers like 1000 means 1 second.
    • The Yellow Highlighted Text is Responsible For The Enabling and disabling of the auto sliding feature.
    • The Pink Highlighted Text is Responsible For The Duration of switching of slides of the auto sliding feature.

    Adding Extra Slide:

    • The Green Highlighted div at the bottom of the main code. after this div you have to add the block of code given above.

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

    Adding in other static websites:

    Just copy the main Block of code given above and paste it where ever you want the slider should appear. If you are facing problems then contact us we will help you.

    Conclusion:

    Yes we added the content slider finally. Now review it and customize it so that it should fit in your site.  

    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 '' Full Width Feature Rich Animated Content Slider For Blog/Website '' 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.
    Read more »

    Amazing Facebook Tips and Tricks That All Users Should know

    Amazing Facebook Tips and Tricks That All Users Should know



      Facebook, being certainly one of the biggest social media networks is a platform for interacting with people globally additionally a place to find out new matters, brands etc. 

      With active 2 Billion plus users every month, since it was founded in 2004, Facebook has been keeping updating itself with new functions and those capabilities have a few hidden pointers and tricks which an ordinary user isn't always aware of, but for tech geeks, it is the interest which they are attempting the way Sherlock does it via locating a pin in a haystack, they explore every tab/alternative and so on. 

      There are a few pointers and tricks every user should be acknowledged for, mentioned below:

      Download your Facebook data as a backup: 

                                           Everyone loves Facebook because they think and care for their users, Now you can download your facebook data which includes the Timeline info, posts you have shared, messages, photos etc Additionally you will get the things which you did but not remember like the ads you have clicked on, data like the IP addresses that are logged when you log into or out of Facebook   

      Facebook Account Settings
      1. Just go to Settings > General and click on the link "Download a copy of your Facebook data" at the bottom.
      2. You will be directed to this page where you have to click on Start my archive button to download. Refer the image below
      Download Facebook Data

      Turn off Auto-playing of videos : 


                                               Everyone doesn't have unlimited data so if you have login to facebook to check some updates or having discussion with friends but you see the videos are auto playing and you data just finished off then what will be your reaction?

      Facebook also allows users to turn of the auto-playing of videos. Follow this below steps :

      Turn off autoplay videos
      1. Just go to Settings > Videos
      2. Turn off the auto-playing of videos. 

      Make your profile picture unclickable : 

                                                Privacy is the biggest concern for users all over the internet. One such astonishing feature of Facebook that it restricts other users to enlarge the profile picture. The steps for the same are as follows:

      1. From your timeline, navigate to Photos -> Albums -> Profile Pictures
      2. Select your current profile pic and set its privacy to “Only Me” by default “Public”. 

       There are many such privacy options available on Facebook.

      Download Facebook videos For Google Chrome users:

                                                                Whether You want to download videos from Facebook but you are not able to download it ? then this trick is for you just download the below google chrome extension and you will be able to download any video with just one click.


      Link to Extension : https://chrome.google.com/webstore/detail/social-video-downloader/amjcoehkcacocffpmhnefgoeanepjfkf?hl=en

      Tracking the location of the person one is talking with:

      1. Press WIN+R together. This will open the run window
      2. In the search box type cmd. 
      3. Once the command prompt (cmd) is opened, Type netstat -an and hit enter.
      4. The above-mentioned step will result in a list of the IP addresses, all the incoming, and outgoing addresses, the list will contain the other persons IP address too.
      5. Identify the persons IP
      6. Go on https://ipaddress.ip-adress.com/ and put the IP there
      7. It will show the other person’s geolocation and you can see the location.

      Schedule future posts :

                               The trick is very useful for marketers, online firms, Bloggers etc. This trick can be performed by an addon which a user has to install externally called as Buffer App. You can schedule the posts for future and the posts will be updated automatically on the timeline according to given instructions.
                                                This addon can be used for multiple Facebook accounts, twitter handlers also for Linkedin and other social media platforms.

      Link to Buffer App- https://buffer.com/

      Access Facebook without mobile data :

                                                                We all understand that we will respond to remarks, put repute updates by activating Facebook messaging. It makes use of your FB messages and also you’ll not be charged but if you need to do load more such things as having access to your friend's wall, like all repute, post on someone’s wall including friend and many others and so forth, you can use fonetwish(link is given below).

      although these functions come underneath their paid subscription plan however it doesn’t mean you want to pay excessive. its subscription charge is as little as re. 1 in India.

      Link for fonetwish- http://www.fonetwish.com/


      Access Facebook without mobile data :

                                                                We all understand that we will respond to remarks, put repute updates by activating Facebook messaging. It makes use of your FB messages and also you’ll not be charged but if you need to do load more such things as having access to your friend's wall, like all repute, post on someone’s wall including friend and many others and so forth, you can use fonetwish(link is given below).

      although these functions come underneath their paid subscription plan however it doesn’t mean you want to pay excessive. its subscription charge is as little as re. 1 in India.


      Link for fonetwish- http://www.fonetwish.com/


      Change Facebook Status Font / Font-type:

                                      We can do so many things on facebook with the help of third party apps or sites. This is a small trick where you can change your font  and have some fun with your friends. Enter the status in this below site and it will preview your status in different font types.

      Link To The Site:  

      http://namefunk.com/


      Post a blank status update :


                                          Just type @[0:0: ] in status box and hit Enter and its done. You can use any number in the code like @[1:1: ], @[8:8: ] and make your blank status as long as you can by pressing enter key after each code.              

      Make your status text color blue :

                                        Whenever you put up any status on your Facebook wall, fan pages, you usually find the shade of the status replace is ‘black’ and there isn't some other choice to customize them. the code for the above trick :
                         @@[1:[0:1: your status update goes here ]]
            Just replace “your status update goes here” with the status you want to update on your wall.

      Identify fake account:

                                           The first aspect we see about any Facebook account is their profile photo, in case you discover any FB account for your friendslist suspicious, the first aspect you'll do is use opposite photograph search. this facilitates you find out if similar snapshots are available on the net. First, download the profile photograph of the account you discover suspicious.

                                                               Go to google images click on digicam icon which says a search by means of a photograph, click on upload a photo, now pick out the photograph you had downloaded in advance, now as soon as the uploading completes, Google will display you comparable snapshots that already exist over the net.

      Some Keyboard Shortcuts:

      Facebook to make the users experience even better added some shortcuts which are just pressing the right combination of keys to open or switch features. The keys are different for different browsers.

      If you are using Internet Explorer or Google Chrome in windows then press alt + the below keys like alt + 1, alt + 2 etc

      If you are using Firefox in windows then all you need to press and hold Shift + Alt + the below keys like Shift + Alt + 1, Shift + Alt + 2. 

      If you are using Google Chrome, Firefox or Safari in Mac then press  Ctrl + Opt + below keys

      Shortcuts Description of the shortcut
      Ctrl + Opt + 1 Home
      Ctrl + Opt + 2 Timeline
      Ctrl + Opt + 3 Friends
      Ctrl + Opt + 4 Inbox
      Ctrl + Opt + 5 Notifications
      Ctrl + Opt + 6 Account Settings
      Ctrl + Opt + 7 Privacy
      Ctrl + Opt + 8 About
      Ctrl + Opt + 9 Terms
      Ctrl + G Search Conversations
      Ctrl + Q Show/hide keyboard shortcuts
      Ctrl + Delete Archive/unarchive conversations
      Ctrl + I Go to inbox
      / Search
      C Comment on a story in News Feed
      J and K Scroll between News Feed stories
      I Like or unlike a selected story
      Q Search for a friend to chat with
      P Focus on the text box when making a post

      Conclusion:

      Finally we are concluding our post but if you know some interesting Facebook Tips and Tricks please send to us we will add it here.
                                          We will regularly update this post as we get the latest tips and tricks hope you enjoyed reading this post.


      That's It Thanks For Following our Tutorial '' Amazing Facebook Tips and Tricks That All Users Should know '' 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.

      Read more »

      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.
        Read more »