<script
src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/featured-post/n17-content-slider/n17-content-slider-06.js"
type="text/javascript"></script><style type="text/css">
#slider4{
border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
}
#paginate-slider4{
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
}
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
}
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
}
.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 500px; /*width of featured content slider*/
height: 325px;
}
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.pagination{
width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
}
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
}
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;
}
</style>
<div style="float:left;">
<div id="slider4" class="sliderwrapper">
<div style="background: url('http://2.bp.blogspot.com/-Y9C1kavbpBQ/UhsGgU4g8vI/AAAAAAAABJk/SyI40OvYfo4/s1600/How+to+change+mouse+cursor+in+blogger+blog+to+animated+cursors.png') center left no-repeat" class="contentdiv">
</div>
<div style="background: url('http://4.bp.blogspot.com/-7VVQZWZSIyY/UhsJRPL2X4I/AAAAAAAABJ4/F2q5GIjrRzA/s1600/Numbered+Page+Navigation+For+Blogger+New+Script.png') center left no-repeat" class="contentdiv">
</div>
<div style="background: url('http://4.bp.blogspot.com/-gIUZJEYkJz0/UhtVPXnTPpI/AAAAAAAABKQ/lxfB6wI6GJQ/s1600/How+To+Add+Snow+Effect+On+The+Blogger+Mouse+Cursor+Area.png') center left no-repeat" class="contentdiv">
</div>
<div style="background: url('http://4.bp.blogspot.com/-uPng9qokTSQ/UhtXcrC3koI/AAAAAAAABKc/LuwA-MwlqvI/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png') center left no-repeat" class="contentdiv">
</div>
<div style="background: url('http://4.bp.blogspot.com/-yGyAb5QH36Q/UhtamdVBndI/AAAAAAAABKw/Wath3NPYpyQ/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png') center left no-repeat" class="contentdiv">
</div>
</div>
<div id="paginate-slider4">
<a href="#" target="_blank" class="toc"><img alt="Image1" src="http://1.bp.blogspot.com/-e0cthiZvwng/UhsE3FlA4RI/AAAAAAAABJY/hkhLi4qyuHA/s1600/Change+Mouse+Cursor+Generator.png"/></a>
<a href="#" target="_blank" class="toc"><img alt="Image2" src="http://1.bp.blogspot.com/-gFr9AkblGXY/UhsIcu_3JuI/AAAAAAAABJw/Mbm_X3_CAR8/s1600/Numbered+Page+Navigation.png"/></a>
<a href="#" target="_blank" class="toc"><img alt="Image3" src="http://1.bp.blogspot.com/-sn1RsQYTjcw/UhtUKQDCqlI/AAAAAAAABKI/9oCcA0HQ_q4/s1600/Snow+Cursor+Code+Generatort.png"/></a>
<a href="#" target="_blank" class="toc"><img alt="Image4" src="http://2.bp.blogspot.com/-3fq0GaT-VcQ/UhtX_zCaRZI/AAAAAAAABKk/6MMmvx4hhag/s1600/Blogger+Falling+Object+Generator.png"/></a>
<a href="#" target="_blank" class="toc"><img alt="Image5" src="http://3.bp.blogspot.com/-yLC7HzcNyK4/Uhtb5IsbZAI/AAAAAAAABK8/Ah_9CX7mlWo/s1600/Animated+Flash+Clock.png"/></a>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
<div class="clear"></div>
0 komentar:
Post a Comment