Memasang BANNER POSTER MENARIK-blogger
BANNER 1
kodenya css
<style type='text/css'>
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider{
overflow: hidden;
height: 350px;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slidy infinite;
}
@keyframes slidy{
0%{
left: 0%
}
10%{
left: 0%;
}
12%{
left: -100%;
}
22%{
left: -100%;
}
24%{
left: -200%;
}
34%{
left: -200%;
}
36%{
left: -300%;
}
46%{
left: -300%;
}
48%{
left: -400%;
}
58%{
left: -400%;
}
60%{
left: -300%;
}
70%{
left: -300%;
}
72%{
left: -200%;
}
82%{
left: -200%;
}
84%{
left: -100%;
}
94%{
left: -100%;
}
96%{
left: 0%;
}
100%{
left: 0%;
}
}
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<div class="slider">
<figure>
<div class="slide">
<img src="images/slide_one.jpg" />
</div>
<div class="slide">
<img src="images/slide_two.jpg" />
</div>
<div class="slide">
<img src="images/slide_three.jpg" />
</div>
<div class="slide">
<img src="images/slide_four.jpg" />
</div>
<div class="slide">
<img src="images/slide_five.jpg" />
</div>
</figure>
</div>
(pasang diwidget ajaatau dimana saja yak)
sumber: https://www.yellowweb.id/blog/membuat-slider-dengan-css/
sumber2: https://www.warungbelajar.com/membuat-carousel-dengan-bootstrap.html
Posting Komentar untuk "Memasang BANNER POSTER MENARIK-blogger"