Thứ Tư, 13 tháng 2, 2013

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://lh5.googleusercontent.com/--0I90D_59dc/UG-iXitIlTI/AAAAAAAAccA/0-Taia1b5FY/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://lh4.googleusercontent.com/-XPiCyPcgBp8/UG-iWig9PDI/AAAAAAAAcbk/NODMECGRxFE/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://lh5.googleusercontent.com/-6sbndn9WB8Y/UG-iVkfedkI/AAAAAAAAcbc/LfiJNBusd-8/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://lh3.googleusercontent.com/-aMqftDrTYcU/UG-iWf_6NoI/AAAAAAAAcbo/hStIrrMT2iY/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://lh5.googleusercontent.com/-DddOPo7XCpA/UG-iXRHojpI/AAAAAAAAcb4/alg287l9Bzs/s42/pause-button.png) no-repeat left top;opacity:0;}
.sl_kenny_m .play_pause_button.play_button{background:url(https://lh3.googleusercontent.com/-CVf1QjPqw_E/UG-iXiEx-PI/AAAAAAAAcb8/jqN5t2YjhMc/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,


13 nhận xét:

  1. H hỏi Ánh cái nhé. Vị trí Link Ảnh thì điền Link ảnh, còn vị trí Ảnh 1 thì điền cái gì Cứ đề ảnh 1, ảnh 2 , ảnh 3 à? Cảm ơn Ánh đã hướng dẫn.

    Trả lờiXóa
  2. Xin lỗi Hoàn vì Ánh trả lời chậm.
    Vị trí ảnh 1, ảnh 2, ảnh 3 để đưa đường Link mà mình muốn khi nhấn vào ảnh này sẽ nhẩy tới. còn nếu không muốn thế thì ở đây cũng lại vẫn đưa lại link ảnh vào.

    Trả lờiXóa
  3. Thay đổi size trình diễn theo ý muôn thi lam sao ban

    Trả lờiXóa
  4. Thay đổi size trình diễn theo ý muôn thi lam sao ban

    Trả lờiXóa
  5. Mấy cái code này mình không rành lắm!Mới tập tành công nghệ thông tin nên cùi lăm!
    chỉnh nha

    Trả lờiXóa
  6. Truyện ngắn hay, truyện ngắn tình yêu, góc tâm sự, sống đơn giản blog
    Key: truyen ngan - nap the zing

    Trả lờiXóa
  7. Hãy thư giãn cùng tien len mien bac hay thả ga với Tien len mien nam và trở thành vua bài với Binh xap xam.

    Trả lờiXóa
  8. Link m88 mới nhất khi bị chặn. Cập nhật liên tục những link vao 12bet mới nhất tại Việt Nam. Cách vào m88 mới nhất năm 2015 đảm bảo không chặn. Link vao fun88 nhanh nhất vào được 100%, cung cấp thông tin đầy đủ nhất về M88. Cá độ bóng đá và game casino online.

    Trả lờiXóa
  9. https://www.youtube.com/watch?v=K5NjkvYe74Y&index=1&list=PLE4IJH_K33IAHmpUbb8kIbZjbUoLQyYn4

    Trả lờiXóa
  10. Nội dung bài viết thật tuyệt vời. Mình cũng muốn giới thiệu về một Công ty dịch thuật uy tín - Công ty dịch thuật miền trung - MIDtrans trụ sở chính chính tại địa chỉ 02 Hoàng Diệu, TP Đồng Hới, tỉnh Quảng Bình có Giấy phép kinh doanh số 3101023866 cấp ngày 9/12/2016 là đơn vị chuyên cung cấp dịch vụ dịch thuật, phiên dịch dành các cá nhân. Hệ thống thương hiệu và các Công ty dịch thuật con trực thuộc: dịch thuật đà nẵng - dịch thuật miền trung tại địa 54/27 Đinh Tiên Hoàng, Quận Hải Châu, TP Đà Nẵng là địa chỉ chuyên cung cấp dịch vụ dịch thuật chuyên nghiệp tại Đà Nẵng và các khu vực lân cận ; dịch thuật tiếng nhật tại sài gòn địa chỉ 47 Điện Biên Phủ, Phường Đakao, Quận 1 TP HCM, dịch thuật vị thanh, hậu giang : địa 101 Trần Hưng Đạo, TP Vị Thanh là nhà cung ứng dịch vụ dịch thuật uy tín hàng đầu tại Hậu Giang; Công ty dịch thuật Viettrans và dịc vụ vung tau translation: dịch vụ dịch thuật tại Vũng Tàu cho người nước ngoài có nhu cầu, giao diện tiếng Anh dễ sử dụng; dịch thuật tiếng pháp tại sài gòn: nhà cung ứng dịch vụ dịch vụ dịch thuật phiên dịch hàng đầu tại TP Hồ Chí Minh; Công ty dịch thuật Đà Nẵng MIDtrans cung cấp dịch vụ công ty dịch thuật đà nẵng midtrans : Địa chỉ 54 Đinh Tiên Hoàng, Quận Hải Châu, TP Đà Nẵng chuyên cung cấp dịch vụ dịch thuật công chứng, dịch thuật đa ngôn ngữ, đa chuyên ngành tại Đà Nẵng; Viettrans 43 Điện Biên Phủ, Quận 1 Sài Gòn: chuyên cung cấp dịch vụ dịch thuật đa chuyên ngành toàn quốc; Công ty dịch thuật Hà Nội MIDtrans chuyên cung cấp dịch vụ Viettravel - vietnamese tourist information and travel tips tại 46 Trần Cao Vân, TP Huế chuyên trang về thông tin du lịch và các tour đặc sắc tại Việt Nam, y dược (bao gồm bệnh lý), xây dựng (kiến trúc), hóa chất, thủy nhiệt điện, ngân hàng, tài chính, kế toán. Các dự án đã triển khai của Công ty dịch thuật chuyên nghiệp MIDtrans đều được Khách hàng đánh giá cao và đạt được sự tín nhiệm về chất lượng biên phiên dịch. Đó là kết quả của một hệ thống quản lý chất lượng dịch thuật chuyên nghiệp, những tâm huyết và kinh nghiệm biên phiên dịch nhiều năm của đội ngũ dịch giả của chúng tôi. Hotline: 0947688883. email: info@dichthuatmientrung.com.vn . Các bạn ghé thăm site ủng hộ nhé.

    Trả lờiXóa
  11. Có rất nhiều câu hỏi được đặt ra như: Vùng kín nổi hạt trắng li ti là bệnh gì? Hay vấn đề về Vùng kín nổi mẩn đỏ và ngứa là bệnh gì
    ? hoặc thắc mắc của nhiều bệnh nhân về Nổi hạt trắng li ti ở vùng kín là bị gì?. Hãy đến với Phòng Khám Đa Khoa Hồng Phát vì đây là phòng khám đa khoa chất lượng chuyên thăm khám và điều trị bệnh viêm bao quy đầu, cắt bao quy đầu không đau, đình chỉ thai kỳ an toàn và hiệu quả tại Hải Phòng
    https://google.co.jp/url?q=https://phongkhamhongphat.vn

    Trả lờiXóa