Epsilon Slider

SCARLETT, BISMAX and MONEZINE download links are READY

DESCRIPTION

Slider with Teaser Text is a link with thumbnails picture and short text as teaser. In this EPSILON Blogger Template, the size of image thumbnails is 280px width and 150px height, the position is below Category Menu or above main post.



HOW TO FILL THE SLIDER WIDGET
Every single image in slide area is coded by HTML combination. I will show you the structure of that combination.

Below, This is the strucutre of PER CONTENT of epsilon image slide:

<div class="panel"> <h2><a href="POST-ADDRESS-HERE" title="HOVER-TITLE">POST TITLE </a></h2>
<p>TEASER TEXT [...]</p> <img src="IMAGE-SOURCE-ADDRESS-HERE" style='width:280px; height:150px;' alt=""/> </div>

Please, do not change the values of image width and height . Also, do not change the red text eventhough it is quote symbol.

Change the word :

• POST-ADDRESS-HERE with your post link location
  
• POST TITLE with your own title
• POST-ADDRESS-HERE with your post link address in your blog.
• IMAGE-SOURCE-ADDRESS-HERE with your image source address.
• HOVER TITLE with your short description. HOVER TITLE is hover text that showed when your mouse is put over the title. You can set it "Link to …title... " or anything.

You can edit this in word processor, notepad, or alike.

MAKE MORE THAN ONE IMAGE SLIDE (RECOMMENDED MAX 12 IMAGE SLIDE)
Just copy another content below the previous. You can make it three, four, or five image slide show. After that, Change all link, image source, and hover short description.

AFTER MAKE YOUR OWN CUSTOMIZATION

After changing all words with your post link, source, and hover description; please read the following steps :

1. Copy your changing.
2. Go to Blogger ADD PAGE ELEMENT
3. You’ll see Slider Gadget
4. then, press edit
5. after that, Paste your code into the box
6. Save it

EXAMPLE (YOU CAN COPY AND TRY ) :

<div class="panel"> <h2><a href="" title=" Link to SUN">SUN</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisl, tincidunt vel, tincidunt vel, gravida ac, odio. Praesent condimentum, quam at aliquet consectetuer, arcu augue condimentum turpis, ut accumsan augue lacus nec felis. Sed volutpat euismod nisl. Cras vel massa. [...]</p> <img src="http://4.bp.blogspot.com/_xfdD6S9fOk4/SdpuAr2JThI/AAAAAAAAAqM/MwIh5Xqlpzs/s1600/ZZGAMBAR01_Sun.jpg" style='width:280px; height:150px;' alt=""/> </div>

<div class="panel"> <h2><a href="" title="Link to Mercury">Mercury</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisl, tincidunt vel, tincidunt vel, gravida ac, odio. Praesent condimentum, quam at aliquet consectetuer, arcu augue condimentum turpis, ut accumsan augue lacus nec felis. Sed volutpat euismod nisl. Cras vel massa. [...]</p> <img src="http://2.bp.blogspot.com/_xfdD6S9fOk4/SdpuAk8bCyI/AAAAAAAAAqU/SO8OJ48miGg/s1600/ZZGAMBAR02_Mercury.jpg" style='width:280px; height:150px;' alt=""/> </div>

<div class="panel"> <h2><a href="" title="Link to EARTH">Earth</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisl, tincidunt vel, tincidunt vel, gravida ac, odio. Praesent condimentum, quam at aliquet consectetuer, arcu augue condimentum turpis, ut accumsan augue lacus nec felis. Sed volutpat euismod nisl. Cras vel massa. [...]</p> <img src="http://1.bp.blogspot.com/_xfdD6S9fOk4/SdpuA3WtKRI/AAAAAAAAAqk/gUi_-Q88Fqc/s1600/ZZGAMBAR04_Earth.jpg" style='width:280px; height:150px;' alt=""/> </div>

<div class="panel"> <h2><a href="http://www.cahayabiru.com" title="VENUS">Venus</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisl, tincidunt vel, tincidunt vel, gravida ac, odio. Praesent condimentum, quam at aliquet consectetuer, arcu augue condimentum turpis, ut accumsan augue lacus nec felis. Sed volutpat euismod nisl. Cras vel massa. [...]</p> <img src="http://4.bp.blogspot.com/_xfdD6S9fOk4/SdpuAl7FCsI/AAAAAAAAAqc/wQUqM3qmctU/s1600/ZZGAMBAR03_Venus.jpg" style='width:280px; height:150px;' alt=""/> </div>


<div class="panel"> <h2><a href="" title="HOVER-POST-TITLE">Moon</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisl, tincidunt vel, tincidunt vel, gravida ac, odio. Praesent condimentum, quam at aliquet consectetuer, arcu augue condimentum turpis, ut accumsan augue lacus nec felis. Sed volutpat euismod nisl. Cras vel massa. [...]</p> <img src="http://2.bp.blogspot.com/_xfdD6S9fOk4/SdpuA5BqVWI/AAAAAAAAAqs/njBtRLffEhI/s1600/ZZGAMBAR05_Moon.jpg" style='width:280px; height:150px;' alt=""/> </div>

<div class="panel"> <h2><a href="" title="HOVER-POST-TITLE">Mars</a></h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisl, tincidunt vel, tincidunt vel, gravida ac, odio. Praesent condimentum, quam at aliquet consectetuer, arcu augue condimentum turpis, ut accumsan augue lacus nec felis. Sed volutpat euismod nisl. Cras vel massa. [...]</p> <img src="http://2.bp.blogspot.com/_xfdD6S9fOk4/SdpuFUlQx3I/AAAAAAAAAq0/P2Bio0lpiE4/s1600/ZZGAMBAR06_Mars.jpg" style='width:280px; height:150px;' alt=""/> </div>