TẠO SLIDESHOW (Kiểu 5)

Với kiểu 5 này, các ảnh lần lượt trình diễn với hiệu ứng thu nhỏ và phóng to rất đẹp mắt.
Ở mỗi ảnh bạn cũng có thể ghi vài dòng chú thích cho ảnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

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.

<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/AVvXsEgHM0EwZeE0ixNDdlvtygoVVT7eHFpq8oTBVSiKZgMhnGmQGeQf3RCxJuOEoNXnU63B-YKKQ7mUQYsW6NT1izK7CS_n-GwH0NDdJ0r4_H_aZE1st0unWHTDoDZQkxHzPZTXHExcpfCjJWjc/s1600/0003.gif"

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

imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf3aMt-WrRqBWoLZeXU4zb8Oi0v4uiXN8GB2n0u-Iix3j-veZ1QUaX7eVCfr5pmhFMSa0qoNeeSr94W47b-b1zqTvIbBd8kap3YXpTJCpeLrNMEl1iBJgQSDbOKrbdbifJF2Drfc-zRoK6/s1600/0009.gif"

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcpnHJLqtL6KyUUg1W_wPvC0NUVaWEgvZmkJtc3OGp2A1Z_melfkABdvVx37wRcmUsQB7JW7Ea9m98U6OMoZ9dRs4rKRzUGtQC_7aL5BijRMGyxT80_A4tuGwCo_9KN0tyX2Z2MTnNhMr/s1600/0019.gif"

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

imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6fLzsTwG1PrWqyjQN_nhj9MG8GhT3maNGCC3NAIIHi5E0IjUlYKhvh8srqrqgu5ghOdl17LQ3X1PWufT6pIzPhYZhMAMMmRDIqdA4UN6T7RoWo0pE3Qmq2HJGewbOLUUWSPtaG8GFZGL4/s1600/0048.gif"

imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5G3DdNSiqA_sFuyBZlEcNfphByuLrpFWck_e-nZAmZA-Hi4T3d9IhxkW9nKEhQQ9IOGB8eSHPAKXNr_K6TJxa2JBcK3i7m0wv5-4Nq-Zdru2J6ru0GyBsRm3Ancz_N9pYRFAtjG1ygNjV/s1600/0050.gif"

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPrgFwwONMzKcp_RUY_ur19P174OG2cClQbrmgVO_-rWZHb3psc7hhOtDGx1Suu5vI4ZkFm-w4EXEkJ0dxucNmPxu0-w8ca_Zw5Krm0uIJce6miZ7VgGzAkn6-q9PjMcjY-MHqIULO9qM/s1600/0059.gif"

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

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxfy_IhOjOqlYxL9FrCMQYp_abPjf1q7y7QB3e6HTDLHoXO621IEIKUEZImOVy1UE7YC3ZLGwVtVC_PIBnM_bD3_wAxJZI0UE7tHYRAOkf_QISW4kZwxGFrU4Ft8sfu-gg2GxFOwcJBcfQ/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ư vầy:
.......................