Cara Membuat Slider Animation Di Homepage

Slider Animation pada Homepage - Pada kesempatan Tutorial kali ini kita akan membahas tentang Cara Membuat Slider Animation Di Homepage, tutorial ini sedikit rumit , tapi mudah jika sudah paham, silahkan disimak.
Untuk demonya bisa kalian cek dibawah ini :

Demo

Cara Membuat Slider Animation Di Homepage

1. Buka Dashboard Blogger > Pilih Tema > Pilih Edit HTML, cari </style>, lalu tambahkan css berikut diatas atau dibawahnya , saran saya masukkan kedalam 1 style saja (biar tidak banyak tag style)

/* CSS Slider Animation */
.slidewrap-wrapper{width:auto;float:left;position:relative;padding-right:2%;padding-top:10px}
.slidewrap{overflow:hidden;position:relative;width:100%;height:350px;margin-bottom:5px;background:#eee}
.shiftngeblog,.imgs_wrap,.paging{position:absolute}
.imgs_wrap{top:0;left:0}
.imgs_wrap img{float:left;width:20%;height:350px}
.paging{background:0 0;bottom:15px;right:20px;padding:4px 0 2px;z-index:100;display:none}
.paging a{margin:3px;background:#fff;width:10px;height:10px;display:inline-block;border:none;outline:0}
.paging a.active{background:#15E3FF;border:1px solid #15E3FF}
.shiftngeblog{width:70%;display:none;bottom:20px;left:20px;z-index:101;background:#000A3F;background:rgba(2,0,51,.6);padding:10px 15px}
.shiftngeblog a{color:#15E3FF;font:14px sans-serif;text-transform:uppercase;font-weight:700}
.shiftngeblog a:hover{color:#29FF00}
.shiftngeblog p{color:#fff;font:12px Arial}
/* shiftngeblog */



2. Cari </head>, kemudian taruh JS/Javascript berikut ini diatasnya (jika ada tag script lain maka masukkan script ini kedalam script , alasannya sama kaya diatas)

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".paging").show(),$(".paging a:first").addClass("active");var e=$(".slidewrap").width(),t=$(".imgs_wrap img").size(),a=e*t;$(".imgs_wrap").css({width:a}),rotate=function(){var t=$active.attr("rel")-1,a=t*e;$(".paging a").removeClass("active"),$active.addClass("active"),$(".shiftngeblog").stop(!0,!0).slideUp("slow"),$(".shiftngeblog").eq($(".paging a.active").attr("rel")-1).slideDown("slow"),$(".imgs_wrap").animate({left:-a},400)},rotateSwitch=function(){$(".shiftngeblog").eq($(".paging a.active").attr("rel")-1).slideDown("slow"),play=setInterval(function(){$active=$(".paging a.active").next(),0===$active.length&&($active=$(".paging a:first")),rotate()},4e3)},rotateSwitch(),$(".imgs_wrap a, .shiftngeblog a").hover(function(){clearInterval(play)},function(){rotateSwitch()}),$(".paging a").click(function(){return $active=$(this),clearInterval(play),rotate(),rotateSwitch(),!1})});
//]]>
</script>



3. Jika sudah save theme, dan langkah terakhir silahkan buka Tata Letak / layout > Tambah Widget > HTML/javascript, tambahkan HTML berikut kedalam widget tersebut

<div class="slidewrap">
<div class="imgs_wrap" style="width: 3200px; left: -640px;">
<a href="#"><img src="LINK GAMBAR"></a>
<a href="#"><img src="LINK GAMBAR"></a>
<a href="#"><img src="LINK GAMBAR"></a>
<a href="#"><img src="LINK GAMBAR"></a>
<a href="#"><img src="LINK GAMBAR"></a>
</div>
<div class="deskripslide">
<div class="shiftngeblog" ><a href="#">Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="shiftngeblog" ><a href="#">Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="shiftngeblog" ><a href="#">Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="shiftngeblog" ><a href="#">Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="shiftngeblog" ><a href="#">Post-Title 5</a><p>Description / Caption 5</p></div>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>



4. Jangan lupa untuk diedit dulu pada bagian yang sudah diberi tanda.
LINK GAMBAR : berikan atau taruh link gambar / url gambar yang mau dipasang pada slider animation
Description / Caption : ketik deskripsi sesuai gambar / post yang akan ditampilkan
# : taruh link / url tujuan postingan gambar
Cara ini masih manual,belum otomatis