Cara Membuat Slider Animation Di Homepage

Tutorial kali ini saya akan membahas tentang Cara Membuat Slider Animation Di Homepage, tutorial kali ini agak sedikit rumit untuk orang awam, tapi tenang saja ditutorial ini saya akan buat menjadi mudah jadi tidak perlu khawatir lagi.

Cara Membuat Slider Animation Di Homepage

1. Buka Blogger > Tema > Edit HTML, cari </style>, lalu tambahkan css berikut diatasnya

/* CSS Slider - Arlethdesign */
.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}
.arlethdesz,.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}
.arlethdesz{width:70%;display:none;bottom:20px;left:20px;z-index:101;background:#000A3F;background:rgba(2,0,51,.6);padding:10px 15px}
.arlethdesz a{color:#15E3FF;font:14px sans-serif;text-transform:uppercase;font-weight:700}
.arlethdesz a:hover{color:#29FF00}
.arlethdesz p{color:#fff;font:12px Arial}



2. Cari </head>, kemudian letakkan Javascript berikut diatasnya

<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"),$(".arlethdesz").stop(!0,!0).slideUp("slow"),$(".arlethdesz").eq($(".paging a.active").attr("rel")-1).slideDown("slow"),$(".imgs_wrap").animate({left:-a},400)},rotateSwitch=function(){$(".arlethdesz").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, .arlethdesz a").hover(function(){clearInterval(play)},function(){rotateSwitch()}),$(".paging a").click(function(){return $active=$(this),clearInterval(play),rotate(),rotateSwitch(),!1})});
//]]>
</script>



3. Jika sudah save tema, dan langkah terakhirnya silahkan kalian buka Tata Letak > 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="arlethdesz" ><a href="#">Post-Title 1</a><p>Description / Caption 1</p></div>
<div class="arlethdesz" ><a href="#">Post-Title 2</a><p>Description / Caption 2</p></div>
<div class="arlethdesz" ><a href="#">Post-Title 3</a><p>Description / Caption 3</p></div>
<div class="arlethdesz" ><a href="#">Post-Title 4</a><p>Description / Caption 4</p></div>
<div class="arlethdesz" ><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 terlebih dahulu dibagian yang sudah saya beri tanda.