Dinamis Slider Navigation With CSS3

Info informasi Dinamis Slider Navigation With CSS3 atau artikel tentang Dinamis Slider Navigation With CSS3 ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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/AVvXsEjAsAPV3YhU9_JccNl7cDVlDfJyQljHxjuc-zhhOJ_lFw0PrHzAPLJ-43atvARNWXPbsMKoHG9jpN1uFQ0Y29x1FLmStFpqz-2dNfIAERUEPAinQu-_5jhkZ4bMD7Nsgn_7Qo6jkywjtURr/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/AVvXsEibE_inhkLIimrSxgCJg7yUlvFRyXx8Ygy4qy-kjCeeQyu3EGepmPlgFZgf7arqAj1xd1OJFnDOZhJFdLZiEyEKub-2h46GqyCwKBzuXZvD5Ag21qib8uFDSUzi1c4qtIetYOXZ3KAbYpk/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/AVvXsEjG1XiA79zjb2VlO7Kp9_GRI31oK3rJB1SSUsNVtXexE-5CW9SxIqK_eFurlcmyFlvQUbc04uLGPE5QVkI0a4QWn3_xTqDiYbwWglNG78ahJ_b-dGbTNPtQKmd7tIaqLoJRfJKuj1SIgps/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/AVvXsEgAo1x4BHjQ78teo5UDhS4vD6cpk7xW-SENxAf95EIK-jEhynNb6g5pFGx0QU1OLqHo0PaY6aJFyHKHvjBDRq28hyphenhyphenHuT3pJDJZiuZMeaz9Jwv_UXAWcibfMRO3MN6d21RA2c0yM65ic2z8/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/AVvXsEhV0vINZ0eJ8BPXKMjBXCl-Sfjy2F2q5jynD8Xly1KsaidIHL-qebQItWpAGLK5VBeX8Tx2GZOZCGkuaoZaZgaLgx3k_OXWg3TTZZ5RjsNjRX0X5muLUh5U2zF6IBnTfYiHE7XK7VdCbdg/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.

Demikian artikel tentang Dinamis Slider Navigation With CSS3 ini dapat kami sampaikan, semoga artikel atau info tentang Dinamis Slider Navigation With CSS3 ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik