Membuat Slider di Blog With CSS3

Membuat Slider di Blog With CSS3 – sudah pernah saya bahas sebelumnya untuk membuat slider di blog dimana pada slider tersebut sekaligus sebagai widget recent post atau yang menampilkan artikel terbaru yang bisa di jumpai pada tutorial yang berjudul jQuery Widget Recent Post Automatic Slider. Seperti yang sudah diketahui, bahwa pada slider tersebut kita tidak perlu memasukkan gambar satu per satu karena tanpa melakukan hal itu slider sudah berjalan secara otomatis dengan menampilkan gambar yang terdapat pada artikel terbaru dari halaman posting. Namun berbeda dengan slider yang ini, bedanya pada slider ini kita harus terlebih dahulu memasukan gambar yang ingin ditampilkan kedalam slide secara manual. Hal serupa juga dapat anda jumpai pada jQuery Slider Futured Content Blog dimana pada slider tersebut terdapat thumbnail image yang terdapat dibawahnya, berbeda lagi dengan jQuery Headline Fitur Post Slider yang mempunyai ukuran lebih kecil dan ramping sehingga mungkin akan nampak lebih minimalis. Oke, sekarang tidak perlu menunggu waktu lebih lama lagi untuk berlanjut ke tutorial karena berikut adalah langkah-langkah sederhana Membuat Slider di Blog With CSS3.

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

#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; }  
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya copy kode dibawah ini.

<div id="content-downslider">
<div id="downslider">
<div id="mask">
<ul>
<li class="firstanimation" id="first">
<a href="http://mas-andes.blogspot.com/">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif0_y_VgQTWcH6HWYsS2UzHPS69Nwk6foZoXGuESYaNLSI4MFXajJAh2E1YfzLaLnvC2l1EENNnj71AVHvnBTKmx155vpHK_NcQm7yxTiZE6T7pEAKPdbFZrb6Zo2y5niLgbKxHTuD2Fo/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://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkV6sT5sD13vKaQzM2jjOWl-3CrJEsio9ux67xwo-C8CKLf3r_-k4Dj02Z0ahHqQx5fDxwasVLKMnoanZXM8HLyyzT9qJUDO4vwvOh2ywSwnlDvIh21cX-wu-CBgWREQGOZdck72_tJQ/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://mas-andes.blogspot.com/2013/06/membuat-gallery-photo-thumbnail-with.html">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-XbjJJ0bazvnSFMY2Y5wxb1xE-Fic8UszSd6P0ll2MJ7fT8hroNdseFYaw8ACoXz8Dqp0GODS_Dx6926-dsHmJy9RrFAKuQpKKrFxmW2re8bk0fwRMAx5ygtwhnvD5dmYXH8lmu9fS4/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://mas-andes.blogspot.com/2013/05/3-style-gallery-css3-photo-pinkbox-pada.html">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiovZMMaFF6F9JgNlBYaQCeBk065bzzbMDW6cfD48Vs9To7wiKHmbJHa8mmttLV3QJQThHS9_2esIDgXsDhsoa4FT7Kx_-RUdjDVQ5vr-Om5s8Xl_PbVDTsnqlcsdONNka03JBLYAc7o/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://mas-andes.blogspot.com/2013/05/10-gallery-css3-image-efek-hover-pada.html">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJsrffZFokbUzvo4fRf3xn8Fum2qkrIZ7fEAT6PigC6p0OHKzSkZHySXvmqRH0LEV2dDKyrqJogx8dZCbMK_mIPgnETA787rtT2RMclhqqDoEWfu3CJw7IHXgGB7aSqebX5t2H1hzImg/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>

Keterangan:
Untuk ukuran lebar dan tinggi silahkan sesuaikan dengan template blog anda.

5. Kemudian paste kode tersebut di widget, caranya klik Tata Letak >> HTML/Javascript lalu jika sudah klik simpan. Jika ingin dimasukan kedalam posting blog juga bisa, gunakan mode HTML bukan Compose lalu paste kode tersebut didalamnya.

DEMO:

• 

  Faceblog Evolutions

• 

  Thumbnail Gallery CSS3

• 

  Thumbnail Photo jQuery

• 

  Gallery CSS3 Pinkbox

• 

  Gallery CSS3 Image Hover