Slider | Blogination!

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGQTsJkLNbZHzudqm5A0xHAnTqf883oESuQ25vZxI2V2A8LYwr0-vjju6Up8tProAiobWxoX7ogQE8jxLm-qwNfukl4k6yraPf7VIv4Aj_4u5QazHlPk_b79hcQEkp0K-CbevHAmuWrU/s1600/demo+slide.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGQTsJkLNbZHzudqm5A0xHAnTqf883oESuQ25vZxI2V2A8LYwr0-vjju6Up8tProAiobWxoX7ogQE8jxLm-qwNfukl4k6yraPf7VIv4Aj_4u5QazHlPk_b79hcQEkp0K-CbevHAmuWrU/s320/demo+slide.PNG" width="320" /></a></div>
<b>Membuat Image Slider With Css</b> - 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 .<br />
<br />
Seperti biasa kita lihat beberapa bagian penting sebelum memasang widget slider image ini .<br />
<br />
<h3>
Keuntungan</h3>
<br />
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 .<br />
Bisa dipasang dibagian mana saja sesuai selera , sidebar , featured post ,atau bisa juga di dalam posting bahkan di bagian footer blog .<br />
<br />
<h3>
Kerugian</h3>
<br />
Widget ini tergolong ringan dan tidak memakan waktu lama saat loading .<br />
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 .<br />
<br />
Oke , sekarang kita langsung saja memasang Simple Image Slider Di Blog<br />
<br />
1. Masuk ke Blogger dan klik pada menu template di panel kiri<br />
2. Masuk ke edit HTML<br />
3. Letakkan Css dibawah ini diatas <code>]]></b:skin></code><br />
<h3>
Css</h3>
<br />
<pre><code>
#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; }  
}</code></pre>
<br />
Selanjutnya yakni menampilkan Slider Image Css ini di Interface blog .<br />
Anda bisa menggunakan Widget dengan menuju menu Layout<br />
Tambahkan Widget baru<br />
Pilih HTML/JavaScript dan letakkan HTML dibawah ini kedalamnya .<br />
<h3>
HTML</h3>
<br />
<pre><code>
<div id="content-downslider">
<div id="downslider">
<div id="mask">
<ul>
<li class="firstanimation" id="first">
<a href="#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilpCakvKs_cSAhBnImoWhMV5f3ywWwqQatUO4LuASix0cxydaFn1krEaMQd_netsyCZPzi3UVJ2ZKTJvgOlJ5skztdRF6Xw-PDjpiAIjeBFfj5g2FVCNkM2i08vHZXdP8RQ2JaCeLAIqQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2Apf26cwZhfz9Qk8byDqJjdmxMg6PdK21GshKwhaAR1-10Q4AUzgmu1Svtu_snPHG7Xlbne7SfjrtsY3D8UdTmAKh4MxaDkqGOMy1QqdY8vC-3DxsdC8NL9zEFDbe2R7B5CUEyWE3E8/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaGNDogJLFP4QIE78HJ8R6AtVdHEWcP4hyphenhyphenIBT8sY9bD_pbzC-UQHeTyLwu8h5Sd9CznW0cyu8vCL6xSxSw-iqRm1oQfV_qp0oxtwlEYu9HY1ub9BY7XwSWv6w5JHrJY5iUXOLrq_gGvI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnRMUOssXWiQCcr-TchLpZnuB8C_QyeGBDzPLi_tLr9YFDLhhNNrltOVifpiJUXREG-jF7Y40VDNZhS10ACnjMJ7RA38NoZl-bGZjOHNkIaFt37-vWi9Kz7KAcKEiwZQ1CGIJETuOtmKI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-dXHkhSx6d9H5HzjC0gKNG2Ow5C7r1UATupBOfJS223aYT_XdSobxqokvlaIlAnU59wjbGpLRJfsq6EyjW7uOxkd8BParq0oPmUVGL4cPmjowHKPnCnIU7uMIKTazx80egYO_v0_f-U/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></code></pre>
<br />
<h3>
Note :</h3>
<br />
Untuk ukuran Image bisa disesuaikan dengan kebutuhan interface blog anda .<br />
Untuk berapa jumlah image yang ditampilkan juga bisa disesuaikan dengan kebutuhan .<br />
<br />
Langkah selanjutnya simpan dan selesai .<br />
<br />
<note>
resource : http://mas-andes.blogspot.com/2013/06/membuat-slider-di-blog-with-css3.html</note>
<style type="text/css">
#content-downslider {
width:100%;
height:265px;
margin:10px auto 0;
}
#downslider {
background:transparent;
border:none;
box-shadow:none;
height:265px;
width:550px;
overflow:visible;
position:relative;
text-align:center;
}
#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; }   
}
</style>
<br />
<h3>
Demo Image Slider Css</h3>
<br />
<div id="content-downslider">
<div id="downslider">
<div id="mask">
<ul>
<li class="firstanimation" id="first">
<a href="http://www.blogger.com/blogger.g?blogID=3011139583270328357#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilpCakvKs_cSAhBnImoWhMV5f3ywWwqQatUO4LuASix0cxydaFn1krEaMQd_netsyCZPzi3UVJ2ZKTJvgOlJ5skztdRF6Xw-PDjpiAIjeBFfj5g2FVCNkM2i08vHZXdP8RQ2JaCeLAIqQ/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="http://www.blogger.com/blogger.g?blogID=3011139583270328357#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2Apf26cwZhfz9Qk8byDqJjdmxMg6PdK21GshKwhaAR1-10Q4AUzgmu1Svtu_snPHG7Xlbne7SfjrtsY3D8UdTmAKh4MxaDkqGOMy1QqdY8vC-3DxsdC8NL9zEFDbe2R7B5CUEyWE3E8/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="http://www.blogger.com/blogger.g?blogID=3011139583270328357#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaGNDogJLFP4QIE78HJ8R6AtVdHEWcP4hyphenhyphenIBT8sY9bD_pbzC-UQHeTyLwu8h5Sd9CznW0cyu8vCL6xSxSw-iqRm1oQfV_qp0oxtwlEYu9HY1ub9BY7XwSWv6w5JHrJY5iUXOLrq_gGvI/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="http://www.blogger.com/blogger.g?blogID=3011139583270328357#">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnRMUOssXWiQCcr-TchLpZnuB8C_QyeGBDzPLi_tLr9YFDLhhNNrltOVifpiJUXREG-jF7Y40VDNZhS10ACnjMJ7RA38NoZl-bGZjOHNkIaFt37-vWi9Kz7KAcKEiwZQ1CGIJETuOtmKI/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="http://www.blogger.com/blogger.g?blogID=3011139583270328357#><img alt=" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-dXHkhSx6d9H5HzjC0gKNG2Ow5C7r1UATupBOfJS223aYT_XdSobxqokvlaIlAnU59wjbGpLRJfsq6EyjW7uOxkd8BParq0oPmUVGL4cPmjowHKPnCnIU7uMIKTazx80egYO_v0_f-U/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>
<br/>
<br/>

Membuat Image Slider With Css

Membuat Image Slider With Css - Dalam tutorial simple kali ini kita akan membuat Simple Image Slider yang akan dipasang di blog . Slider ...