Cara Menciptakan Slider Animation Di Homepage

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

Cara Membuat Slider Animation Di Homepage

1. Buka Blogger > Tema > Edit HTML, cari </style>, kemudian 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 aku beri tanda.

Bagikan Artikel ini