Georgia Lou Studios

Welcome to the Help Center!

Random Slider Tutorial | 3.0 Blogger Templates

Follow

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.

NOTE: This tutorial applies to the 3.0 templates only: Anaise, Adelle, Jemma, Abigail, and Savannah.

Step 1: Edit Theme Code

  1. Navigate to the Theme page on the Blogger Dashboard.
  2. Click on the gray Edit HTML button.slider1.png
  3. The template code window will open.
  4. Find the Jump to widget drop down field and select the HTML491 widget. Just click on the widget name to jump to widget in the code.slider2.png
  5. You may need to expand the widget code. Click on the black arrows next to the widget in the code until the code is fully expanded.slider3.png
  6. Find the following section of code. Highlight and delete this code:
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='cycle-slideshow' data-cycle-manual-speed='700' data-cycle-random='false' data-cycle-slides='li' data-cycle-speed='1400' data-cycle-swipe='true' data-cycle-swipe-fx='scrollHorz'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+cat1+&quot;?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div class='cycle-prev'/>
    <div class='cycle-next'/>
    </div>
    </b:if>
    slider4.png
  7. Replace this code in the exact same place with the following code:
    <div class='widget-content'>
    <data:content/>
    </div>slider5.png
  8. Click the orange Save theme button.

Step 2: Slider code

  1. Navigate to the Layout page on the Blogger Dashboard.
  2. Find the Post Slider widget box.
  3. Click on the Edit link at the right corner of the box.
  4. In the Configure HTML/JavaScript box, copy and paste the following code into the Content box:

    <div class='cycle-slideshow' data-cycle-manual-speed='700' data-cycle-random='false' data-cycle-slides='li' data-cycle-speed='1400' data-cycle-swipe='true' data-cycle-swipe-fx='scrollHorz'>
    <div class='cycle-prev'></div>
    <div class='cycle-next'></div>

    <!-- The Slides -->

    <!-- Slide 1 -->
    <li class="cycle-slide">
    <div class="cycle-slideshow">
    <a href="https://your-slide-link.html"></a>
    <div class="slide-image" style="background-image: url('https://your-image-link.jpg');"></div>
    </div>
    </li>

    <!-- Slide 2 -->
    <li class="cycle-slide">
    <div class="cycle-slideshow">
    <a href="https://your-slide-link.html"></a>
    <div class="slide-image" style="background-image: url('https://your-image-link.jpg');"></div>
    </div>
    </li>

    <!-- Slide 3 -->
    <li class="cycle-slide">
    <div class="cycle-slideshow">
    <a href="https://your-slide-link.html"></a>
    <div class="slide-image" style="background-image: url('https://your-image-link.jpg');"></div>
    </div>
    </li>

    <!-- Slide 4 -->
    <li class="cycle-slide">
    <div class="cycle-slideshow">
    <a href="https://your-slide-link.html"></a>
    <div class="slide-image" style="background-image: url('https://your-image-link.jpg');"></div>
    </div>
    </li>

    <!-- Slide 5 -->
    <li class="cycle-slide">
    <div class="cycle-slideshow">
    <a href="https://your-slide-link.html"></a>
    <div class="slide-image" style="background-image: url('https://your-image-link.jpg');"></div>
    </div>
    </li>

    </div>

    slider6.png
  5. This script will accommodate 5 linked images. Each slide is clearly marked.
  6. In the https://your-slide-link.html location, insert the link for the slide, i.e. where the visitor will go when they click on the slide.
  7. In the https://your-image-link.jpg location, insert the link to the image. This is the unique URL for the image.
  8. 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
  9. 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.
  10. Repeat for each slide.
  11. If using less than 5 slides, remove the extra slide sections from <li> to next </li>.
  12. 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