Cara Membuat Slide Show Image Pakai Tombol Slider Keren Di Blog

Dalam Posting ini - Cara Membuat Slide Show Image Pakai Tombol Slider Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri secara Bergantian bisa juga memakai tombol slider secara bergantian dengan menggunakan tag Css html dan javascrift. 

pertemuan kali ini saya akan memberikan slider image yang sangat cocok dipasang untuk blog kita, dengan tampilan yang pilihan posting gambar dan dapat memilih dengan mengeklik pada nomornya. 


untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. Agar tampilan blog kita semakin keren dan unik tujuannya supaya pengunjung akan betah berada di blog kita.. 

penasaran bagai mana bentuknya.. ? mari kita langsung saja menuju TKP. 

Caranya tinggal salin dan vaste kan saja kode di bawah ini pada situs kita tepat nya di Settingan Tema > pilih Edit HTML > terus Tekan CTRL+F > setelah itu cari Kode ini </b:skin> Lalu Vastekan Kode di bawah ini Tepat di Atas Nya.

Kode css

<style>
.main_slider {
float: left;
margin-left:28%;
position: relative;
}
.window_slider {
height:400px;
width: 600px;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDRrtYbuR3wZUNLNrZZ1h05eEQsK8PymkBIqeFXYa__8gwpdgr0_mBqPMXofeTom9QghDDmrtIRu2LwvqJSYCLOSf_nak5sBGThYalkvu4RoPQZ72Xo4whrlgOPnZoOJ1lQdqcgc_RrMy/s1600/paging_bg2.png) no-repeat;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>

Dan berikut ini tag html yang dapat membangun Slide Image nya :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste.

Kode html

<div class="main_slider">
<div class="window_slider">
<div class="image_reel">
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfv9xwL8f30E8jS4OlBll9tSYCV3RB3oqOm3exXrwOqyJS4Yg1erI9o_oqgSC4ypZsCK9RWGpwrH9L24NAv4PPLa53SXyxdWq9UoKE_IHAchEx4drg-9nN1y6FtrYE3Crebzrr3-1fBJM4/s1600/slide-1-728.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMOWJ9Il8h3Iw6P2v4_GAjDTNjwEthyeXCq3JNa1UYTwVKeGKMsIth0WDc_6Zm3f9Soy1vCAUZIiWhD9CIGpFUDeqdwVVOZolmKYG4L02sFl7Pt6IakyOC17rlkdGF8kY7eI_uaKU1iPnH/s1600/lt_growth2013_co_53_powerpoint_templates_title_slide.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLcFLQrlJOokK6SyOiSwUD0drPYrRDdUPPTnezxbr44eMzgbRKpt0GltxvOoWoAc_r9KGg11SF0xb0lrv_LMzWRGKJm47jF5BKIezZXvzff_M0A_LW-zXBjPm2EZtwkMbBEDFH4PlNdlr/s1600/903-PowerPoint+2010+TP+-+Reading+View.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf3hyphenhyphenOCo8kEeQPi3-ycS9txSyps3I9uMe2Jg2W0mSd7HGWfLaaU9einfUAKgyed8kQLHD0x20J1VmMmRK_wrx1Gq0T4CP1hyUy5gNwsXaDRDhf8iCqU_-eR-xfa26Sffrmj6b5uL9IVB8u/s1600/Slide15.jpg"></img>
</a>
</div>
</div>
<div class="paging" style="display: block;">
 <a class="active" rel="1" href="25"> 1 </a>
 <a class="" rel="2" href="221"> 2 </a>
 <a class="" rel="3" href="514"> 3 </a>
    <a class="" rel="4" href="155"> 4 </a>
 </div>
</div>

          

Kode javascrift

<script src="https://doc-0s-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/l2u7l2fv92udc4usvgbp97il3jakj3vh/1405058400000/11363352952214392690/11363352952214392690/0B9OR40LPow7obXo4S3ZtQ00zYmM?e=download&h=16653014193614665626&nonce=cvmql6pu44uso&user=11363352952214392690&hash=vlhrai0cp2ve4fb9kiknnn70gpr0gelv" type="text/javascript"></script>
<script type="text/javascript">
   
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window_slider").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');
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 7000);
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});

    </script>

Setelah itu lihat hasilnya..

Adapun File nya dapat dilihat hasilnya  dan dapat juga diunduh berikut di bawah ini :

Demo                                  Unduh