Trang giải trí dành cho tuổi thơ: Trình diễn ảnh kiểu đứng

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

center>

<style>

.textboxstyle {

font-family:Arial;

font-size:16pt;

color:black;

text-align:center;

vertical-align:top;

}

.textboxbackgroundstyle {

background-color:white;

padding:5px;

/* rounded corners for Firefox */

-moz-border-radius-topleft: 15px;

-moz-border-radius-bottomright: 15px;

/* rounded corners for for Safari and Chrome */

-webkit-border-top-left-radius: 15px;

-webkit-border-bottom-right-radius: 15px;

/* rounded corners for Opera */

border-top-left-radius: 15px;

border-bottom-right-radius: 15px;

}

.curveandshadowstyle {

/* shadow and rounded corners for Firefox */

-moz-box-shadow: 5px 5px 8px #818181;

-moz-border-radius-topleft: 25px;

-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */

-webkit-box-shadow: 5px 5px 8px #818181;

-webkit-border-top-left-radius: 25px;

-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */

box-shadow: 5px 5px 5px #818181;

border-top-left-radius: 25px;

border-bottom-right-radius: 25px;

/* shadow for Internet Explorer */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#818181');

border-style:solid;

border-width:1px;

border-color:white;

}

</style>

var imgurl= new Array()

var message= new Array()

var thislink= new Array()

/////////////////////////////////////////////////

// SCRIPT-CONFIGURATION STARTS HERE

/////////////////////////////////////////////////

// Các link ảnh theo thứ tự

imgurl[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjCpdWNApd8cqV05QdSs23i8B7dkPa0Lfms-oWxim68wjVuVkR8CqIJSduDWCtKg1f1fJakoSCd3ZCs87mfzCmRG25mdyYzYMt3FC_DgIRCJ5SKEtoxjepkhfKxKd6ov3Sxb_tn8Ew3c7/s1600/0003.gif"

imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1PCFhEIPgQhZzDXZ0ybtag_7DxebEUEGMqjaucpf1rJavKUL0fTaXc_5r1-8E2wG9KgM9w5SsbHZRUmmUOJkMW6wmb7EIkSsT08TTE4ghPMF6YXErwrUaJ_FwA_mHojvLeNRGNjy9o5QD/s1600/0008.gif"

imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEDkJ7IcEf6SDFQE5OpXqZpljW50t2vjdHx2vG_4zYXKfz1G1rcvJo-NrRA4Yqs8rCx7kZcNLr3e206pcxS6dLBwcPXZ9cA3Khlh6Mlx0SGsJefLNCRRayOC2Tcyck4yYmAyF5NiUEY8V/s1600/0009.gif"

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJvSpBMa-fIQN0LnUxVnE0ppknMZjMj_2x93eh8GXSqYF6iZzY3Aog7LV3_iEduutoJN0IoiPAOYTcLrEmtxs1iKRaZVTn0IYEhVO_kLCLPdRlkx0ylf4Wy2moUi53L3lWBA4V-glaGALR/s1600/0019.gif"

imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kP1UsfSLsmkMBkuqXqciV6NPnIzJIwD6yYMeh8aMsWu1hoWgXmGkkZEK_mUOQESgpRoh4isl8oqRmqRfKZ45puIE2sZ1ayPWZ5upx9Y_tg_Du35s4Dd09h5L6vAMShjkRvfgPo-qhEh8/s1600/0027.gif"

imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FrdNlANmbuExHTMkYJx0mpjaB55I-uTU7PQkZiXPy1qZopUFCq-BVZuhPrfRueBt6jFyn39XjCEeXB8y3LED7et5f8cz2uO0tXy8Wj3eu4Uk_wM7MkQWXm1YTw3c7wLmZyJWcbcznBLs/s1600/0048.gif"

imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL6gF2aM0gTsTZxhlg_NW3XfQ6nbywmz6a6qaGDoPMt8FmSU2pfAPzTUa6s6KVPvU2aVQCLcqVPvkUvSAJq6TA0vc9ncZwmKkxFaE_xb4NLGtpcgfUE1iKDtj9DoxLvU1dSgMp5X2cl-gP/s1600/0050.gif"

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7HLhpkRlZUBZDMvCpX2AuzPJyiov0DMCkp-Tk0J7rHJDY1_rukuOb6zLtqkQ5kAKi_YwX8kHlDvQCzMmAimJqruvzKazIsvMf4F7R919hlHqM6tMbL-iA6oN0VGlCsiD4nb_YPl-X1YPF/s1600/0059.gif"

imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicSW7mogzM_XdU1XF4p5TzqXuvptLsXA11tbejvRNWemJxO8Q6N-dIdhmf4Wkrkyx5Dns7j4Umk4rpIE0bRqafzwyOH928S0KTKmlvR0p003u0u0cfrVhxUXrICNNDiyUe3ISZmJkg0ikI/s1600/0062.gif"

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxN_V6o5qoEuoMsxQWgL_5NLWz1fqQ-Olz-6_btCw3jLCErFy4ca6_n5jIWFD1nQzY0yUY74S2A90VzjBn2rRT7ACjnMLVKrT5qdokY5P3moT-82JoP0Dkh0d9KivNcrw8x-w2cQbN_aIu/s1600/0069.gif"

// Ghi chú cho ảnh

message[0]="Welcome to my Blog"

message[1]="dunghennessy"

message[2]="Cám ơn các bạn đã ghé tham quan"

message[3]="Chúc các bạn luôn vui khoẻ"

// set the links corresponding to the images above (no more no less than the images above)

// Nếu muốn đặt liên kết thì thay dấu # bằng link mình muốn liên kết đến

thislink[0]="#"

thislink[1]="#"

thislink[2]="#"

thislink[3]="#"

// Chiều rộng của ảnh (pixel)

var imgwidth=240

// Chiều cao của ảnh (pixel)

var imgheight=320

// set stillstand of picture (seconds)

var stillstand=2.5

// set opacity-strength (transparency-effect). Values may range from 1 to 100

var opacitystrength=60

/////////////////////////////////////////////////

// SCRIPT-CONFIGURATION STOPS HERE

/////////////////////////////////////////////////

// Do not edit below this line

var tmr

var step=10

var i=imgwidth

var i_imgurl=0

stillstand*=1000

var preloadedimages=new Array()

for (iii=0;iii<imgurl.length;iii++){

preloadedimages[iii]=new Image()

preloadedimages[iii].src=imgurl[iii]

}

function shrinkpic() {

document.getElementById("textbox").innerHTML=""

if (i>0) {

i-=step

document.getElementById("picdiv").style.width=i+"px"

document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"

document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"

document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"

tmr=setTimeout("shrinkpic()",20)

}

else {

i_imgurl++

if (i_imgurl>=imgurl.length) {

i_imgurl=0

}

document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"

i=1

tmr=setTimeout("enlargepic()",20)

}

function enlargepic() {

if (i<=imgwidth) {

i+=step

document.getElementById("picdiv").style.width=i+"px"

document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)+"px"

document.getElementById("picdiv").style.left=imgwidth/2-(i/2)+"px"

document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)+"px"

tmr=setTimeout("enlargepic()",20)

}

else {

i=imgwidth

showmessage()

}

function showmessage() {

document.getElementById("textbox").innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'

tmr=setTimeout("shrinkpic()",stillstand)

}

function gotothislink(){

document.location.href=thislink[i_imgurl]

}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')

document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')

document.write('</div>')

window.onload=shrinkpic

</script></center>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, sau cùng bấm Lưu lại là xong.
Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
imgurl[n+1]="Link ảnh"

Dán tiếp xuống phía dưới các link ảnh, trong đó n là số thứ tự cuối cùng của ảnh. Ví dụ ở code trên tôi có SlideShow gồm tất cả 10 ảnh được đánh số từ 0 - 9, nếu thêm một ảnh nữa thì ảnh cuối cùng của tôi là 10 thì SlideShow sẽ có tất cả 11 ảnh...thì code sẽ giống như này:
.......................

.........................
Dòng lệnh màu xanh là dòng lệnh mới thêm.

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước và thay đổi kích thước của khung trình chiếu bằng với kích thước của ảnh....

Chúc các bạn thành công!!!

dunghennessy

THỦ THUẬT 04:15

banner

Trình diễn ảnh kiểu đứng

Translate - dịch tiếng

BÀI THUỐC

Tổng số người xem

ẢNH

Bài được xem nhiều

Bé vẽ tranh

Xem theo tháng

Chủ đề

Album ảnh trẻ thơ

Album3D ảnh tuổi thơ

PHÙNG BẢO KIÊN

Ý kiến nhận xét