Scarlett Post List

This writing is explaining about how to fill in the Post list in Scarlett template.

Short Description

Description
I do not know how to describe the postlist. Maybe you could help me about it. Well, Post list position is in top right column. You can see the screenshot below... The postlist use fixed height in its CSS. it can load 4 custom post with link which turns animated up - down .


HOW TO FILL THE CONTENT IN POST LIST
Every single content in Post link is coded by HTML combination. Below, I will show you the structure of that combination. To fill the content of Post list is easy as set the menu. :)

HTML Structure

<ul class="spy">


<li>

<img style="width:100px; height:60px" alt="" src="YOUR-IMAGE-ADDRESS"/>
<h2><a href="YOUR-POST-LINK-HERE" title="TITLE">POST TITLE</a></h2>
<div class="auth"> Posted by AUTHOR</div>
</li>

</ul>

Change the words:

• YOUR-POST-LINK-HERE with your own featured article address
• YOUR-IMAGE-ADDRESS with your image hosted
• TITLE with the title of your post/article. title is hover, the title will show when your mouse put over the post title link
  
• POST TITLE with title of your post
• AUTHOR with your name

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

MAKE MORE THAN ONE
Just copy another content below the previous. You can make it three, four, or five. After that, Change all link, image source, and the title.
Please, see below :

<ul class="spy">

<img style="width:100px; height:60px" alt="" src="YOUR-IMAGE-ADDRESS"/>
<h2><a href="YOUR-POST-LINK-HERE" title="TITLE">POST TITLE</a></h2>
<div class="auth"> Posted by AUTHOR</div>
</li>


<img style="width:100px; height:60px" alt="" src="YOUR-IMAGE-ADDRESS"/>
<h2><a href="YOUR-POST-LINK-HERE" title="TITLE">POST TITLE</a></h2>
<div class="auth"> Posted by AUTHOR</div>
</li>

<-- You can add more list by copy-paste the blue text in here -->

</ul>

Please, do not delete the red texts

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 page element
3. You will see postlink widget
4. then, press edit
5. Paste your code into the box
6. Save it

EXAMPLE FOR POSTLIST

EXAMPLE HTML code (you could copy-paste into your widget/gadget) :

<ul class="spy">

<li><img style="width:100px; height:60px" alt="" src="http://img99.imageshack.us/img99/6771/gamezgalsym2.jpg"/> <h2><a href="http://www.cahayabiru.com/2009/02/blogger-template-gamezine-cahaya.html" title="GameZine Bloggerized"> Game Zine </a></h2>
<div class="auth"> Posted by Cahaya Biru </div> </li>
<li><img style="width:100px; height:60px" alt="" src="http://img362.imageshack.us/img362/6766/screendh2.jpg"/>
<h2><a href="www.cahayabiru.com/2009/02/blogger-template-zinmag-futura.html"> Zinmag Futura</a></h2><div class="auth"> Posted by Cahaya Biru </div> </li>
<li>
<a href="http://cahayabiru.com/2009/01/blogger-template-forex-press.html" title="Forex Press"><img style="width:100px; height:60px" alt="" src="http://img300.imageshack.us/img300/7600/forexgalmg1.jpg"/> </a> <h2><a href="http://www.cahayabiru.com/2009/01/blogger-template-forex-press.html" title="Forex Press">Forex Press </a></h2>
<div class="auth"> Posted by Cahaya Biru</div> </li>
<li>
<img style="width:100px; height:60px" alt="" src="http://img99.imageshack.us/img99/6771/gamezgalsym2.jpg"/>
<h2><a href="http://cahayabiru-sphere.blogspot.com/2009/02/blogger-template-gamezine-cahaya.html" title="GameZine Bloggerized"> Game Zine </a></h2> <div class="auth"> Posted by Cahaya Biru </div> </li>

</ul>

Have a nice try .........