Scribd
Upload
23 views

Setting Up Image Slider

This document provides instructions for setting up an image and description slider on a blog. It explains that the HTML code for each slide can be found by searching for the "cs_article" class. This code contains placeholders for the slide heading, description, link, and image that can be replaced to customize each slide. The steps are to replace the heading, description, link URL, and image URL shown in the example code block to update the content and appearance of an individual slide.

Uploaded by

Kelly Faustin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
23 views

Setting Up Image Slider

This document provides instructions for setting up an image and description slider on a blog. It explains that the HTML code for each slide can be found by searching for the "cs_article" class. This code contains placeholders for the slide heading, description, link, and image that can be replaced to customize each slide. The steps are to replace the heading, description, link URL, and image URL shown in the example code block to update the content and appearance of an individual slide.

Uploaded by

Kelly Faustin
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 1

How to set up Image + Description Slider

1. Goto EDIT HTML page


2. Using CTRL+F, find class='cs_article'
3. The browser will show you the following code:

<div class='cs_article' style='width: 595px; height: 230px;'>


<div class='left'>
<h2>Suspendisse sed odio ut mi auctor blandit</h2>
<p>Aliquam erat volutpat. Maecenas eget nisl id nisi consequat ultrices et eu nunc.
Praesent ac leo vel dolor rutrum egestas.</p>
<div class='button'><a href='#'>Read more</a></div>
</div>
<div class='right'> <a href='#' target='_parent'><img alt='01'
src='http://3.bp.blogspot.com/_3OWQV4GZVJQ/TNF93EJzlZI/AAAAAAAAAlg/20eaYEsG9BU/s1600/
templatemo_slide02.jpg'/></a> </div>
</div>
<!-- End cs_article -->

4. The code show above is the a set of code for ONE image slide that you see on your blog. There are
similar set of codes for each slide as you scroll down in the HTML code.

To make changes in the above slide, you need change and replace the following things,

A. To put a heading of your image slide. Replace Suspendisse sed odio ut mi auctor blandit with your
own text.

B. To change slide description, Replace the following text:


Aliquam erat volutpat. Maecenas eget nisl id nisi consequat ultrices et eu nunc. Praesent ac leo
vel dolor rutrum egestas.

C. To link your slide to a Post/Page, Replace # with your own post/page link in <a href='#'>

D. To change image of the slide, replace the following image link with yours:
http://3.bp.blogspot.com/_3OWQV4GZVJQ/TNF93EJzlZI/AAAAAAAAAlg/20eaYEsG9BU/s1600/tem
platemo_slide02.jpg

Follow the steps A B C D to make changes with the rest of the slides.

All the very best!

Volverene Evo
Templates Block - Free Blogger templates that really matter!
http://www.templatesblock.com/

You might also like