Georgia Lou Studios

Welcome to the Help Center!

Random Slider Images Tutorial

Follow

***Please Note: This tutorial will not work for any of our newer templates released after May of 2017, this includes Marissa, Anaise, Adelle, Jemma, Abigail, Savannah, and Piper+Paige ***

The slider scripts on our Blogger templates generally use selected posts for display.

There is an alternate option to use random images you select with a linked image to any URL. NOTE: No overlay text can be used with this option.

Step 1: Add Code to Theme

  1. 1. Navigate to the Theme page on the Blogger Dashboard.
  2. Click on the gray Edit HTML button.
  3. The template code window will open.
  4. Click anywhere in the code window.
  5. Press the [Control + F] or [Command +F] keys. A small search box will open in the upper right corner.
  6. Search for: </head>
  7. Just ABOVE the </head> tag, paste the following code:
  8. <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <style type='text/css'>
    #main-slider {display:none !important;}
    </style>
    </b:if>
  9. Click on the orange Save theme button

 

Step 2: Slider code

  1. Navigate to the Layout page on the Blogger Dashboard.
  2. Find the green slider widget box.
  3. Click on the Edit link at the right corner of the box. Click the Remove button to delete this widget.
  4. In the green slider section, click the Add a gadget link.
  5. Select HTML/JavaScript from the list of widgets.
  6. In the Configure HTML/JavaScript box, copy and paste the following code into the Content box: 
  7. <!-- Slider Random Images Script -->

    <div id="main-slider" class="owl_carouselle owl-carousel owl-theme">
        <!-- Slide 1 -->
        <div>
            <a href="YOUR-LINK-HERE">
                <img src="YOUR-IMAGE-LINK-HERE" />
            </a>
        </div>
        <!-- Slide 2 -->
        <div>
            <a href="YOUR-LINK-HERE">
                <img src="YOUR-IMAGE-LINK-HERE" />
            </a>
        </div>
        <!-- Slide 3 -->
        <div>
            <a href="YOUR-LINK-HERE">
                <img src="YOUR-IMAGE-LINK-HERE" />
            </a>
        </div>
        <!-- Slide 4 -->
        <div>
            <a href="YOUR-LINK-HERE">
                <img src="YOUR-IMAGE-LINK-HERE" />
            </a>
        </div>
        <!-- Slide 5 -->
        <div>
            <a href="YOUR-LINK-HERE">
                <img src="YOUR-IMAGE-LINK-HERE" />
            </a>
        </div>
        <!-- Slide 6 -->
        <div>
            <a href="YOUR-LINK-HERE">
                <img src="YOUR-IMAGE-LINK-HERE" />
            </a>
        </div>
    </div>
  8. This script will accomodate 6 linked images. Each slide is clarly marked.
  9. In the YOUR-LINK-HERE location, insert the link for the slide, i.e. where the visitor will go when they click on the slide.
  10. In the YOUR-IMAGE-LINK-HERE location, insert the link to the image. This is the unique URL for the image.
  11. If you need help uploading an image and finding the image link, see this tutorial: http://helplogger.blogspot.com/2013/09/upload-images-and-get-url-of-image.html
  12. NOTE: Make sure you set the image size to "Original" before you copy the link. This ensures the best image quality and size for use in the slider.
  13. Repeat for each slide.
  14. If using less than 6 slides, remove the extra slide sections from <div> to next </div>.
  15. When done adding all links, click the orange Save button to save the slider.
Was this article helpful?
0 out of 0 found this helpful

Comments

Powered by Zendesk