Dinamis Slider Navigation With CSS3

Dinamis Slider Navigation With CSS3 – masih pada tema yang sama seperti pada pembahasan tutorial sebelumnya yakni masih seputar slider. Walaupun slider tergolong widget yang kurang disenangi oleh sebagian blogger kerena mungkin terkadang menurut para blogger juga memberatkan loading blog, namun itu hanya menurut sebagian blogger saja dan masih banyak juga blogger yang masih suka menggunakan slider untuk melengkapi desain dari tampilan blognya. Sedikit trik akan sedikit saya bahas disini, dalam menggunakan slider tentunya juga harus memperhatikan size file gambar yang nantinya akan di tampilkan kedalam slider. Jika size file gambar tersebut terlalu besar tentu untuk load gambar pada saat slider berjalan terkadang gambar yang ada tidak muncul dikarenakan waktu load yang terlalu lama untuk mengambil gambar tersebut dari URL-nya. Itulah sebabnya saya jarang menggunakan URL gambar langsung dari blogspot.com jika gambar tersebut akan saya terapkan kedalam slider karena pada slider sendiri sudah tampak jelas pasti gambar yang digunakan juga berukuran cukup besar. Oke sampai disini tentu sudah paham yang saya maksud, oleh sebab kita lanjut lagi ke pembahasan. Untuk menambah fitur slider ke dalam blog berikut adalah tutorial cara membuat Dinamis Slider Navigation With CSS3 di blog.

Demo

1. Login ke akun blogger.
2. Copy kode dibawah ini.

<style>
.main_slider {
float: left;
position: relative;
}
.window_slider {
height:286px;
width: 900px;
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/AVvXsEjQRnXwUxJ7t2wdE8wJ-dGuYul1VS_zv2a1dn4qkVO-A5rdye00UEixTKRVdfW9JqMVYfAsORk2wBAvwqCJ-zMLLH5h_GUzzFmuHTzuZpgGPvHQb4RJ1gxFWn4EE8MifgbVmfBOT-Q_EEjX/h94/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>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.js"></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>

<div class="main_slider">
<div class="window_slider">
<div class="image_reel">
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizZFRwmBL15twMRO7qnNJ9_aztkpGaOHdtDAMmUSm4bXIG5M3NnXnWtSzv4gRENC6SpsTW3dmBaPC-EH479WxybF9d1WE8PZFg9lJuo5TLia3cvqdp5NKyCqxsrivaJYEhFJlj7bZ9wY8/w790-h286-no/Faceblog-Evolutions-%25281%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc5UrqPRDOAbmDGF7BP7GBIaPKmLGN2s7kw7EtJCFHxhPd0Web36PQ7jtnQsaNgG3mR7t2JlL51Sftms40MtEA2UaJLt_sm4ucZB-PNfRoP0BdVDNWh7_IMGs_-9V9qoqg9EgJGzYv6ps/w790-h286-no/Faceblog-Evolutions-%25282%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBARTYjaLtK1AAg-ijV02N-QCubJ3KStZAlDEbrHhIEvqj1CoOs0JNdK0Q1UalrPXj3soZX8ep-7vZzKbfSb6AWGVSuWQwGVo7aC-ds6FcnvoQPTlGRiZXND8qyniZuBwCzW2mDBinRQ/w790-h286-no/Faceblog-Evolutions-%25283%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
<a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuiHlYdUqXH04uFJ9zhRlWyCqXiGVTZ6Ss1KNSSFTBWF9Btjw5J7hvamOxbVvTkVlYqCcHrNuvfPIernvIDoPQXh1Q7gMF0D752SnXMKc7AJgTqUkBZKQsdL5qtx-PGggugRHqiUEpCoE/w790-h286-no/Faceblog-Evolutions-%25284%2529.jpg" width="900" alt="Faceblog Evolutions"/></a>
</div>
</div>
<div style="display: block;" class="paging">
<a href="http://mas-andes.blogspot.com" rel="1">1</a>
<a href="http://mas-andes.blogspot.com" rel="2">2</a>
<a href="http://mas-andes.blogspot.com" rel="3">3</a>
<a href="http://mas-andes.blogspot.com" rel="4">4</a>
</div>
</div>

Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Untuk width dan height maupun URL gambar silahkan anda sesuikan selera.

3. Selanjutnya klik Tata Letak >> HTML/Javascript lalu paste kode tersebut kemudian Simpan dan lihat hasilnya.