Memasang Slide show di Home blog

Untuk kebutuhan tertentu kadang ingin memasang slide show yang hanya muncul di halaman depan / home blog bukan. Nah berikut ini saya sudah coba dan tokcer memasang slide show dihalaman depan home blogspot saya. Dan perlu diingat bahwa saya sendiri memasang slide show ini menggunakan tempalte simple bawaan blogger. Contohnya dibawah ini.

Yuk ikuti caranya

1. Masukan kode berikut diatas ]]></b:skin> biasa dengan CRTL + F biar cepet

.easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; } .easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 350px; } .paging { background: none; position: absolute; 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: none; } .paging a.active { background: #15E3FF; border: 1px solid #15E3FF; } .paging a:hover { } .easytitledes { width:70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; } .easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#29FF00 } .easytitledes p { color: #fff; font: 12px Arial; }

2. Masukan kode berikut diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type="text/javascript"> $(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 4000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); </script>

3. Masukan kode berikut diatas

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
   <div class='image_reel'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RrLFaZXgCYFlLujz3GrUQRgCOoPMTasfJyEtZ0lQ_zKNTpswysA4XxHbFG87K35bzbxMDqgopDQAC5hX5Rd33z0L_Ns0pwWkumGFKNLFNSRVWozOuXOZkBQi8wUjrTI_svNPndlyzzl/s1600/sewa+mobil+elf+semarang.jpg'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RrLFaZXgCYFlLujz3GrUQRgCOoPMTasfJyEtZ0lQ_zKNTpswysA4XxHbFG87K35bzbxMDqgopDQAC5hX5Rd33z0L_Ns0pwWkumGFKNLFNSRVWozOuXOZkBQi8wUjrTI_svNPndlyzzl/s1600/sewa+mobil+elf+semarang.jpg'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RrLFaZXgCYFlLujz3GrUQRgCOoPMTasfJyEtZ0lQ_zKNTpswysA4XxHbFG87K35bzbxMDqgopDQAC5hX5Rd33z0L_Ns0pwWkumGFKNLFNSRVWozOuXOZkBQi8wUjrTI_svNPndlyzzl/s1600/sewa+mobil+elf+semarang.jpg'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RrLFaZXgCYFlLujz3GrUQRgCOoPMTasfJyEtZ0lQ_zKNTpswysA4XxHbFG87K35bzbxMDqgopDQAC5hX5Rd33z0L_Ns0pwWkumGFKNLFNSRVWozOuXOZkBQi8wUjrTI_svNPndlyzzl/s1600/sewa+mobil+elf+semarang.jpg'/></a>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RrLFaZXgCYFlLujz3GrUQRgCOoPMTasfJyEtZ0lQ_zKNTpswysA4XxHbFG87K35bzbxMDqgopDQAC5hX5Rd33z0L_Ns0pwWkumGFKNLFNSRVWozOuXOZkBQi8wUjrTI_svNPndlyzzl/s1600/sewa+mobil+elf+semarang.jpg'/></a>
   </div>
   <div class='descriptionslider'>
<div class='easytitledes'><a href='...post-link1.html'>contoh travel</a><p>Description / Caption 1</p></div>
<div class='easytitledes'><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>
<div class='easytitledes'><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>
<div class='easytitledes'><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>
<div class='easytitledes'><a href='...post-link5.html'>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>
</b:if>

4. Ganti URL, Title dan description sesuia kebutuhan anda. dan saya asumsikan anda sudah paham tentang lokasi url mana saja yang harus diganti. Lalu klik save dan lihat hasilnya.
Nah kalau ternyata gak jadi ganti lokasi kode di langkah pertama dibawah kode ini

-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */

Bagi kalian yang mau nyoba versi tutorial asli silahkan visit blog Klik disini dan ikuti tutorial pemasangan slide shownya. Tampilan slide shownya keren lo. jadi pasti kalian suka.

harus sabar dan teliti ya biar bisa berhasil kalau gak sabar behhh pasti gak jadi.

Terimakasih buat aura-ilmu.com karena telah share caranya.