Cám ơn Lưu Ly

Cám ơn Lưu Ly

Lưu Ly là con gái của Blogger Tuấn Nga, một bạn Internat của chúng ta. Lưu Ly rất giỏi Vi Tính và thông thạo Blog. Khi biết là vì Yahoo Blog sắp đóng cửa, mẹ phải chuyển sang Blogspot, cháu đã giúp mẹ thiết kế một Blog rất đẹp và hoành tráng. Lúc đó tôi cũng đang trong giai đoạn tìm hiểu để thiết kế Blog cho mình. Nhìn thấy Blog của Tuấn Nga, tôi thích quá. Tuấn Nga cho tôi điện thọai của Ly . Tôi gọi điện hỏi cách làm, được Ly giúp đỡ rất nhiêt tình, thậm
chí đến ngay nhà tôi và rất nhanh chóng giúp tôi lập một Blog mới nom rất đẹp và rất chuyên nghiệp. Tôi đã sử dụng Blog này làm Blog chính của mình và đã kết nối để lien hệ với bạn bè. Nhưng khi sử dụng thì thấy rằng Blog kiểu này phần viết Nhận xét và Trả lời nhận xét không giống như các Blog mà mọi người đang dùng, nghĩa là không trả lời riêng cho từng nhận xét và viết các lời nhận xét lien tiếp nhau được, một cách rất hay và phù hợp để chúng ta có thể giao lưu và chia sẻ với nhau khi đọc bài viết của bạn bè. Tôi hiểu rằng đã ở trong một hội thì các Blog phải giống nhau vì vậy tôi đành bỏ Blog này mà thiết kế Blog khác đơn giản hơn để dùng.

Bỏ Blog Ly thiết kế tôi rất tiếc vì trong đó có nhièu cái hay, một là cái Slide có hình ảnh thay đổi  theo cách chuyển động ngang, chạy vòng tròn và cách làm Menu trong cột Trang. Tôi nghĩ mình sẽ tìm cách để đưa những cái này về Blog của mình. Và bây giờ tôi bắt tay vào làm việc đầu tiên. Tôi đã làm được nhờ sự giúp đỡ của Luu Ly nên viết bài này để cám ơn Lưu Ly và cũng để chia sẻ với các bạn để ai thích thì cùng làm cho vui.

Cách làm Slide Trình diễn ảnh trên đầu Blog.

Tôi đặt Slide này trên đầu Blog còn các bạn có thể đặt vào đâu cũng được, kể cả trong Bài viết của mình. Cái Slide tôi sẽ trình bầy ở đây hiện các bạn nhìn thấy ở phía dưới nóc nhà của tôi. Đây sẽ là nơi cập nhật những thông tin ảnh. Nơi đây tôi sẽ khoe ảnh của con cháu, ghi lại những hình ảnh mới nhất về các cuộc gặp gỡ của bạn bè chúng ta. Hay đơn giảm là những bức ảnh đẹp mà mình vừa sưu tầm được. Vì mục đích đó nên việc thiết kế và thay đổi ảnh phải làm sao phải thật đơn giản và dễ làm.

Để tìm  mã làm Slide kiểu này thì như thông thường, tôi phải tìm trong bảng mã HTML của Blog. File này khá dài, in ra tất cả 57 trang. Tìm được chắc cũng mất nhiều thời gian. May quá tôi gọi điện hỏi cháu Ly. Cháu bảo cháu cũng đã làm và ngay lập tức gửi cho tôi bảng mã qua Email. Nhận được bảng mã tôi làm thử ngay, ra kết quả như ý. Tôi đi tìm mấy cái ảnh ở Tiên Sa, lần này chỉnh kích thước đúng như trong bảng mã và kết quả là một Slide hoàn chỉnh mà các bạn đang nhìn thấy. Bây giờ xin ghi lại đây các bước thực hiện.

Các bước thực hiện làm Slide Trình diễn Hình ảnh.

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/AVvXsEgKTrmhhlp97OvGjOmVivpmyxrbQYfW7Wpdw8JW4ha4_BTQ34d_n-WeB1LyHLuN0BUYbFywS9NoVS1g4Z2c5t2CtACK7_L_gBmrNHX_5CoHiwMCbwCpaG8N707n0OsDD_CBiZORgl6sX3Wf/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/AVvXsEjqxqyvHseIYPYcv2ziH8u6bR-2Pd8u9UmQlYBG3mdDCOdkGZF6Sts0wSXzNT1ZpUP20947w17DVH-4iPWWKfxbA4_SiRar-AQr72-n1kz_A6CTH3DIirPxMlM0jthtBJQSX9nZ9YP2qqYw/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/AVvXsEh3DzfnkXFoExOzvNyZgjE_GEByXRQxO5PwnCjL71Aj-QOWtbmSoXIQSH8BzStytwyHvy9zfIEIynpbg64DYbVUp1UoXAsaVqtZiejlh-zmd1fB89n4-z1algzHFhn4duCZN7geR1LDNM8k/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/AVvXsEh1nyCXvxxwVz-E4oGR99H5zx_X745fTrqGnf18sJNSaXESBeZTxLx-SvJutMeGhKVEXZ-2Fx75bGIdv74xW9o4VmSNgU_EuMPd0k73gTk-cSvEZ8ThWa-kyTtlgFWLIqXE14D1gdkGYyxL/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/AVvXsEi1uOP6cCp2qditmVnj13qsHuk3L1aWVPfefqTjVZ1oPNB_ZcWCFSJUA9Osup0W15gfQhGeUb_VY_RsOgsrDk_jIUZho_Vk0EbUSTiPQYBbGUFBwIaKXlrsOzo9LDQxhZoQeiaz5krohNat/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/AVvXsEjwGfDNqGuam3RI1wCQHpAB49FJB1O6M5sjltC5Y5lB7Ct7K78xJlwsYUKvY2xdlVXW-Fknlx1FsK5rvFgTOMuoYN7PcvEbdOvGRwiLHR4WEu0iPXr5DOAJatJB0kLsH2lHnb09T4As6Bet/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.
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,