Kamis, 28 Juni 2012
Hai sobat blogger pada posting kali saya akan memberitahukan cara Membuat Pure CSS3 Content Slider. Slide ini saya dapat dari CSSDESK.
Nah begini cara membuatnya.
1. Login ke blog kamu
2. Pilih Template, lalu Edit HTML
3. Cari kode ]]></b:skin>
4. Kemudian copy paste kode dibawah ini diatas kode ]]></b:skin>
Kodenya :
#slider {
width: 600px;
height: 200px;
position: relative;
margin: 0px auto 0;
background-color:
#2C0036;
border: 10px solid
#2C0036;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transition: all 250ms ease-in;
-webkit-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
border-top: 10px solid
rgba(0, 0, 0, 0.2);
}
#slider:hover {
background-color:#fff;
border:10px solid #fff;
-webkit-animation:rotatey 400ms ease-out;
-moz-animation:rotatey 400ms ease-out;
}
#slider:hover #pause {
opacity:1;
}
#slider:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#mask {
overflow:hidden;
}
#pause {
width:600px;
height:200px;
position:absolute;
top:0;
opacity:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4s_24fbfe-jO_5RFjPl1rSczO57n4uQkuR90f7N7bDWCIy0u-FG5XPlxLx94gHOfP6Qp9wQovxoo5Ji7_RmnzT7a3i3Hg39Dk6zw12K9xTdpJfO13pmaftU9Map0iIygQAIz-Jyte1xw/s1600/paused.png);
background-position:566px 10px;
background-repeat:no-repeat;
pointer-events:none;
-moz-transition:all 150ms ease-in;
-webkit-transition:all 150ms ease-in;
-o-transition:all 150ms ease-in;
}
#progress {
width:1px;
height:3px;
position:relative;
top:-1px;
background-color:#BCEB04;
-moz-transition:all 150ms linear;
-webkit-transition:all 150ms linear;
-o-transition:all 150ms linear;
-moz-animation:progress 18s infinite;
-webkit-animation:progress 18s infinite;
}
#overlay {
width:600px;
height:200px;
position:absolute;
top:0;
background-position:center;
background-repeat:no-repeat;
pointer-events:none;
opacity:0.5;
-moz-animation:overlay-fade 18s infinite;
}
#slider ul {
width:2400px;
position:relative;
left:0px;
margin:0;
padding:0;
list-style:none;
-moz-animation:slide-animation 18s infinite;
-webkit-animation:slide-animation 18s infinite;
}
#slider li {
width:600px;
height:200px;
position:relative;
display:inline;
float:left;
margin:0;
padding:0;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOgOod9pOrZYp0JwHkT4JIqbHY9ZqTnxTxgWg0redkp6O2Hfv5OHslsTbUrCY4nueVohg9BWU1I7ZeRa80vNq7ZYNa8VgXem2uvuiv7WK6-6ZyLcVH39sLG_4AFguO0jYOs5IN5MVP4BA/s1600/loader.gif");
background-position:50% 50%;
background-repeat:no-repeat;
}
#slider li span {
display:block;
width:560px;
position:absolute;
bottom:0;
left:0;
padding:15px 20px;
pointer-events:none;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
}
#slider ul li span h2 {
font-size:20px;
line-height:30px;
font-weight:normal;
color:#fff;
text-shadow:1px 1px 1px #362c30;
}
#slider ul li span p {
font-size:14px;
line-height:20px;
font-weight:normal;
color:#fff;
text-shadow:1px 1px 1px #362c30;
}
#slider-shadow {
width: 620px;
height: 230px;
margin: 0px auto 0;
float: left;
}
@-webkit-keyframes slide-animation {
0% {opacity:1;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:1;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:1;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:1;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:1;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:1;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:1;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:1;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:1;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:1;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:1;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:1;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:1;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:1;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:1;}
100% {width:0px; opacity:1;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:1;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:1;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:1;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:1;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:1;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-webkit-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
@-moz-keyframes rotatey {
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);}
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);}
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
}
5. Kemudian save template
6. Lalu copy kode dibawah ini di Add Gadget atau Tambah Gadget dan letakkan dibawah header
Kodenya :
<div id='slider-shadow'>
<div id='slider'>
<div id='mask'>
<ul>
<li>
<a href='http://i1115.photobucket.com/albums/k554/nuel02/Untitled-1copy-2.png' title='New Style'><img src='http://i1115.photobucket.com/albums/k554/nuel02/Untitled-1copy-2.png'/></a>
</li>
<li>
<a href='http://www.facebook.com/groups/persatuanbloggerindonesia/' title='Click Here To Join'><img src='http://i1115.photobucket.com/albums/k554/nuel02/PBI-1.png'/></a>
</li>
<li>
<a href='http://i1115.photobucket.com/albums/k554/nuel02/Untitled-1copy-2.png' title='New Style'><img src='http://i1115.photobucket.com/albums/k554/nuel02/Untitled-1copy-2.png'/></a>
</li>
<li>
<a href='http://i1115.photobucket.com/albums/k554/nuel02/Untitled-1copy-2.png' title='New Style'><img src='http://i1115.photobucket.com/albums/k554/nuel02/Untitled-1copy-2.png'/></a>
</li>
</ul>
</div>
<div id='progress'></div>
<div id='overlay'></div>
<div id='pause'></div>
</div></div>
