Home > JavaScript Blogger > Membuat Slider Konten
Membuat Slider Konten
Demo :
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Penempatannya
dibawah ]]></b:skin>
........
diatas </head>
<style type="text/css">
.sliderwrapper{
position: relative;
overflow: hidden;
border: 10px solid yellow;
border-bottom-width: 6px;
width: 400px;
height: 250px;
}
.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
background: black;
width: 390px;
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 400px;
text-align: right;
background-color: black;
padding: 5px 10px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #00007D;
background: white;
}
.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}
</style>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/Fitur%20konten%20slider.js">
</script>
Penempatannya
dibawah <body>
........
diatas </body>
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
<h3>Contoh 1</h3>
<p>Hanya Sekedar Contoh.....</p>
</div>
<div class="contentdiv">
<h3>Contoh 2</h3>
<p>Hanya Sekedar Contoh.....</p>
</div>
<div class="contentdiv">
<h3>Contoh 3</h3>
<p>Hanya Sekedar Contoh.....</p>
</div>
</div>
<div id="paginate-slider1" class="pagination">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1",
contentsource: ["inline", ""],
toc: "#increment",
nextprev: ["Previous", "Next"],
revealtype: "click",
enablefade: [true, 0.2],
autorotate: [true, 3000],
onChange: function(previndex, curindex){
}
})
</script>
<br/>
<br/>
<div id="slider2" class="sliderwrapper">
<div class="contentdiv">
<h3>Contoh 1</h3>
<p>Hanya Sekedar Contoh.....</p>
</div>
<div class="contentdiv">
<h3>Contoh 2</h3>
<p>Hanya Sekedar Contoh.....</p>
</div>
<div class="contentdiv">
<h3>Contoh 3</h3>
<p>Hanya Sekedar Contoh.....</p>
</div>
</div>
<div id="paginate-slider2" class="pagination">
<a href="#" class="toc">1</a> <a href="#" class="toc">2</a> <a href="#" class="toc">3</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider2",
contentsource: ["inline", ""],
toc: "markup",
nextprev: ["Previous", "Next"],
revealtype: "click",
enablefade: [true, 0.2],
autorotate: [true, 3000],
onChange: function(previndex, curindex){
}
})
</script>
Credit : Dynamic Drive
Alhamdulillah
0 comments:
Posting Komentar