™Galery™

/* Slider image */

#containerSlider {
width:210px;
height:110px;
margin:0 40px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:210px;
height:110px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVC6KWDI/AAAAAAAACbI/PPeBfsVUs30/s800/prev.gif) no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVAwivSI/AAAAAAAACbM/rWvFhU-sWa0/s800/next.gif) no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:5px;
width:200px;
height:100px;
}
 /*
Slideshow style rules.
*/
#contentSlide {
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18NoyTpX5cIZ8WXvrfhpEudB5cGO9UQln-VLkx2SPXJ8ui0GM1H7FIAr5ifSzQ37GSDJFlwkzkdouYKRhbHjhlexrSwTlQ15NbP5mKeZnJmber3GKaI2F0fR2wknLyGZ4vfpc0ox_6Yw/s1600/project-3.png) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvrW3quVcvcxPKtH_b9hU6h4axBvqer7wWFqWdWW99OIDT3WGg-Vu7qV-xEMH1aFOtoKQ-E9HhElSVi1uW2waCZXMa1p37GC6zbLdkOc8iCQTPmFFL-u746mVoGw2zYO7DnGsImcFfF9U/s1600/prev-1.png) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwhP2_9oPpnBn-wDX6L5d4ItAb_8ug0AmI9BqLIi2cVZo6ckGCPfo-1L6JEilQ6RWdOYJd3Nrysx3OesOn54E0XvkTidDOafjJ1PBODRK0MlITNyNcTFtQC_FUK6f7rNRTAsYvBnT3DHU/s1600/next-1.png) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>
</script>

 <!-- Slideshow HTML -->
<div id='contentSlide'><div id='slideshow'>
<div id='slidesContainer'>
<div class='slide'>
<h2>Content Slider /  Slide Show</h2>
<p><a href='#'><img alt='Deskripsi gambar' height='145' src='http://i1094.photobucket.com/albums/i447/kang-da2ng/ranu.jpg' width='215'/></a>YANG BERMINAT DENGAN INI SILAHKAN <A href="#">"KLIK DISINI</A></p>
</div>
<div class='slide'>
<h2>Content Slider /  Slide Show</h2>
<p><a href='#'><img alt='Deskripsi gambar' height='145' src='http://i1094.photobucket.com/albums/i447/kang-da2ng/iwanranu.jpg' width='215'/></a>Kenang-kenangan SMKN 1 KAWALI 2006/2007</p>   
</div>
<div class='slide'>
<h2>Content Slider /  Slide Show</h2>
<p><a href='#'><img alt='Deskripsi gambar' height='145' src='http://i1094.photobucket.com/albums/i447/kang-da2ng/iwannende.jpg' width='215'/></a>
Kenang-kenangan SMKN 1 KAWALI 2006/2007</p>
</div>
<div class='slide'>
<h2>Content Slider /  Slide Show</h2>
<p><a href='#'><img alt='Dskripsi gambar' height='145' src='http://i1094.photobucket.com/albums/i447/kang-da2ng/iwan2.jpg' width='215'/></a>Kenang-kenangan SMKN 1 KAWALI 2006/2007
</p>
</div>
</div>
</div></div>
<!-- END Slideshow -->