CONTOH SLIDER
Perhati langkah-langkah dibawah.
1)Log in ke http://draft.blogger.com/home dan cari ( click Edit HTML)
2)
Click Proceed
3)
Check kotak Expand Widget Template
4)
Click Ctrl+F pada keyboard anda dan cari (div class="main-outer") kalau tak jumpa, just taip main-outer
5)
Bila dah jumpa
6)
copy code dibawah dan PASTE "SELEPAS" div class=main-outer...
<style type='text/css'>
body {
background:#fbfbfb;
font:normal normal 12px Arial, Helvetica Neue, san-serif;
color:#555;
text-shadow:1px 1px 1px #fff;
line-height:18px;
}
a{
color:#555;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline
}
em{
font-style:italic
}
em a{
font-weight:normal
}
img {
border:1px solid #eee;
padding:5px;
margin:10px 0;
}
::selection{
background:blue;
color:#fff;
text-shadow:none
}
#container {
width:800px;
margin:40px auto
}
/* Sliding Readmore Labels */
.label-size, .jump {
background:url(http://3.bp.blogspot.com/-i8NHkwuIhyc/UHUZivB-ukI/AAAAAAAAAgs/w7NlG-X7CxY/s1600/readmore.png) no-repeat 0 0;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
position:relative;
text-decoration:none;
font-weight:700;
font-size:12px;
display:none;
margin:5px;
padding:0 5px 0 8px
}
.jump-link {
float:right
}
.label-size:hover,.jump:hover {
color:#555;
cursor:pointer;
text-decoration:none
}
.label-size .label-count,.jump .more {
display:block;
float:left
}
.label-size a,.label-size span,.jump a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BU2-yA_7AZC8las57RrtyvYsCcm02P0-EBNgIWYqgur5rFNBKojSQFraZzh2RP_n_W8XnM_IRKjMg2nGqh8CMhr3paA35RLmJnlIglq_zzvzmrhaaz3hFqZ9Qrikb-CeTnoiy2aXKvxm/h1600/sliding_button.png) no-repeat 100% -25px;
height:19px;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
display:inline-block;
padding:6px 10px 0 0
}
span.label-count,span.more {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BU2-yA_7AZC8las57RrtyvYsCcm02P0-EBNgIWYqgur5rFNBKojSQFraZzh2RP_n_W8XnM_IRKjMg2nGqh8CMhr3paA35RLmJnlIglq_zzvzmrhaaz3hFqZ9Qrikb-CeTnoiy2aXKvxm/h1600/sliding_button.png) no-repeat 100% -50px;
color:#fff;
height:19px;
position:absolute;
right:0;
text-shadow:0 -1px 0 #c54a0c;
top:1px;
z-index:5;
padding:5px 10px 0
}
/* SLIDESHOW */
#slider-wrapper {
background:$(slider.background.color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6T7vzi-XJapUbSo1E2S1YAJPpShww-K-ZiODiYgGuMwlvlfaGdP_AKPRAOoimzJZmnui0gq5tqhXNj3bXJxlIl7HI7kFvN8nF1yVO9VUPGas-IKGTfk7h6QzjEvsYGw_7P_WsT6wTTeo/h1600/top-wrapper-bg.png) repeat-y;
text-align:left;
overflow:hidden;
padding:0;
clear:both;
}
#Slidershadow {
height:30px;
position:absolute;
width:800px;
left:0;
bottom:-30px;
z-index:49;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsR-ZhicP9YDj708-T4xmuYnlAKgWjgP2aq8y4ypZGsHytX7BtiGAtcJqMqal2Tl0d07ibyfOlCP5HHR32xCsBh9Gc7AE-SVbiKHBO4-jYQuclRgIruVagmb35GyPiyO-zpIaZa6wGnVr-/h1600/slider-shadow.png) no-repeat center
}
#slider {
width:800px;
height:360px;
margin:40px 50px 50px 50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFv3WYV2k7PcF2TbXQBNdYe6mHoiopHhFMGK_Ml4ta0dqi6Fb0gaqk9FzQKOoIFHZnnh8IxUaCnF1DkmKXFQdZhuvta7on6edOQpBLFM748mtu3r7MJJhN1V09LAQyObxzKWuOGYSFq6_Z/h1600/slider.png) no-repeat;
position:relative;
}
.cycle img {
z-index:0;
overflow:hidden;
height:350px;
padding:11px 0 0 11px
}
.cycle {
width:789px;
height:350px;
position:relative;
overflow:hidden
}
.slider-content {
z-index:20;
width:215px;
height:350px;
position:absolute;
top:12px;
float:right;
right:0;
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyY-FffcMs38301iA_vKtaahTeLB46Viu0UdG3A7_5mzCkA67HmHepFUWeXN6qdgA7Pz4qxRqMV5vB9pcQnUFgUdw2LrQKzzXBTY80AdL7Ew-wmYVu_LrKgQJVI_TWhgAvEiuGG_cs_cy/h1600/trans.png) repeat;
padding:20px
}
.slider-content h4 {
font-size:14px;
margin-bottom:5px;
text-transform:uppercase;
font-weight:700;
line-height:normal;
color:$(link.hover.color);
}
.slider-content h2 {
font-size:22px;
color:#fff;
margin-bottom:8px;
padding:0;
font-weight:700;
line-height:100%
}
.slider-content h2 a{
color:#fff
}
.slider-content p{
margin-bottom:10px
}
.slider-content a.button{
background:#E85811;
padding:5px 15px;
display:block;
float:left;
color:#fff
}
#pager {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNDrzPfSZO0XJa7BLI8Z_zbfe8qyPK2SSrM3ghN7BAkoPwyr_SRWHwZ8Z6bmE7j4JYIHeBu8d5fJy9UrbH4g31Ax5LEW7wTUK0kBaBtxChobTB-J9-qFKSaTJd_CmQNz3PAqlAmzdJIYJ/h1600/pager-bg.png) no-repeat;
width:325px;
height:40px;
padding-top:10px;
text-align:center;
z-index:50;
left:240px;
position:absolute;
bottom:-23px;
}
#pager a {
width:16px;
height:16px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XE9v1hQK6V81HjSxmNM0_ArWuSkM0ZX08eO2f5sTjVxODT6pcjVriPqjUqscMeCUJH9olp0FdQ_umwguGKFToWgPKV4DwveDwognUM9p8hrN15GYXwVSGo6MtfBBmj5ISAWyqd2tXY-c/h1600/pager.png);
background-repeat:no-repeat;
border:0;
margin-right:2px;
cursor:pointer;
display:inline-block;
text-indent:-9999px
}
#pager a.activeSlide {
width:16px;
height:16px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XE9v1hQK6V81HjSxmNM0_ArWuSkM0ZX08eO2f5sTjVxODT6pcjVriPqjUqscMeCUJH9olp0FdQ_umwguGKFToWgPKV4DwveDwognUM9p8hrN15GYXwVSGo6MtfBBmj5ISAWyqd2tXY-c/h1600/pager.png);
background-repeat:no-repeat;
background-position:0 -16px;
margin-top:0
}
#next, #prev {
position:absolute;
width:32px;
height:60px;
top:150px;
display:block;
text-indent:-9999px;
z-index:999
}
#next{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZveVdBcKvpE1KiT50JFfYdCxn3EcAkC1xDlBB9eR_5krScBMvC67pqFP2l97YQ13NYYsjz7Q_yW2Vv9l7gF6zKCdMbMnSQZT41cu6ea94HefTl2ZDGFnpzaxYPzaZJNSdSxlIlkort4LB/h1600/next.png) no-repeat right;
right:-32px
}
#prev{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNF1skzpXfmxgk2w7VtfaqFVXaR6aBGaQsXxfH1iRZE2omBpxo8yW-KAktgVp9jI-D_x5P_yWAi3ymo3YNZKQm49K71KDEXNDpv1Me5KWD0nucsKxRc76SNFpXNLToO3LSKMqz82CfBXT-/h1600/prev.png) no-repeat left;
left:-32px
}
</style>
<div class='clearfix' id='slider-wrapper'>
<div id='slider'>
<script src='/feeds/posts/default/-/Photography?orderby=updated&alt=json-in-script&callback=featured_slideshow' type='text/javascript'/>
<div id='slideshow' style='position: relative; width: 789px; height: 350px; '>
<div class='cycle' style='position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 789px; height: 350px; '>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Acoth-vfuQVDONSIqW_dAVjGJB4lwYCllBaPyBW17Uc5ABGLCq4Kf5Ezwcwpjtm8RB4Uvuw3A430OBTRkfRAuapDIusXKFJW4__teJ7qUI5n4VahnXpmcmxLN7dHRIaLF0d60g7ol651/s1600/surcando-la-albufera-II-by-fran-gallego.jpg'/>
<div class='slider-content'>
<h4>09 Dec 2011</h4>
<h2><a href='http://apparet-bloggerninja.blogspot.com/2011/12/lorem-ipsum-dolor-sit-amet.html'>Lorem Ipsum Dolor Sit Amet</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et lobortis massa. Morbi rutrum pulvinar magna eget posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean consectetur dapibus neque, ut convallis nibh condimentum nec. Integer sed odio massa, vel feugiat nisi. Duis molestie...</p>
<a class='button' href='http://apparet-bloggerninja.blogspot.com/2011/12/lorem-ipsum-dolor-sit-amet.html'>Read More</a></div></div>
<div class='cycle' style='position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 789px; height: 350px; '>
<img src='http://3.bp.blogspot.com/-RchOtsP61ys/UHTZCOs_beI/AAAAAAAAAfQ/kEnvkNufgMI/s1600/echemos-un-cigarrillo-by-fran-gallego.jpg'/>
<div class='slider-content'>
<h4>09 Dec 2011</h4>
<h2><a href='http://apparet-bloggerninja.blogspot.com/2011/12/curabitur-et-lectus-vitae-purus.html'>Curabitur Et Lectus Vitae Purus</a></h2>
<p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vehicula mauris nec nulla viverra accumsan eg...</p>
<a class='button' href='http://apparet-bloggerninja.blogspot.com/2011/12/curabitur-et-lectus-vitae-purus.html'>Read More</a></div></div>
<div class='cycle' style='position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1; width: 789px; height: 350px; '>
<img src='http://1.bp.blogspot.com/-1hRUXQO3p7k/UHTZDWNvlDI/AAAAAAAAAfY/-WJN4uNroVE/s1600/esperando-clecer-la-palmera-by-fran-gallego.jpg'/>
<div class='slider-content'>
<h4>09 Dec 2011</h4>
<h2>
<a href='http://apparet-bloggerninja.blogspot.com/2011/12/donec-purus-velit.html'>Donec Purus Velit</a></h2>
<p>Aliquam porttitor, ipsum et ultricies laoreet, enim augue euismod justo, ac consequat leo lorem ut ante. Donec purus augue, feugiat vitae vestibulum ut, rhoncus vitae justo. Duis elementum aliquam neque, at pharetra ipsum pulvinar ac. Donec purus velit, vestibulum faucibus tincidunt nec, fringilla nec nulla. Vivamus auctor velit eget sapien lobort...</p>
<a class='button' href='http://apparet-bloggerninja.blogspot.com/2011/12/donec-purus-velit.html'>Read More</a></div></div>
<div class='cycle' style='position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 789px; height: 350px; '>
<img src='http://2.bp.blogspot.com/-Tn8wcJYSA1I/UHTZFIa9UwI/AAAAAAAAAfg/Z5SzODiLW6Y/s1600/la-vida-pasa-by-fran-gallego.jpg'/>
<div class='slider-content'><h4>09 Dec 2011</h4><h2><a href='http://apparet-bloggerninja.blogspot.com/2011/12/vestibulum-ligula-enim.html'>Vestibulum Ligula Enim</a></h2><p>Vestibulum ligula enim, vehicula sit amet placerat at, lacinia dapibus nisi. Nam sollicitudin facilisis luctus. Nulla vehicula, quam a ullamcorper posuere, lacus nulla feugiat lorem, quis viverra dolor massa in nisi. Nulla nulla sapien, fringilla vel imperdiet eget, aliquam eu risus.Nullam diam est, congue id semper quis, volutpat et diam. Maecena...</p><a class='button' href='http://apparet-bloggerninja.blogspot.com/2011/12/vestibulum-ligula-enim.html'>Read More</a></div></div><div class='cycle' style='position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 789px; height: 350px; '>
<img src='http://1.bp.blogspot.com/-PFCMn-lHsi4/UHTZI2AMIZI/AAAAAAAAAfw/HFtp-iG4ahQ/s1600/surcando-la-albufera-II-by-fran-gallego.jpg'/>
<div class='slider-content'><h4>09 Dec 2011</h4><h2><a href='http://apparet-bloggerninja.blogspot.com/2011/12/donec-ut-eros-leo.html'>Donec Ut Eros Leo</a></h2><p>Donec ut eros leo, non pellentesque quam. Mauris volutpat, elit eget pulvinar sollicitudin, elit dolor venenatis mi, vitae dictum ligula justo et sapien. In consequat tortor nec quam tincidunt pharetra. Aenean eget blandit urna. Sed tincidunt arcu a tortor dictum vitae egestas odio bibendum.Ut dictum suscipit fermentum. Pellentesque habitant morbi...</p><a class='button' href='http://apparet-bloggerninja.blogspot.com/2011/12/donec-ut-eros-leo.html'>Read More</a></div></div></div>
<a href='#' id='next'>Next</a>
<a href='#' id='prev'>Prev</a>
<div id='pager'><a class='' href='#'>1</a><a class='' href='#'>2</a><a class='activeSlide' href='#'>3</a><a class='' href='#'>4</a><a class='' href='#'>5</a></div>
<div id='slidershadow'/>
</div>
</div>
7)
Ctrl+f dan PASTE CODE DIBAWAH "SELEPES" ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/superfish.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.cycle.all.js' type='text/javascript'/>
<script src='https://ninja-templates.googlecode.com/svn/trunk/jquery.tiptip.js' type='text/javascript'/>
<script src='http://ninja-templates.googlecode.com/files/functions.slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Label Colud
$('.label-size').each(function(i) {
setTimeout(function() {
$('.label-size:eq(' + i + ')').css({
display: 'block',
opacity: 0
}).stop().animate({
opacity: 1
}, 'easeInOutExpo');
}, 250 * (i + 1))
});
$('.label-size').hover(function() {
$(this).stop().animate({
paddingRight: ($('.label-count', this).outerWidth() - 5)
}, 'easeInOutExpo');
}, function() {
$(this).stop().animate({
paddingRight: 5
}, 'easeInOutExpo');
});
// Sliding Readmore
$('.jump').each(function(i) {
setTimeout(function() {
$('.jump:eq(' + i + ')').css({
display: 'block',
opacity: 0
}).stop().animate({
opacity: 1
}, 'easeInOutExpo');
}, 250 * (i + 1))
});
$('.jump').hover(function() {
$(this).stop().animate({
paddingRight: ($('.more', this).outerWidth() - 5)
}, 'easeInOutExpo');
}, function() {
$(this).stop().animate({
paddingRight: 5
}, 'easeInOutExpo');
});
// Slider
$('#slideshow').cycle({
timeout: 7000,
fx: 'fade',
prev: '#prev',
next: '#next',
pager: '#pager',
pause: 0,
cleartypeNoBg: true,
pauseOnPagerHover: 0
});
// Superfish
$('ul.sf-menu').superfish({
delay: 0,
animation: {
opacity: 'show',
height: 'show'
},
speed: 'fast',
});
$('ul.sf-menu').find('li li:last').css({
'border-radius': '0 0 6px 6px',
'padding-bottom': '10px',
'border-bottom': '1px solid #eee'
}).find('a').css({
'border-bottom': 'none'
});
$('ul.sf-menu').find('li li a:first').css({
'border-top': 'none'
});
// Social Bookmark
$('ul.social').find('li a').hover(function() {
$(this).animate({
opacity: 0.7,
bottom: 5
}, 600);
}, function() {
$(this).animate({
opacity: 1,
bottom: 0
}, 600);
});
$('.blog-pager a,.jump-link a,.tip,ul.social a').tipTip();
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Slider Setting.
imgr = new Array();
imgr[0] = "";
random = true;
excerpt = 350; // post excerpt length
count = 0; // slider count
//]]>
</script>
Ctrl+F dan PASTE CODE DIBAWAH "SEBELUM" </head>
<style type='text/css'>
body {
background:#fbfbfb;
font:normal normal 12px Arial, Helvetica Neue, san-serif;
color:#555;
text-shadow:1px 1px 1px #fff;
line-height:18px;
}
a{
color:#555;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline
}
em{
font-style:italic
}
em a{
font-weight:normal
}
img {
border:1px solid #eee;
padding:5px;
margin:10px 0;
}
::selection{
background:blue;
color:#fff;
text-shadow:none
}
#container {
width:800px;
margin:40px auto
}
/* Sliding Readmore Labels */
.label-size, .jump {
background:url(http://3.bp.blogspot.com/-i8NHkwuIhyc/UHUZivB-ukI/AAAAAAAAAgs/w7NlG-X7CxY/s1600/readmore.png) no-repeat 0 0;
color:#3f3f3f;
float:left;
height:25px;
line-height:1;
position:relative;
text-decoration:none;
font-weight:700;
font-size:12px;
display:none;
margin:5px;
padding:0 5px 0 8px
}
.jump-link {
float:right
}
.label-size:hover,.jump:hover {
color:#555;
cursor:pointer;
text-decoration:none
}
.label-size .label-count,.jump .more {
display:block;
float:left
}
.label-size a,.label-size span,.jump a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BU2-yA_7AZC8las57RrtyvYsCcm02P0-EBNgIWYqgur5rFNBKojSQFraZzh2RP_n_W8XnM_IRKjMg2nGqh8CMhr3paA35RLmJnlIglq_zzvzmrhaaz3hFqZ9Qrikb-CeTnoiy2aXKvxm/h1600/sliding_button.png) no-repeat 100% -25px;
height:19px;
position:relative;
text-shadow:0 1px 1px #fff;
z-index:10;
display:inline-block;
padding:6px 10px 0 0
}
span.label-count,span.more {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BU2-yA_7AZC8las57RrtyvYsCcm02P0-EBNgIWYqgur5rFNBKojSQFraZzh2RP_n_W8XnM_IRKjMg2nGqh8CMhr3paA35RLmJnlIglq_zzvzmrhaaz3hFqZ9Qrikb-CeTnoiy2aXKvxm/h1600/sliding_button.png) no-repeat 100% -50px;
color:#fff;
height:19px;
position:absolute;
right:0;
text-shadow:0 -1px 0 #c54a0c;
top:1px;
z-index:5;
padding:5px 10px 0
}
/* SLIDESHOW */
#slider-wrapper {
background:$(slider.background.color) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6T7vzi-XJapUbSo1E2S1YAJPpShww-K-ZiODiYgGuMwlvlfaGdP_AKPRAOoimzJZmnui0gq5tqhXNj3bXJxlIl7HI7kFvN8nF1yVO9VUPGas-IKGTfk7h6QzjEvsYGw_7P_WsT6wTTeo/h1600/top-wrapper-bg.png) repeat-y;
text-align:left;
overflow:hidden;
padding:0;
clear:both;
}
#Slidershadow {
height:30px;
position:absolute;
width:800px;
left:0;
bottom:-30px;
z-index:49;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsR-ZhicP9YDj708-T4xmuYnlAKgWjgP2aq8y4ypZGsHytX7BtiGAtcJqMqal2Tl0d07ibyfOlCP5HHR32xCsBh9Gc7AE-SVbiKHBO4-jYQuclRgIruVagmb35GyPiyO-zpIaZa6wGnVr-/h1600/slider-shadow.png) no-repeat center
}
#slider {
width:800px;
height:360px;
margin:40px 50px 50px 50px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFv3WYV2k7PcF2TbXQBNdYe6mHoiopHhFMGK_Ml4ta0dqi6Fb0gaqk9FzQKOoIFHZnnh8IxUaCnF1DkmKXFQdZhuvta7on6edOQpBLFM748mtu3r7MJJhN1V09LAQyObxzKWuOGYSFq6_Z/h1600/slider.png) no-repeat;
position:relative;
}
.cycle img {
z-index:0;
overflow:hidden;
height:350px;
padding:11px 0 0 11px
}
.cycle {
width:789px;
height:350px;
position:relative;
overflow:hidden
}
.slider-content {
z-index:20;
width:215px;
height:350px;
position:absolute;
top:12px;
float:right;
right:0;
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyY-FffcMs38301iA_vKtaahTeLB46Viu0UdG3A7_5mzCkA67HmHepFUWeXN6qdgA7Pz4qxRqMV5vB9pcQnUFgUdw2LrQKzzXBTY80AdL7Ew-wmYVu_LrKgQJVI_TWhgAvEiuGG_cs_cy/h1600/trans.png) repeat;
padding:20px
}
.slider-content h4 {
font-size:14px;
margin-bottom:5px;
text-transform:uppercase;
font-weight:700;
line-height:normal;
color:$(link.hover.color);
}
.slider-content h2 {
font-size:22px;
color:#fff;
margin-bottom:8px;
padding:0;
font-weight:700;
line-height:100%
}
.slider-content h2 a{
color:#fff
}
.slider-content p{
margin-bottom:10px
}
.slider-content a.button{
background:#E85811;
padding:5px 15px;
display:block;
float:left;
color:#fff
}
#pager {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNDrzPfSZO0XJa7BLI8Z_zbfe8qyPK2SSrM3ghN7BAkoPwyr_SRWHwZ8Z6bmE7j4JYIHeBu8d5fJy9UrbH4g31Ax5LEW7wTUK0kBaBtxChobTB-J9-qFKSaTJd_CmQNz3PAqlAmzdJIYJ/h1600/pager-bg.png) no-repeat;
width:325px;
height:40px;
padding-top:10px;
text-align:center;
z-index:50;
left:240px;
position:absolute;
bottom:-23px;
}
#pager a {
width:16px;
height:16px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XE9v1hQK6V81HjSxmNM0_ArWuSkM0ZX08eO2f5sTjVxODT6pcjVriPqjUqscMeCUJH9olp0FdQ_umwguGKFToWgPKV4DwveDwognUM9p8hrN15GYXwVSGo6MtfBBmj5ISAWyqd2tXY-c/h1600/pager.png);
background-repeat:no-repeat;
border:0;
margin-right:2px;
cursor:pointer;
display:inline-block;
text-indent:-9999px
}
#pager a.activeSlide {
width:16px;
height:16px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0XE9v1hQK6V81HjSxmNM0_ArWuSkM0ZX08eO2f5sTjVxODT6pcjVriPqjUqscMeCUJH9olp0FdQ_umwguGKFToWgPKV4DwveDwognUM9p8hrN15GYXwVSGo6MtfBBmj5ISAWyqd2tXY-c/h1600/pager.png);
background-repeat:no-repeat;
background-position:0 -16px;
margin-top:0
}
#next, #prev {
position:absolute;
width:32px;
height:60px;
top:150px;
display:block;
text-indent:-9999px;
z-index:999
}
#next{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZveVdBcKvpE1KiT50JFfYdCxn3EcAkC1xDlBB9eR_5krScBMvC67pqFP2l97YQ13NYYsjz7Q_yW2Vv9l7gF6zKCdMbMnSQZT41cu6ea94HefTl2ZDGFnpzaxYPzaZJNSdSxlIlkort4LB/h1600/next.png) no-repeat right;
right:-32px
}
#prev{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNF1skzpXfmxgk2w7VtfaqFVXaR6aBGaQsXxfH1iRZE2omBpxo8yW-KAktgVp9jI-D_x5P_yWAi3ymo3YNZKQm49K71KDEXNDpv1Me5KWD0nucsKxRc76SNFpXNLToO3LSKMqz82CfBXT-/h1600/prev.png) no-repeat left;
left:-32px
}
</style>
9
Selesai dan click SAVE TEMPLATE :)
0 comments:
Post a Comment