Membuat Image Slider With Css - Dalam tutorial simple kali ini kita akan membuat Simple Image Slider yang akan dipasang di blog . Slider ini ringan dan bisa disesuaikan untuk ukurannya . Sangat cocok jika ingin dipasangkan di bagian Sidebar Blog , mungkin sebagai promosi produk atau banner .

Seperti biasa kita lihat beberapa bagian penting sebelum memasang widget slider image ini .

Keuntungan


Keuntungan dari memasang Slide Image ini tentu kita bisa menempatkan banner atau mungkin gambar produk secara masal tanpa memakan banyak tempat karena akan bergantian tampil .
Bisa dipasang dibagian mana saja sesuai selera , sidebar , featured post ,atau bisa juga di dalam posting bahkan di bagian footer blog .

Kerugian


Widget ini tergolong ringan dan tidak memakan waktu lama saat loading .
Gambar di dalam widget ini dipasang secara manual beserta link dan text yang ingin ditampilkan dan mungkin itu akan memakan banyak waktu karena kita harus menguploadnya dan memasangnya secara manual .

Oke , sekarang kita langsung saja memasang Simple Image Slider Di Blog

1. Masuk ke Blogger dan klik pada menu template di panel kiri
2. Masuk ke edit HTML
3. Letakkan Css dibawah ini diatas ]]></b:skin>

Css



#content-downslider {
width:100%;
height:265px;
margin:10px auto 0;
}
#downslider {
background:#000;
border:5px solid #52e052;
box-shadow:1px 1px 5px #52e052;
height:265px;
width:550px;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:265px;
}
#downslider ul {
margin:0;
padding:0;
position:relative;
}
#downslider li {
width:550px;
height:265px;
position:absolute;
top:-270px;
list-style:none;
}
#downslider li.firstanimation {
-moz-animation:cycle 25s linear infinite;  
-webkit-animation:cycle 25s linear infinite;      
}
#downslider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;      
}
#downslider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;      
}
#downslider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;      
}
#downslider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;      
}
#downslider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#downslider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#downslider li#first:hover .tooltip,
#downslider li#second:hover .tooltip,
#downslider li#third:hover .tooltip,
#downslider li#fourth:hover .tooltip,
#downslider li#fifth:hover .tooltip {
left:0px;
}
#downslider:hover li,
#downslider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
.progress-bar {
position:relative;
top:-5px;
width:550px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}@-moz-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0%  { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0%  { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0%  { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0%  { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }  
}

Selanjutnya yakni menampilkan Slider Image Css ini di Interface blog .
Anda bisa menggunakan Widget dengan menuju menu Layout
Tambahkan Widget baru
Pilih HTML/JavaScript dan letakkan HTML dibawah ini kedalamnya .

HTML



<div id="content-downslider">
<div id="downslider">
<div id="mask">
<ul>
<li class="firstanimation" id="first">
<a href="#">
<img alt="" src="https://lh4.googleusercontent.com/-qllh7D9awTY/Uc5WfREE3jI/AAAAAAAAFMU/g2xCnz6cyR4/w680-h320-no/Faceblog+Evolutions+%25285%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Faceblog Evolutions</h1>
</div>
</li>
<li class="secondanimation" id="second">
<a href="#">
<img alt="" src="https://lh4.googleusercontent.com/-tvu5hREpnTw/Uc5WeZHKjnI/AAAAAAAAFMM/pKTIoYYrCUc/w680-h320-no/Faceblog+Evolutions+%25283%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Thumbnail Gallery CSS3</h1>
</div>
</li>
<li class="thirdanimation" id="third">
<a href="#">
<img alt="" src="https://lh3.googleusercontent.com/-tBzK3oI06oY/Uc5WdrGAxKI/AAAAAAAAFMA/wBvKjcJB28Y/w680-h320-no/Faceblog+Evolutions+%25284%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Thumbnail Photo jQuery</h1>
</div>
</li>
<li class="fourthanimation" id="fourth">
<a href="#">
<img alt="" src="https://lh3.googleusercontent.com/-mmMeS9EWh9A/Uc5WdvPyBmI/AAAAAAAAFME/r_BpYrOEOUE/w680-h320-no/Faceblog+Evolutions+%25281%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Gallery CSS3 Pinkbox</h1>
</div>
</li>
<li class="fifthanimation" id="fifth">
<a href="#>
<img alt="" src="https://lh6.googleusercontent.com/-6KQTxjdk0Bg/Uc5WcNez4kI/AAAAAAAAFL0/mQsiEF16QYM/w680-h320-no/Faceblog+Evolutions+%25282%2529.jpg" />
</a>
<div class="tooltip">
<h1>
Gallery CSS3 Image Hover</h1>
</div>
</li>
</ul></div>
<div class="progress-bar"></div>
</div>
</div>

Note :


Untuk ukuran Image bisa disesuaikan dengan kebutuhan interface blog anda .
Untuk berapa jumlah image yang ditampilkan juga bisa disesuaikan dengan kebutuhan .

Langkah selanjutnya simpan dan selesai .

resource : http://mas-andes.blogspot.com/2013/06/membuat-slider-di-blog-with-css3.html

Demo Image Slider Css


  • Faceblog Evolutions

  • Thumbnail Gallery CSS3

  • Thumbnail Photo jQuery

  • Gallery CSS3 Pinkbox

  • Gallery CSS3 Image Hover



Ichi Hikaru
0
at Thursday, October 31, 2013

Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih

Subscribe to: Post Comments (Atom)