<style>
/*
* Slides, A Slideshow Plugin for jQuery
* Intructions: http://slidesjs.com
* By: Nathan Searles, http://nathansearles.com
* Version: 1.1.9
* Updated: September 5th, 2011
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
#slides-outer {
width:420px;
height:270px;
position:relative;
margin:0 auto 20px 5px;
background-color:#efefef;
border: 7px #f7f7f7 solid;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
/* Netralisasi gambar */
#slides-outer img {
margin:0px 0px;
padding:0px 0px !important;
background:transparent !important;
border:none !important;
outline:none !important;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */
#slides {
position:absolute;
z-index:100;
font:normal 12px Arial,Sans-Serif;
}
.slides_container {
width:420px;
overflow:hidden;
position:relative;
display:none;
}
.slides_container div.slide, .slides_container div.slide img {
width:420px;
height:270px;
display:block;
overflow:hidden;
}
.slides_container div.slide img {height:auto !important;}
.pagination{ display:none;}
#slides .next,
#slides .prev {
position:absolute;
top:107px;
left:0px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:400px;
}
#slides .caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:30px;
padding:5px 20px 0 20px;
background: #f7f7f7; opacity: 0.9;
width:540px;
font:normal 13px arial;
color:#000;
text-shadow:none;
}
#slides .caption a {
text-decoration:none;
color:#000; font-size:12px; text-align: center;
}
#slides .caption a:hover {
text-decoration:underline;
}
/* End SLIDES */
</style>
<!-- disini belum pakai frame jquery-->
<script src='http://reader-download.googlecode.com/svn/trunk/slides.min.jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
$('#slides').slides({
generatePagination : true,
preload : true,
preloadImage : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
play : 5000,
pause : 2500,
hoverPause : true,
effect : 'slide',
fadeSpeed : 350,
fadeEasing : '',
crossfade : true,
slideSpeed : 350,
slideEasing : '',
// Kustomisasi fungsi untuk menyisipkan caption
animationStart: function(current) {
$('div.caption').animate({bottom:-35}, 100);
},
animationComplete: function(current) {
$('div.caption').animate({bottom:0}, 200);
},
slidesLoaded: function() {
$('div.caption').animate({bottom:0}, 200);
}
});
});
//]]>
</script>
<script type="text/javascript">
var showPostDate_g = false,
showComm_g = false,
slideOpenNewTab = false,
idMode = true,
slidebyLabels = false,
slideLabelName = "Mengenai",
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGfxJqGWrC6tzvPZ5m9QYeH43Z0mg8A0gqZnUal9-p9EugcYomWFEPz4OKFQNUCfhKRTVnYWkB8-f9DU7_pYFAhl1aw87IfETKOAEhHafbU-m6rYAfJUlZ1XXQfCYkJKi6DYrrIlPeSlE/s1600/Jellyfish.jpg",
text = "Komentar",
numposts_g = 4,
home_page = "http://terbaru-665.blogspot.com/";
</script>
<div id="slides-outer">
<div id="slides">
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4SLIDES.js" type="text/javascript"></script>
<a href="#" class="prev">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXqJw6lX2x0Z_7lUpV9Cwayx8TqRJ1WdqZmnMZ0O3FW2sB42osUknTRyc_i7ixoPKBjAYwaSsqHyiskuXGZrtroPqloob_eP9p2Xrydzx7eaVmwgFncuP2BpnkOcj5_blWAnE7Yb2NHCXW/s1600/prev.jpg" width="24" height="43" alt="Arrow Prev" />
</a>
<a href="#" class="next">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihG5ZpCA8UlKZBf7OUNupUjsAlcS2ZLkBmhUpa7_VjasZQM3shv8GvK0yZyRGGoNw5-Rh3KBpezjwgu5LfPJHRmaSKWix2S-VMz0n1YdDeJ6qNe0f3qIjqTv27HBvbpaVkJI2K91MfhWpR/s1600/next.jpg" width="24" height="43" alt="Arrow Next" />
</a>
</div>
</div>
Kalo ditanya keistimewaanya, entahlah saya kurang tau hanya membuat template yang sesuai dengan isi pikiran dan kesenangan saya, jika bermanfaat silahkan dipakai.
