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>

Leave a Reply

Jika ingin copy paste artikel ini, jangan lupa sertakan sumbernya ya, hargai usaha admin ^^, Kalau mau komentar jangan yang bersifat menghina maupun mengejek. Tidak sopan tau hahaa. Terima kasih sudah berkunjung ke blog ku. Jangan lupa di follow dan pasang banner ku ya \^^,/

Subscribe to Posts | Subscribe to Comments

Arsip Blog

Ayat Alkitab

Friend's Banner

Copyright © 2013 David As'Chri ChieLietonga 06 | Robotic Notes | Powered by Blogger

Designed by : Johanes Djogan | Redesignde by : David As'Chri ChieLietonga 06: Pure CSS3 Content Slider