Cách làm Slide Trình diễn Hình ảnh.

Các bước thực hiện 

Bước 1 ;  Chuẩn bị ảnh

-         Các bạn chọn lấy một số ảnh đã lưu cất trong máy tính của mình, số lượng tùy ý ( khoảng 5-10 chiếc)

-         Vào chương trình Photobucket và Upload những ảnh này lên để chỉnh sửa lại kích cỡ ảnh và lấy đường Link của ảnh để điền vào bảng mã. Chú ý là Kích cỡ ảnh các bạ chuyển về chiều rông bằng  610px và chiều cao bằng 340px đúng như trong bảng mã. Còn nếu muốn thay đổi theo ý mình thì bạn đồng thời cũng phải thay đổi số liệu này trong bảng mã.. Khi có các đường Link của chương trình Photobucket cho, các bạn copy lấy dòng Direc Link của từng ảnh ra Word để dùng sau này.

Bước 2 : Tạo bảng mã cho Slide.

                   - Các bạn mở một trang Word rồi copy bảng mã dưới đây vào

<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/AVvXsEiDlfoB8_HuU1ZjHYFd_ohBhHIhKds-xmUE3a3Cw4D6unsFPgKnFT9nusjQdAfmXIWhXhs_Thc2eNSC5DImprQpJWM0fDgI6hxoe-TG0W0AM2i1WqOxfRd3wXXzUrU23QgOohCTCvjYZFA1/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/AVvXsEjdItU2Y5WxhZcHkQ4WnNJ9IBVNDYDBSRKycNZtBqMNofa2DG5XDaHmXkGOjMNXaG83y_DVwA_lb_RjoDtn4sAs9XNjgVO6TpXkFL4sWqUMqjXgkcWOcoR3_VBFr6AroKvWxQEVdj1zm7Vh/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/AVvXsEgAcIaTXN1WuHqSnpfAhxqbOzxLbEeoCmNtJLmvinPeI3aMVdGPtwLf8YANkQdISH0ulKqNPi2NObNmL30SHsbE5QecGmJ9zpsawns7y1F0u9E_96y_VoxKMFkk1CXqou3xP4CG6DypMrmz/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/AVvXsEiu_THW66ZXjJpnCMAEYxF6WTNkxDaXFjjRcFHQoCBp9S_Lu811sr8up_fyFiRzfoPT1sjYgxildGXM9zoDaWw0G3uuyR-3QI1ve6zoOu75TF9N4NvQbl9NVnvMxf0x9jJeyvQT4Bu4FbVl/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/AVvXsEhzAZ2EGdhnjWnbA0XMfOdkMV0PSPMKnZ4v0z0jnr_IC0ivJKHCZB2zRFn4JOmfU0OU_vT2jKiAVxpS7CiU9T3SBLzAvmJzfWnF4BvCgEr-INUJzoMBSkkl6OHGOdNcCiJDUvx9TjvCnO3a/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/AVvXsEi5N6H8J46h3IXg3nSA8PskWIVDeBv-Bg9EcZcKYA5tJwltZaKpX92bTu2gwmqE-m2j1V6_tJGW_qUp_kQztXUuXUwgROnyX1fd3tDi4G-u9pFGCkclj8sNcDQf8tAjg_cL227Z0EibQE3s/s42/play-button.png) no-repeat left top;}.sl_kenny_m_small {width:200px;height:100px;}

</style>

<script type="text/javascript" src="http://onlinseeding.googlecode.com/files/jq144.js"></script>

<script type="text/javascript" src="http://onlinseeding.googlecode.com/files/sl_kenny.js"></script>

<script type="text/javascript" src="http://onlinseeding.googlecode.com/files/animate_colors.js"></script>

<script type="text/javascript" src="http://onlinseeding.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="Ảnh 1" target="_blank"><img src="Link ảnh 1" /></a>

</li>

<li><a href="Ảnh 2" target="_blank"><img src="Link ảnh 2" /></a>

</li>

<li><a href="Ảnh 3"><img src="Link ảnh 3" /></a><div class="noi_dung"><p>kenny</p></div>

</li></ul>

</div>

</div>

Bảng mã tuy rất dài nhưng các bạn đừng lo vì chúng ta chỉ cần quan tâm đến mấy dòng cuối có các chữ được tô mầu đỏ. Các bạn sẽ phải thay đường Link ảnh số 1  của mình vào vị trí  Ảnh 1 và Link ảnh 1. Rồi cứ thế với ảnh 2, ảnh 3. Nếu số ảnh của bạn nhiều hơn thì bạn cứ copy các đường này rồi dán tiếp xuống dưới sao cho đủ mà dùng. Điền xong các đường Link ảnh vào bạn sẽ có một bộ mã mới của mình. Bạn copy bảng mã này để dùng cho bước tiếp theo.

Bước 3 : Đây là bước Thêm Tiện ích mà chúng ta đã rất quen thuộc khi thiết kế Blog. Tôi chỉ nhắc lại cho nó có hệ thống.
Bạn hãy mở chương trình Blogger để có bảng điều khiển. Nhấn vào Tam giác ngược nhỏ trên bảng điều khiển rồi chọn " Bố cục". Khi cửa sổ Bố cục hiện ra bạn nhấn vào "Thêm Tiện ích" rồi chọn loại Tiện ích là HTML/javascript. Khi cửa sổ tiện ích này hiện ra, bạn đặt tên cho nó và trong ô nội dung bạn dán bảng mã vào. Rồi nhấn lưu. Tiện ích mới đã được tạo ra. Bạn đưa chuột tới đó và kéo ô tiện ích này tới vị trí bạn muốn đặt. Xong rồi bạn nhấn vào ô " Lưu sắp xếp". Chương trình sẽ thông báo là đã lưu thay đổi của bạn. Bạn hãy mở Blog để xem thành quả của mình.

Mời Ba về ăn Tết với chúng con

• 
• 
• 

  kenny

• 
• 
• 

  kenny

Chúc bạn thành công ngay trong lần thử đầu tiên và sẽ thường xuyên cập nhật những hình ảnh mới vào Slide này để Blog của bạn luôn đổi mới và sinh động,