Cara Membuat Image Slider Dengan Control Button

Cara Membuat Slider Dengan Control Button
Hai Sobat, kali ini saya akan share " Cara Membuat Slider Dengan Control Button ". Cara ini cocok untuk menghemat panjang post yang anda buat.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Slider Dengan Control Button

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>
/*CONTAINER*/
.cont { margin:20px auto; display:block; width:60%; height:40%; border:solid 2px #e0e0e0; overflow:hidden; }
img { width:25%; -webkit-background-size:contain; -moz-background-size:contain; background-size:contain; display:inline-block; float:left; margin:0; padding:0; }
.image { display:block; width:400%; height:40%; }
/*BUTTON PLAY&STOP*/
.menu { position:absolute; width:94px; height:30px; margin:2px; z-index:1; }
.tooltip { width:80px; height:40px; margin-top:-34px; margin-left:-94px; display:inline-block; float:left; border-radius:2px; background:#fff; z-index:-10; opacity:.8; -webkit-animation:tool ease-in 16s; -webkit-animation-fill-mode:forwards; animation:tool ease-in 16s; animation-fill-mode:forwards; }
.tooltip > p { font-size:1em; font-weight:bolder; color:#F00; }
.tooltip:after { content:""; position:absolute; width:0; height:0; border-top:5px solid transparent; border-left:10px solid #fff; border-bottom:5px solid transparent; margin:-24px 40px; }
.hideStop,.hidePlay,.hidePause { width:30px; height:30px; margin-top:-30px; border-radius:15px; display:inline-block; float:left; z-index:999; opacity:.3; }
.hideStop { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat; background-size:100%; visibility:hidden; }
.hidePlay { margin-left:32px; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat; background-size:100%; visibility:hidden; }
.hidePause { margin-left:64px; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size:100%; }
.butPlay,.butStop,.butPause { width:30px; height:30px; border-radius:15px; z-index:2; margin-left:2px; background:rgba(75,78,67,.6); display:inline-block; float:left; }
.butPlay { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/23_Play-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butStop { margin-left:0; background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butPause { background:transparent url(https://cdn3.iconfinder.com/data/icons/eightyshades/512/25_Pause-48.png) 0 0 no-repeat; background-size:100%; cursor:pointer; }
.butPlay:hover { background:transparent url(http://s45.radikal.ru/i109/1310/98/4834faaaa287.png) 0 0 no-repeat; background-size:100%; }
.butStop:hover { background:transparent url(http://i021.radikal.ru/1310/2f/d8b2c38314ff.png) 0 0 no-repeat; background-size:100%; }
.butPause:hover { background:transparent url(http://s019.radikal.ru/i621/1310/ed/b9bfce7c1a1a.png) 0 0 no-repeat; background-size:100%; }
/*BOTTOM LINE*/
.aline { position:absolute; visibility:hidden; width:60%; height:10px; }
.line { position:absolute; height:10px; background:#222; opacity:.3; z-index:1; }
.aline > .bord { display:inline-block; float:left; width:25%; height:10px; border-bottom:2px solid #e0e0e0; }
.bord > span { width:2px; height:10px; display:inline-block; float:right; background-color:#e0e0e0; }
.bord:last-child > span { width:0; height:0; }
/*PAGGINATION*/
.but { position:relative; width:100%; height:20px; margin-top:-21px; float:left; text-align:center; z-index:100; }
.select_but { display:inline-block; width:16px; height:16px; border-radius:8px; background:rgba(0,0,0,.8); z-index:5; }
.select_but > div { width:10px; height:10px; border-radius:5px; background:#fff; margin:3px; display:none; }
.select_but:hover { background:rgba(255,255,255,.6); cursor:pointer; }
/*SLIDE MANAGE*/
.right,.left { width:64px; height:64px; margin-top:15%; display:inline-block; opacity:.9; cursor:pointer; }
.left { background:#ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/leftarrow.png) 0 0 no-repeat; background-size:100%; border-radius:32px; margin-left:12%; float:left; }
.right { background:#ccc url(http://heartofgloucestercounty.org/wp-content/uploads/2013/12/monotone_arrow_right.png) 0 0 no-repeat; background-size:100%; border-radius:32px; margin-right:12%; float:right; }
.right:hover { background-color:#68D9EE; -webkit-animation:anim-right ease .3s; animation:anim-right ease .5s; }
.left:hover { background-color:#68D9EE; -webkit-animation:anim-left ease .5s; animation:anim-left ease .5s; }
.int { display:none; }
/*INPUT PLAY&STOP&PAUSE CHECKED*/
#play:checked ~ .brain .cont .menu { margin-top:16px; }
#play:checked ~ .brain .cont .menu .hidePause { visibility:hidden; }
#play:checked ~ .brain .cont .menu .butPlay { visibility:hidden; }
#play:checked ~ .brain .cont .menu .hidePlay { visibility:visible; }
#play:checked ~ .brain .cont .aline { visibility:visible; }
#play:checked ~ .brain .cont .but .select_but > div { display:block; }
#play:checked ~ .brain .cont .aline .line { -webkit-animation:linew 16s ease-out infinite; animation:linew 16s ease-out infinite; }
#play:checked ~ .brain .cont .image { -webkit-animation:alls 16s linear infinite; animation:alls 16s linear infinite; }
#play:checked ~ .brain .cont .but .select1 > div { -webkit-animation:sel1 16s linear infinite; animation:sel1 16s linear infinite; }
#play:checked ~ .brain .cont .but .select2 > div { -webkit-animation:sel2 16s linear infinite; animation:sel2 16s linear infinite; }
#play:checked ~ .brain .cont .but .select3 > div { -webkit-animation:sel3 16s linear infinite; animation:sel3 16s linear infinite; }
#play:checked ~ .brain .cont .but .select4 > div { -webkit-animation:sel4 16s linear infinite; animation:sel4 16s linear infinite; }
#stop:checked ~ .brain .cont .menu .butPause { visibility:hidden; }
#stop:checked ~ .brain .cont .menu .butStop { visibility:hidden; }
#stop:checked ~ .brain .cont .menu .hideStop { visibility:visible; }
/*#stop:checked ~ .brain .cont .aline .line { width:0; -webkit-animation:none; animation:none; }
*/
#pause:checked ~ .brain .cont .menu .butPause { visibility:hidden; }
#pause:checked ~ .brain .cont .but .select_but > div { display:block; }
#pause:checked ~ .brain .cont .aline { visibility:visible; }
#pause:checked ~ .brain .cont .menu { margin-top:16px; }
#pause:checked ~ .brain .cont .line { -webkit-animation:linew 16s linear infinite; animation:linew 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .image { -webkit-animation:alls 16s linear infinite; animation:alls 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select1 > div { -webkit-animation:sel1 16s linear infinite; animation:sel1 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select2 > div { -webkit-animation:sel2 16s linear infinite; animation:sel2 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select3 > div { -webkit-animation:sel3 16s linear infinite; animation:sel3 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
#pause:checked ~ .brain .cont .but .select4 > div { -webkit-animation:sel4 16s linear infinite; animation:sel4 16s linear infinite; -webkit-animation-play-state:paused; animation-play-state:paused; }
/*INPUT MANAGE&PAGINATION CHECKED*/
#slide1:checked ~ .brain .cont .but .select1 > div { display:block; }
#slide1:checked ~ .brain .manage_one { display:inline-block; }
#slide2:checked ~ .brain .cont .image { margin-left:-100%; }
#slide2:checked ~ .brain .manage_two { display:inline-block; }
#slide2:checked ~ .brain .cont .but .select2 > div { display:block; }
#slide3:checked ~ .brain .cont .image { margin-left:-200%; }
#slide3:checked ~ .brain .manage_tre { display:inline-block; }
#slide3:checked ~ .brain .cont .but .select3 > div { display:block; }
#slide4:checked ~ .brain .cont .image { margin-left:-300%; }
#slide4:checked ~ .brain .manage_for { display:inline-block; }
#slide4:checked ~ .brain .cont .but .select4 > div { display:block; }
/*ANIMATION*/
@-webkit-keyframes tool {
    0% { opacity:0; margin-left:-400%; } 15% { opacity:.8; margin-left:-94px; } 17% { margin-left:-126px; } 19% { margin-left:-94px; } 21% { margin-left:-104px; } 23% { margin-left:-94px; } 95% { opacity:.8; } 100% { opacity:.0; margin-left:-94px; visibility:hidden; }
}
@keyframes tool {
    0% { opacity:0; margin-left:-400%; } 15% { opacity:.8; margin-left:-94px; } 17% { margin-left:-126px; } 19% { margin-left:-94px; } 21% { margin-left:-104px; } 23% { margin-left:-94px; } 95% { opacity:.8; } 100% { opacity:.0; margin-left:-94px; visibility:hidden; }
}
/*ANIMATION SLIDE&LINE*/
@-webkit-keyframes linew {
    0% { width:0; } 25% { width:25%; } 50% { width:50%; } 75% { width:75%; } 100% { width:100%; }
}
@-webkit-keyframes alls {
    0% { margin-left:0; } 23% { margin-left:0; -webkit-filter:blur(0px); } 24% { -webkit-filter:blur(10px); } 25% { margin-left:-100%; -webkit-filter:blur(0px); } 48% { margin-left:-100%; -webkit-filter:blur(0px); } 49% { -webkit-filter:blur(10px); } 50% { margin-left:-200%; -webkit-filter:blur(0px); } 73% { margin-left:-200%; -webkit-filter:blur(0px); } 74% { -webkit-filter:blur(10px); } 75% { margin-left:-300%; -webkit-filter:blur(0px); } 98% { margin-left:-300%; -webkit-filter:blur(0px); } 99% { -webkit-filter:blur(10px); } 100% { margin-left:0; -webkit-filter:blur(0px); }
}
/*ANIMATION PAGINATION*/
@-webkit-keyframes sel1 {
    0% { opacity:1; } 24.9% { opacity:1; } 25% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel2 {
    0% { opacity:0; } 24.9% { opacity:0; } 25% { opacity:1; } 49.9% { opacity:1; } 50% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel3 {
    0% { opacity:0; } 49.9% { opacity:0; } 50% { opacity:1; } 74.9% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; }
}
@-webkit-keyframes sel4 {
    0% { opacity:0; } 74.9% { opacity:0; } 75% { opacity:1; } 99.9% { opacity:1; } 100% { opacity:0; }
}
/*ANIMATION MANAGE*/
@-webkit-keyframes anim-right {
    0% { background-position:0 0; } 49.9% { background-position:64px 0; } 50% { display:none; background-position:-64px; } 50.1% { background-position:-64px; } 100% { background-position:0 0; }
}
@-webkit-keyframes anim-left {
    0% { background-position:0 0; } 49.9% { background-position:-64px 0; } 50% { display:none; background-position:64px; } 50.1% { background-position:64px; } 100% { background-position:0 0; }
}
@keyframes linew {
    0% { width:0; } 25% { width:25%; } 50% { width:50%; } 75% { width:75%; } 100% { width:100%; }
}
@keyframes alls {
    0% { margin-left:0; } 23% { margin-left:0; } 25% { margin-left:-100%; } 48% { margin-left:-100%; } 50% { margin-left:-200%; } 73% { margin-left:-200%; } 75% { margin-left:-300%; } 98% { margin-left:-300%; } 100% { margin-left:0; }
}
@keyframes sel1 {
    0% { opacity:1; width:10px; height:10px; border-radius:5px; } 24.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 25% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel2 {
    0% { opacity:0; } 24.9% { opacity:0; } 25% { opacity:1; width:10px; height:10px; border-radius:5px; } 49.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 50% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel3 {
    0% { opacity:0; } 49.9% { opacity:0; } 50% { opacity:1; width:10px; height:10px; border-radius:5px; } 74.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 75% { opacity:0; } 100% { opacity:0; }
}
@keyframes sel4 {
    0% { opacity:0; } 74.9% { opacity:0; } 75% { opacity:1; width:10px; height:10px; border-radius:5px; } 99.9% { opacity:1; width:10px; height:10px; border-radius:5px; } 100% { opacity:0; }
}
@keyframes anim-right {
    0% { background-position:0 0; } 49.9% { background-position:64px 0; } 50% { display:none; background-position:-64px; } 50.1% { background-position:-64px; } 100% { background-position:0 0; }
}
@keyframes anim-left {
    0% { background-position:0 0; } 49.9% { background-position:-64px 0; } 50% { display:none; background-position:64px; } 50.1% { background-position:64px; } 100% { background-position:0 0; }
}
/*TRANSITION*/
.image,.menu { -webkit-transition:all 300ms ease-in-out; -moz-transition:all 300ms ease-in-out; -ms-transition:all 300ms ease-in-out; -o-transition:all 300ms ease-in-out; transition:all 300ms ease-in-out; }
.int { -webkit-transition:background-color 300ms ease-in-out; -moz-transition:background-color 300ms ease-in-out; -ms-transition:background-color 300ms ease-in-out; -o-transition:background-color 300ms ease-in-out; transition:background-color 300ms ease-in-out; }
@media screen and (max-width:900px) {
    .right,.left { width:50px; height:50px; }
}
@media screen and (max-width:700px) {
    .right,.left { width:30px; height:30px; }
}
@media screen and (max-width:430px) {
    .right,.left { width:20px; height:20px; } .icon > img { width:34px; height:34px; }
}
input { display:none; }
p { font-family:Calibri; text-align:center; font-size:.8em; }
a { color:#FC8570; font-weight:bold; text-decoration:none; }
strong { color:#FFE000; }
.wrapper { height:100%; width:100%; }
.brain { text-align:center; margin:0 auto; } 
4. Klik Simpan

Cara Menerapkan

1. Masuk Ke Beranda Blogger > Tata Letak > Tambah Widget > Pilih HTML/Javascript
2. Masukkan Kode Di Bawah Ini Ke Dalam Kode Yang Sudah Disediakan
<div class="out-wrapper">
<div class="wrapper">

 <!--  INPUT FOR BUTTON SELECT SLIDE -->
 <input type="radio" name="next" id="slide1" checked>
 <input type="radio" name="next" id="slide2">
 <input type="radio" name="next" id="slide3">
 <input type="radio" name="next" id="slide4">
 <!--  INPUT FOR BUTTON STOP&PLAY -->
 <input type="radio" name="sto" id="play">
 <input type="radio" name="sto" id="stop" checked>
 <input type="radio" name="sto" id="pause">

<div class="brain">
 <label for="slide4" class="int manage_one left"></label>
 <label for="slide2" class="int manage_one right"></label>
 <label for="slide1" class="int manage_two left"></label>
 <label for="slide3" class="int manage_two right"></label>
 <label for="slide2" class="int manage_tre left"></label>
 <label for="slide4" class="int manage_tre right"></label>
 <label for="slide3" class="int manage_for left"></label>
 <label for="slide1" class="int manage_for right"></label>
  <!-- CONTAINER -->
  <div class="cont">
   <!-- BUTTON PLAY&STOP -->
   <div class="menu">
    <label for="stop" class="butStop" onclick=""></label>
    <label for="play" class="butPlay" onclick=""></label>
    <label for="pause" class="butPause" onclick=""></label>
    <span class="hideStop"></span>
    <span class="hidePlay"></span>
    <span class="hidePause"></span>
    <span class="tooltip"><p>Control buttons!</p></span>
   </div>
   <!-- IMAGE -->
   <div class="image">
    <img src="Link Gambar" class="oneP"  alt="Deskripsi">
    <img src="Link Gambar" class="twoP"  alt="Deskripsi">
    <img src="Link Gambar" class="threeP"  alt="Deskripsi">
    <img src="Link Gambar" class="fourP"  alt="Deskripsi">
   </div>
   <!-- ANIMATION LINE -->
   <div class="aline">
    <div class="line"></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
    <div class="bord"><span></span></div>
   </div>
   <!-- BOTTOM LINE -->
   <div class="but">
    <label for="slide1" class="select_but select1" onclick=""><div></div></label>
    <label for="slide2" class="select_but select2" onclick=""><div></div></label>
    <label for="slide3" class="select_but select3" onclick=""><div></div></label>
    <label for="slide4" class="select_but select4" onclick=""><div></div></label>
   </div>
  </div>
</div>
</div>
</div>
3. Klik Simpan
Tag : Widget
10 Komentar untuk "Cara Membuat Image Slider Dengan Control Button"

mantap gan, jadi tambah keren lagi blog nya :D

Wahhh, trmksih bnyak niih sob caranya, tpii bisa mmbuat loading blog lama gk ya kira2 ?

wah gambarnya bisa gerak sendiri sesuai slide

tutorial yang sangat bermanfaat :),, terima kasih

Maaf Jika Komentar Anda Jarang Saya Balas, Karena Sibuk Di Dunia Maya

Back To Top