slider untuk blogger. Untuk tutorial ini menggunakan jQuery dan
Hal Css3.Important adalah ini adalah mudah untuk menambahkan blog Anda.
Yang hanya widget.easy untuk mengkonfigurasi. Anda dapat menambahkan atau menghapus
tanpa problem.Follow setiap langkah ini untuk menambah
blog Anda.
1. Masuk ke akun blogger dan klik drop down.
4. Paste di bawah salah satu kode di bawah ini.
<style type="text/css">
.container1 {
width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg0h49A_wD1ww4uU3z_Ym7f5Wdl-YbXUuD8spV02-p95LL6kuQG7CimcXi_HmiJeQCHt2IzXPWM6qC9F99naXaziTcmHzzG5o_peF4K6Ld_TX4MxE9cq2MnsFcKbCluODZcYnevsXsw8Y/s1600/paging_btrix_bg2.png) no-repeat;
display: none;
}
.paging_btrix a {
padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold; background: #920000; border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj621zuwCo9OofYvBbkIvgawLa8XfoCXG-PZWJgtb5sw2Q3haSXk0EI8bhdXMFzlR6MOJ918baDvw0ZH0Y3VU1vhU2j94E62iELezQTk9vnoNUBqKQYOmBmsypOUhaKI0EdIpXZ0IUWR3Y/s1600/bloggertrix_imge1.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrCxgvgS-xIUA9ypMqJ5OfFqN45CodeXoqBqs2HPJOT_YnmKvj_omPoXW9eY-TjjHNtrfr5j_nYcZ8S3JDlu2dkUsuYmSqBRMH-3vTPAQkyb91A7t0Hsm-_QWy8ZMIpEA_BJgyJTNMLg/s1600/bloggertrix_imge3.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5D4Yi1rZTZV-zxcb3PjMmffplPbkyJu7ViNeNK3bIYaE1NOhJY0SFNgbqkHuasnDcXELE1OJuh4aM2fsxlCMyPgXy4Dr4_IG7dLEFIavK86umYohuZ2N3M_Z4pPU5IOmE2X_B9ezs6Uk/s1600/bloggertrix_imge2.jpg" alt="" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLTHr-ToBiEgNs-pzxFboEopB817O2uuknxCEpRW_Pfof4sLjI-NsFdvURK4lm9LrUdXD04RA5XWMNwM6j_6EQzEP5xJdg7YoPdqJEVv45wyM5bA29_m_Zi1QzEFigsig-vl8UlHnK1As/s1600/bloggertrix_imge4.jpg" alt="" /></a>
</div>
</div>
<div class="paging_btrix">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging_btrix a").click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
Anda dapat mengubah foto dengan mengubah URL Gambar
Jika Anda ingin menambahkan link ke gambar Anda. # Ganti dengan link gambar Anda.
7. Sekarang menyimpan HTML / Javascript '.
selamat mencoba
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang JQuery Menarik Image Gallery Untuk Blogger. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment