Slideshow chạy ảnh đẹp cho blogger, blogspot

Posted On / 24 comments

Slide chạy ảnh đẹp luôn là những điểm nhấn trên 1 Website, blog. Slide đó bạn có thể trình bày những thông tin nổi bật như bài viết, quảng cáo, hình ảnh đẹp...1 hiệu ứng Slide đẹp cũng góp phần làm tô điểm thêm cái đẹp và sống động của trang Web. Ở bài viết hôm nay mình giới thiệu tới các bạn Slideshow Jquery chạy ảnh.

Demo và hướng dẫn mình sử dụng trên nền Blogger, ở dạng Website các bạn làm tương tự, dán vị trí code là Javascript và HTML là OK. ^^

- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán Code dưới đây vào tiện ích vừa thêm:
Code

<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(http://1.bp.blogspot.com/-UQAJVYvatlY/UTbGMUctYcI/AAAAAAAAHIE/PSM-s1tbAd8/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>
<!-- Huong dan thu thuat -->
<div class="container1">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://cutiseo.blogspot.com"><img src="http://3.bp.blogspot.com/-sZ_datgpxTE/UUZtgveicbI/AAAAAAAACdE/IYLX9qd0tvI/s1600/anh-bia-fb-tinh-yeu-10.jpg" alt="kiem tien online" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://3.bp.blogspot.com/-_kCy_1GpJxk/UUZtgorGoTI/AAAAAAAACdI/VRrCfJNa4dI/s1600/anh-bia-fb-tinh-yeu-11.jpg" width='660' alt="kiem tien qua mang" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://1.bp.blogspot.com/-4I9BC6cOxV4/UUZzFHrdsvI/AAAAAAAACe8/UydwOnpn0gM/s1600/anh-bia-tinh-yeu-dep-3.jpg" alt="cutiseo" width='660' /></a>
<a href="http://cutiseo.blogspot.com"><img src="http://4.bp.blogspot.com/-FrlydLUmAVg/UUZtgp2wskI/AAAAAAAACdM/Q0-f3SIaanM/s1600/anh-bia-fb-tinh-yeu-1.jpg" alt="huong dan seo" width='660' /></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>
Các điểm lưu ý mình đã in màu khác. Các bạn có thể chỉnh sửa theo ý của mình nhé.
- Lưu lại và xem kết quả :)
May you like: Tin Tuc Cong Nghe

Quảng cáo

24 nhận xét:

  1. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. Thanks bạn, rất đẹp, không nặng lắm...

    Trả lờiXóa
  3. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  4. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  5. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  6. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  9. cho mình hỏi mình làm nó chạy được nhưng hình cuối lại bị trắng. xin giúp đở. cảm ơn nhiều

    Trả lờiXóa
    Trả lời
    1. Hình cuối mà bị trắng là do linh ảnh bạn làm bị lỗi đường dẫn đó.

      Xóa
  10. cho mình hỏi, chỗ links màu đỏ mình thay bằng link hình khác sao nó ko chạy

    Trả lờiXóa
  11. bạn ơi cho hỏi mình muốn đổi hình thì làm sao

    Trả lờiXóa
  12. Cảm ơn bạn đã chia sẻ. Ngoài ra, bạn cho mình hỏi thêm chút, cần chỉnh kích thước như thế nào để slide ảnh này chạy vừa đồng thời trên giao diện laptop và giao diện điện thoại được vậy, ad chỉ giúp mình với?

    Trả lờiXóa
  13. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  14. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  15. Muốn thêm 1 slide nữa thì thêm code đoạn nào vậy anh, bày cho mình với, có thể gửi code cho mình qua mail phanbatuhue@gmail.com, cảm ơn admin nhiều

    Trả lờiXóa
  16. làm sao cho nó vừa màn hình được vậy add ơi

    Trả lờiXóa
  17. minh có web: bariavungtaufpt.com
    cho minh hỏi làm cách nào để slide thay đổi độ rộng theo màn hình vậy

    Trả lờiXóa
  18. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  19. cảm ơn bài viết của bạn

    Trả lờiXóa
  20. Ad cho mình hỏi chút. Lấy link ảnh thì lấy ở đâu cho đường link nó ngắn như của bạn vậy?
    Mình lấy link trực tiếp từ ảnh trên blog nhưng sao nó dài quá

    Trả lờiXóa
  21. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  22. cho hỏi thăm xíu bạn ,mình muốn chỉnh sửa kích thước lớn hơn đc ko ak .vì mình thấy width mà ko thấy chiều cao h

    Trả lờiXóa
    Trả lời
    1. Bạn chỉnh ở đây này height:240px

      Xóa