Ada 2 Type Previous / Next Slider
Type 1
1. Buka Edit HTML : Paste diatas kode <b:skin><![CDATA[/*
<script src='http://bloggermaster.googlecode.com/files/compressed.js' type='text/javascript'/>
2. Paste diatas kode ]]></b:skin>
*{margin:0;padding:0}
body{margin:20px;background-color:#FFF}
ul.nums{float:left;width:100%;margin-bottom:10px}
ul.nums li {
border:1px solid #333333;
float:left;
font-weight:bold;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 5px 0 0;
text-align:center;
}
ul.nums span {
float:left;
font-weight:bold;
line-height:25px;
margin:0 5px 0 0;
}
ul.nums li a {
color:#666666;
display:block;
padding:3px;
text-decoration:none;
width:15px;
}
ul.nums li a:hover {
background-color:#DDDDDD;
}
ul.nums li.current {
background-color:#B2A384;
}
ul.nums li.current a {
color:#FFFFFF;
}
ul.nums li.current a:hover {
background-color:#B2A384;
}
#mask {
width:505px;
height:305px;
overflow:hidden;
border:1px solid #666;
position:relative;
background-color:#999;
float:left;
}
#folio {
position:absolute;
top:0;
left:0;
width:3535px;
float:left;
}
.col {
display:block;
width:505px;
height:305px;
float:left;
}
.site {
width:233px;
height:133px;
float:left;
padding:5px;
margin:5px 0 0 5px;
border:1px solid #666;
background-color:#FFF;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}
3. Paste di page element + Add A Gadget
<script type="text/javascript">
function slideFolio(col){
var x = ((col-1)*-505)
var folioChange = new Fx.Tween('folio', {duration:1000});
folioChange.start('left',x);
var cur = "trigger"+col;
$(cur).addClass('current');
for (i=1;i<=8;i++){
var loopLI = "trigger"+i;
if (cur==loopLI){}else{
$(loopLI).removeClass('current');
}
}
}
</script>
<center><ul class="nums">
<li class="current" id="trigger1">
<a class="liinternal" href="javascript:slideFolio(1);">1</a>
</li>
<li id="trigger2">
<a class="liinternal" href="javascript:slideFolio(2);">2</a>
</li>
<li id="trigger3">
<a class="liinternal" href="javascript:slideFolio(3);">3</a>
</li>
<li id="trigger4">
<a class="liinternal" href="javascript:slideFolio(4);">4</a>
</li>
</ul>
<div id="mask">
<div id="folio">
<div class="col">
<div class="site">
<h3>Breadcrumb</h3>
<a href="http://blogywalky.blogspot.com/2011/03/cara-membuat-breadcrumb-di-blogger.html" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0" />
<span>Breadcrumb</span></a>
</div>
<div class="site">
<h3>Spoiler</h3>
<a href="http://blogywalky.blogspot.com/2011/03/cara-membuat-spoiler-di-blogger.html" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0" />
<span>Spoiler</span></a>
</div>
<div class="site">
<h3>Daftar Isi Label</h3>
<a href="http://blogywalky.blogspot.com/2008/03/cara-membuat-daftar-isi-berdasarkan.html" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0" />
<span>Daftar Isi Label</span></a>
</div>
<div class="site">
<h3>Shopping Cart</h3>
<a href="http://blogywalky.blogspot.com/2011/03/cara-membuat-your-shopping-cart-di-blog.html" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" />
<span>Shopping Cart</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0" />
<span>Blogger Master</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com/2011/03/cara-membuat-breadcrumb-di-blogger.html" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0" />
<span>Blogger Master</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0" />
<span>Blogger Master</span></a>
</div>
<div class="site">
<h3>Blogger Master</h3>
<a href="http://blogywalky.blogspot.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0" />
<span>Blogger Master</span></a>
</div>
</div>
</div>
</div></center>
Type 2
1. Buka Edit HTML : Paste diatas kode <b:skin><![CDATA[/*
<script src='http://bloggermaster.googlecode.com/files/compressed.js' type='text/javascript'/>
2. Paste diatas kode ]]></b:skin>
*{margin:0;padding:0}
body{margin:20px;background-color:#FFF}
.button{width:50px;height:305px;float:left;border:1px solid #666;cursor:pointer;background:url(buttons.jpg) no-repeat}
#next{margin-left:10px;background-position:center right}
#prev{margin-right:10px;background-position:center left}
#mask {
width:505px;
height:305px;
overflow:hidden;
border:1px solid #666;
position:relative;
background-color:#999;
float:left;
}
#folio {
position:absolute;
top:0;
left:0;
width:3535px;
float:left;
}
.col {
display:block;
width:505px;
height:305px;
float:left;
}
.site {
width:233px;
height:133px;
float:left;
padding:5px;
margin:5px 0 0 5px;
border:1px solid #666;
background-color:#FFF;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
.site img{padding:2px;border:1px solid #CCC}
.site span{display:block}
3. Paste di page element + Add A Gadget
<div id="prev" class="button"></div>
<div id="mask">
<div style="left: 0px;" id="folio">
<div class="col">
<div class="site">
<h3>adra</h3>
<a href="http://www.adra.org.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0">
<span>www.adra.org.nz</span></a>
</div>
<div class="site">
<h3>adrian hodge</h3>
<a href="http://www.adrianhodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0">
<span>www.adrianhodge.com</span></a>
</div>
<div class="site">
<h3>bienetre</h3>
<a href="http://www.bienetre.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0">
<span>www.bienetre.co.nz</span></a>
</div>
<div class="site">
<h3>billsblog</h3>
<a href="http://www.billsblog.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0">
<span>www.billsblog.co.nz</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>cablesearch</h3>
<a href="http://www.cablesearch.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0">
<span>www.cablesearch.co.nz</span></a>
</div>
<div class="site">
<h3>delectable</h3>
<a href="http://www.delectable.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0">
<span>www.delectable.co.nz</span></a>
</div>
<div class="site">
<h3>farmmap</h3>
<a href="http://www.fmsl.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0">
<span>www.fmsl.co.nz</span></a>
</div>
<div class="site">
<h3>fionahodge</h3>
<a href="http://www.fionahodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0">
<span>www.fionahodge.com</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>adra</h3>
<a href="http://www.adra.org.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adra.gif" border="0">
<span>www.adra.org.nz</span></a>
</div>
<div class="site">
<h3>adrian hodge</h3>
<a href="http://www.adrianhodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_adrian.gif" border="0">
<span>www.adrianhodge.com</span></a>
</div>
<div class="site">
<h3>bienetre</h3>
<a href="http://www.bienetre.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_bienetre.gif" border="0">
<span>www.bienetre.co.nz</span></a>
</div>
<div class="site">
<h3>billsblog</h3>
<a href="http://www.billsblog.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_billsblog.gif" border="0">
<span>www.billsblog.co.nz</span></a>
</div>
</div>
<div class="col">
<div class="site">
<h3>cablesearch</h3>
<a href="http://www.cablesearch.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_cablesearch.gif" border="0">
<span>www.cablesearch.co.nz</span></a>
</div>
<div class="site">
<h3>delectable</h3>
<a href="http://www.delectable.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_delectable.gif" border="0">
<span>www.delectable.co.nz</span></a>
</div>
<div class="site">
<h3>farmmap</h3>
<a href="http://www.fmsl.co.nz" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_farmmap.gif" border="0">
<span>www.fmsl.co.nz</span></a>
</div>
<div class="site">
<h3>fionahodge</h3>
<a href="http://www.fionahodge.com" target="_blank">
<img src="http://hodgeman.co.nz/images/portfolio_web_fionahodge.gif" border="0">
<span>www.fionahodge.com</span></a>
</div>
</div>
</div>
</div>
<div id="next" class="button"></div>
Cara Membuat Previous / Next Slide
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment