Gamecraft Installation Tutorial | Small Picture Of Slide Area With Tab

This Article explain about how to insert the "Small Picture With Tab"
<!-- --------------------------------------------------------------------------------------------------------------- -->
Slide Area -- Right Tab with small picture
go to Design -- add page element -- look at right side of slide area, you'll see texts "small picture with tab -- click edit



Fill it the box with this HTML structure below, You could edit it in notepad or wordprocessor :

<li><a class="listab rounded" href="#feature-1"><img class="boximage" src="YOUR-IMAGE-URL" width="100" height="70" alt="" /><h3> TITLE-HERE</h3><p> SHORT-DESCRIPTION-HERE. ... </p></a></li>
<li><a class="listab rounded" href="#feature-2"><img class="boximage" src="YOUR-IMAGE-URL" width="100" height="70" alt="" /><h3> TITLE-HERE</h3><p> SHORT-DESCRIPTION-HERE. ... </p></a></li>
<li><a class="listab rounded" href="#feature-3"><img class="boximage" src="YOUR-IMAGE-URL" width="100" height="70" alt="" /><h3> TITLE-HERE</h3><p> SHORT-DESCRIPTION-HERE. ... </p></a></li>
<li><a class="listab rounded" href="#feature-4"><img class="boximage" src="YOUR-IMAGE-URL" width="100" height="70" alt="" /><h3> TITLE-HERE</h3><p> SHORT-DESCRIPTION-HERE. ... </p></a></li>
<li><a class="listab rounded" href="#feature-5"><img class="boximage" src="YOUR-IMAGE-URL" width="100" height="70" alt="" /><h3> TITLE-HERE</h3><p> SHORT-DESCRIPTION-HERE. ... </p></a></li>

• Change the YOUR-IMAGE-URL with your image location
• change the TITLE-HERE with your own title desired
• Change the SHORT-DESCRIPTION-HERE with your Description
• please do not change the #feature-1 until #feature-5 because they are linking with javascript. Changing will cause non functional features

EXAMPLE : YOU CAN COPY THIS EXAMPLE BELOW

<li><a class="listab rounded" href="#feature-1"><img class="boximage" src="http://sites.google.com/site/gamecraft22/fileisian/timthumb_004.jpg?attredirects=0" width="100" height="70" alt="" /><h3> Righteous Kill</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. ... </p></a></li>
<li><a class="listab rounded" href="#feature-2"><img class="boximage" src="http://sites.google.com/site/gamecraft22/fileisian/timthumb_005.jpg?attredirects=0" alt="" /><h3> Quisque sed felis</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. ... </p> </a></li>
<li><a class="listab rounded" href="#feature-3">
<img class="boximage" src="http://sites.google.com/site/gamecraft22/fileisian/timthumb_014.jpg?attredirects=0" alt="" /><h3> Etiam augue pede, molestie...</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. ... </p></a></li>
<li><a class="listab rounded" href="#feature-4">
<img class="boximage" src="http://sites.google.com/site/gamecraft22/fileisian/timthumb_002.jpg?attredirects=0" alt="" /><h3> Hellgate is back</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet ... </p></a></li>
<li><a class="listab rounded" href="#feature-5"><img class="boximage" src="http://sites.google.com/site/gamecraft22/fileisian/timthumb_012.jpg?attredirects=0" alt="" /><h3> Post with links</h3><p>This is the web2feel wordpress theme demo site. You have come here from our home ... </p></a></li>

<!-- ----------------------------------------------------------------------------------------------------------------------- -->