Scarlett Image Slider

This writing is explaining about how to fill the content of Image Slider Of Scarlett Template.

Short Description

Image slide is a link with thumbnails picture. In this SCARLETT Template, the size of image thumbnails is 200px width and 100px height, the position is below Category Menu or above main post.



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

HTML Structure

<div class="panel">

<a href="ARTICLE-LINK-HERE"
rel="bookmark" title="Link to HOVER-TITLE"><img style="width
height:100px" src="IMAGE-SOURCE-ADDRESS-HERE"
alt=""/></a>

<h2><a href="ARTICLE-LINK-HERE"
rel="bookmark" title="Link to HOVER TITLE">ARTICLE-
TITLE</a></h2>

</div>

Please, Change the word :

• ARTICLE-LINK-HERE with your article link address in your blog. This link will be directed to your post.
• IMAGE-SOURCE-ADDRESS-HERE with your image source address.
• HOVER TITLE with your short description. Hover is some texts or short description that showed when your mouse is put over the title.
• ARTICLE- TITLEwith the title of your article/post title

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

MAKE MORE THAN ONE (RECOMMENDED MAX 12 IMAGE SLIDE)
To make another content of the Slider, copy-paste 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 as explained above.
Ok. Have a nice blogging.

After Make 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 page element
3. You’ll see Slider Gadget
4. then, press edit
5. Paste your code into the box
6. Save it

Now, you have images that will be showed in web.

Example Model For Slide Show

<div class="panel">
<img style="width:200px; height:100px" src=" http://4.bp.blogspot.com/_xfdD6S9fOk4/SdpuAr2JThI/AAAAAAAAAqM/MwIh5Xqlpzs/s1600/ZZGAMBAR01_Sun.jpg" alt=""/>
<h2><a href="http://www.cahayabiru.com/" rel="bookmark" title="Link to SUN">SUN </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" src="http://2.bp.blogspot.com/_xfdD6S9fOk4/SdpuAk8bCyI/AAAAAAAAAqU/SO8OJ48miGg/s1600/ZZGAMBAR02_Mercury.jpg" alt=""/>
<h2><a href="http://www.cahayabiru.com/" rel="bookmark" title="Link to MERCURY"> MERCURY </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" src=" http://4.bp.blogspot.com/_xfdD6S9fOk4/SdpuAl7FCsI/AAAAAAAAAqc/wQUqM3qmctU/s1600/ZZGAMBAR03_Venus.jpg" alt=""/>
<h2><a href="http://www.cahayabiru.com/" rel="bookmark" title="Link to VENUS"> VENUS </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" src=" http://1.bp.blogspot.com/_xfdD6S9fOk4/SdpuA3WtKRI/AAAAAAAAAqk/gUi_-Q88Fqc/s1600/ZZGAMBAR04_Earth.jpg" alt=""/>
<h2><a href="http://www.cahayabiru.com/" rel="bookmark" title="Link to EARTH"> EARTH </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" src=" http://2.bp.blogspot.com/_xfdD6S9fOk4/SdpuA5BqVWI/AAAAAAAAAqs/njBtRLffEhI/s1600/ZZGAMBAR05_Moon.jpg" alt=""/>
<h2><a href="http://www.cahayabiru.com/" rel="bookmark" title="Link to MOON">MOON</a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" src=" http://2.bp.blogspot.com/_xfdD6S9fOk4/SdpuFUlQx3I/AAAAAAAAAq0/P2Bio0lpiE4/s1600/ZZGAMBAR06_Mars.jpg" alt=""/>
<h2><a href="http://www.cahayabiru.com/" rel="bookmark" title="Link to MARS">MARS </a></h2>
</div>