Các bạn chỉnh sửa bố cục và thêm tiện ích HTML/Javascript ở vị trí các bạn muốn chèn slide. Sau đó dán đoạn code bên dưới vào, save lại và xem kết quả. Để chỉnh chiều cao và chiều rộng của slide, các bạn chỉnh lại thông số width, height ở dòng 3
Code<html>
<style>
.sl_kenny_m {position:relative;width:610px;height:340px;background:#000;}
.sl_kenny_m ul{display:none;}
.sl_kenny_m .ctn_sl_kenny{overflow:hidden;position:relative;}
.sl_kenny_m .image{overflow:hidden;}
.sl_kenny_m .image img{display:none;}
.sl_kenny_m .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:2;}
.sl_kenny_m .box_clone img{position:absolute;top:0;left:0;z-index:2;}
.sl_kenny_m .prev_button{position:absolute;top:50%;left:10px;z-index:10;width:32px;height:34px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicL2uhIs11eJEa0nSu86t7aAicPZEaVDJA0PfpjerEnQG8l9zGLn995j6IMq7eX3Is55tzfI7FOgqwjHJr2U52KUD5jdX3oMVNJwtGK8-2hL2ED2RvwqFKLta8VUI1yQUsmhzYzIZMpt_Y/s34/prev.png) no-repeat left top;}
.sl_kenny_m .next_button{position:absolute;top:50%;right:10px;z-index:10;width:32px;height:34px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglxCAUXPIqTYp6_9GuHUjp0nG2Gt9TzJ4X7MkskcOcTy1FX1sZ45TQCLnVcxbcasl_vciUwE4LXt3L26lIbo8XYA3nOAqEq3S2nPXmCxOoqUS-ClbgqIWIWgYx1ckEj5tRBFBO0NTquDdT/s34/next.png) no-repeat left top;}
.sl_kenny_m .tt_sl{position:absolute;top:15px;left:15px;z-index:10;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:.75;}
.sl_kenny_m .tt_sl .img_nb{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}.sl_kenny_m .tt_sl .img_nb_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0;}
.sl_kenny_m .container_thumbs{position:relative;overflow:hidden;height:50px;}.sl_kenny_m .tt_sl_thumb{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}.sl_kenny_m .tt_sl_thumb .img_nb{overflow:hidden;width:70px;height:40px;position:relative;}
.sl_kenny_m .tt_sl_thumb .img_nb img{position:absolute;top:-50px;left:-50px;}.sl_kenny_m .box_scroll_thumbs{padding:0 10px;}.sl_kenny_m .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg,#555,#fff);background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:11;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.sl_kenny_m .tt_sl_dots{position:absolute;right:10px;bottom:10px;z-index:16;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.sl_kenny_m .tt_sl_dots .img_nb{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.sl_kenny_m .tt_sl_dots .img_nb_select{background:#c00;float:left;margin:0 5px 0 0;}
.sl_kenny_m .ll_sl_kenny{z-index:15;position:absolute;bottom:0;left:0;display:none;}.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKQ3QhcZRUnerVr_9Ch9Scv7iOy6hoiutN8WAW1Vwgzb9jL52SO7ZxMt56s8CvV8XenAw8IIqQzevuFfS-53xsZ2iG8o1_RwL2SCCW6Yoh4-Eg8TcLBlUZXhWnHiji8tPw8UPQFxK9ZAg/s32/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.ll_sl_kenny{z-index:15;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:.8;background:#000;}
.ll_sl_kenny p{padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}.tt_sl *{font-family:Consolas,arial,tahoma!important;}
.sl_kenny_m .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:9;border-radius:20px;}#prev_sl{display:none;position:absolute;z-index:17;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden;}#prev_sl ul{height:100px;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0;}
#prev_sl ul li{width:100px;height:100px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block;}#prev_sl ul li img{position:absolute;top:0;left:0;height:150px;width:auto;}#overlay_sl_kenny{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000;}
.sl_kenny_m .focus_button{position:absolute;top:50%;z-index:10;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgodO7D-fQxEuP_Ysu5DTe5EKHxr3ZsdNXxxtVTzGpbLeri55UuiVCE7MGIDJ0kNvMzmFzLF2XWxZLfKNPYHufqstnQzIZgDrxJ-fBN4T-zexS4r5g3R-uRIo1FzhzmN8x31lyKRNCSRZ3f/s42/focus-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button{position:absolute;top:50%;z-index:16;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQjk1RV9-b796mLLvXXHIsFyHAsccOJHQ7dDw00odo4PLQGrG4x67Va_Sgi8CFlIBWw3qkD9Yaz3Tzw4gj3zLUo2h5YEq_qIWaI9ZaFgKwRQ6IlY8zJX9dsZlnM_MaKez6OVlp2qYBOUG/s42/pause-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button.play_button{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgNOmwOHZhDxNlWwbYGyUtyqR6jZgUZIqqR7vq0nFm8ywDiKYlLe5MEITDyZPBYwsa6g4U7KieP_43naZEDDumnFaJZ7UwKpkxk57srHA6IzLm3rELeeHYYJyVcuZCb-CKfWiO1knduktl/s42/play-button.png) no-repeat left top;}.sl_kenny_m_small {width:200px;height:100px;}
</style>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/jq144.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/sl_kenny.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/animate_colors.js"></script>
<script type="text/javascript" src="https://krdautocrazyblog.googlecode.com/files/easing13.js"></script>
<script>
$(document).ready(function() {
$('.sl_kenny_w').sl_kenny({
animation: "random",
interval: 3000,
stop_over: false,
max_number_height: 8,
numbers_align: "Left",
numbers: false,
label: false,
dots: true,
animateNumberOut:{backgroundColor:'#e2e2e2', color:'#fff'},
animateNumberOver:{backgroundColor:'#fff', color:'#000'},
animateNumberActive:{backgroundColor:'#FF8DC4', color:'#fff'},
controls: true,
controls_position: "leftTop",
progressbar: true,
progressbar_css: {
top:'10px',
left:'50px',
height:6,
borderRadius:'2px',
width:560,
backgroundColor:'#FF8DC4',
opacity:.7
}
});
});
</script>
<div class="bb_c">
<div class="sl_kenny_m sl_kenny_w">
<ul>
<li><a href="Địa chỉ ảnh 1" target="_blank"><img src="Link ảnh 1" /></a>
</li>
<li><a href="Địa chỉ ảnh 2" target="_blank"><img src="Link ảnh 2" /></a>
</li>
<li><a href="Địa chỉ ảnh cuối cùng"><img src="Link ảnh cuối cùng" /></a><div class="noi_dung"><p>kenny</p></div>
</ul></div>
</div></html>
Cần thêm bao nhiêu ảnh là
tùy chỉ cần thêm dòng code sau:
<li><a href="Địa chỉ ảnh"><img src="Linh ảnh"/></a></li>
Trước dòng:
<li><a href="Địa chỉ ảnh cuối cùng"><img src="Link ảnh cuối cùng" /></a><div class="noi_dung"><p>kenny</p></div>
Nên size ảnh cho phù hợp với kích thước slideshow cần tạo
