▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

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.


<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>

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STOPS HERE -->
<!----------------------------------------->
           
<script>

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]="http://4.bp.blogspot.com/-xFzQXSklfDI/UACqr4De4qI/AAAAAAAAbeY/xaZtDxhXFb8/s1600/0003.gif"
imgurl[1]="http://4.bp.blogspot.com/-8eBnsC132Qw/UACquWudCWI/AAAAAAAAbeg/8lW4CCz-9SM/s1600/0008.gif"
imgurl[2]="http://4.bp.blogspot.com/-JUgy7eqGhwE/UACqv55Rq_I/AAAAAAAAbek/sf2_AfFs9ME/s1600/0009.gif"
imgurl[3]="http://3.bp.blogspot.com/-y-CMaV56kSE/UACqygwNuXI/AAAAAAAAbew/57TGMBVjEvw/s1600/0019.gif"
imgurl[4]="http://4.bp.blogspot.com/-hG372cyLtFM/UACq1AfiKKI/AAAAAAAAbe4/Q7pKJHmCVNc/s1600/0027.gif"
imgurl[5]="http://2.bp.blogspot.com/-qJX93CeZPCQ/UACq4TX8CUI/AAAAAAAAbfA/IZe2owFTd9k/s1600/0048.gif"
imgurl[6]="http://4.bp.blogspot.com/-mc6gq8ej0F0/UACq5bwkb6I/AAAAAAAAbfI/pdHVViYLzX0/s1600/0050.gif"
imgurl[7]="http://2.bp.blogspot.com/-u5u4x5bDmiE/UACq6uZehuI/AAAAAAAAbfQ/ExH9529Qx4s/s1600/0059.gif"
imgurl[8]="http://1.bp.blogspot.com/-yzcHEQeYTWM/UACq7kRYvSI/AAAAAAAAbfY/ilk3wcHnq4E/s1600/0062.gif"
imgurl[9]="http://2.bp.blogspot.com/-3sYqCwbr2Yo/UACq_zAZ7wI/AAAAAAAAbfg/1tJiqu6stMw/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>
<!-- END OF THE CODE FOR THE CSS-3-SLIDESHOW-->


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:
.......................
imgurl[0]="http://4.bp.blogspot.com/-xFzQXSklfDI/UACqr4De4qI/AAAAAAAAbeY/xaZtDxhXFb8/s1600/0003.gif"
imgurl[1]="http://4.bp.blogspot.com/-8eBnsC132Qw/UACquWudCWI/AAAAAAAAbeg/8lW4CCz-9SM/s1600/0008.gif"
imgurl[2]="http://4.bp.blogspot.com/-JUgy7eqGhwE/UACqv55Rq_I/AAAAAAAAbek/sf2_AfFs9ME/s1600/0009.gif"
imgurl[3]="http://3.bp.blogspot.com/-y-CMaV56kSE/UACqygwNuXI/AAAAAAAAbew/57TGMBVjEvw/s1600/0019.gif"
imgurl[4]="http://4.bp.blogspot.com/-hG372cyLtFM/UACq1AfiKKI/AAAAAAAAbe4/Q7pKJHmCVNc/s1600/0027.gif"
imgurl[5]="http://2.bp.blogspot.com/-qJX93CeZPCQ/UACq4TX8CUI/AAAAAAAAbfA/IZe2owFTd9k/s1600/0048.gif"
imgurl[6]="http://4.bp.blogspot.com/-mc6gq8ej0F0/UACq5bwkb6I/AAAAAAAAbfI/pdHVViYLzX0/s1600/0050.gif"
imgurl[7]="http://2.bp.blogspot.com/-u5u4x5bDmiE/UACq6uZehuI/AAAAAAAAbfQ/ExH9529Qx4s/s1600/0059.gif"
imgurl[8]="http://1.bp.blogspot.com/-yzcHEQeYTWM/UACq7kRYvSI/AAAAAAAAbfY/ilk3wcHnq4E/s1600/0062.gif"
imgurl[9]="http://2.bp.blogspot.com/-3sYqCwbr2Yo/UACq_zAZ7wI/AAAAAAAAbfg/1tJiqu6stMw/s1600/0069.gif"
imgurl[10]="Link ảnh"
.........................
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!!! 




29 nhận xét:

Hiển Pro nói...

Anh có slideshow ảnh nào 3D không zậy em đang cần một cái cỡ hình chữ nhật (chiều ngang dài hơn chiều dọc) để cho ảnh của lớp vào đó mà! hi anh post dùm em nhé!

dungheineken nói...

3D là sao hả em???, anh chưa hiểu lắm, có hình ảnh gì về slideshow 3D gởi qua cho Anh xem thử xem

Hiển Pro nói...

Ảnh này:
https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcT70cSVsornpR18Zy4zDgkCzj9ILTezvOa7WMHFEup2fvpn8GaC
Ảnh này:
https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTOLBaXZvwHptCNYRWaY7kohDBdiASkpWyXhhVAz8DsowTFeoCd
Ảnh này:
https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQp2Q3FnL7N-ZORkgBZgDrzygiE_-haWa4gIo4sdOFs0or3Js
Hoặc ảnh này:
https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcRElL6LruD0FvsEj5J8PbiulX99iWK2zwtF8m2-XpmMQ5ghbcyaCQ

MON NGON CUOI TUAN nói...

Hiện tại ngoài trang chủ http://monngoncuoituan.blogspot.com/ của mình có phần hình chạy slide nhưng mà sao nó hok chạy? (Template demo mình download về). Hướng dẫn cho mình cách khắc phục nhé! Thanks

dungheineken nói...

À, cái này là do nó xung đột với các code tiện ích trên blog của bạn đó...
Cách khắc phục là bạn phải xoá bớt một trong những tiện ích mà bạn đã thêm vào.

MON NGON CUOI TUAN nói...

Phần đó nằm trên header mà, đâu có xung đột với tiện ích nào với nó đâu?. Các phần tiện ích khác nằm ở phần bài đăng mà. Mình thử rồi, cũng vậy áh!

dungheineken nói...

Bạn thử thế nào???
Bây giờ nếu không tin thì bạn lập một blog mới cũng lấy giao diện này và đừng thêm bất cứ tiện ích nào khác thì Sildeshow này sẽ hoạt động. Sau đó bạn lần lượt thêm các tiện ích vào thử xem, lúc này bạn sẽ biết tiện ích nào xung đột liền.

Quang Minh nói...

hi lâu quá ! ko ghé thăm nhà ông bạn ! vẫn khỏe hả ! mình có gửi yêu cầu giúp ! bạn xem dùm nhé !

dungheineken nói...

Bạn muốn mình giúp gì???

Quang Minh nói...

Dũng Ơi Giup Mình tạo cái logo để Liên Kết với các site khác đc ko ! mình ko bít tạo !

dungheineken nói...

Ok, để mình xem thử

Quang Minh nói...

bạn nhớ web shop mình chứ Dũng ! :d

Quang Minh nói...

bạn nhớ web shop mình chứ Dũng ! :d

dungheineken nói...

Ok, tôi đã gởi qua mail cho bạn rồi đó, vào check mail lấy Logo nha Quang Minh...

Chip Kool nói...

Trang bạn nhiều thủ thuật hay đó..mình ngồi đọc hết rồi..nhưng chưa có thủ thuật recent post vnexpress như này http://www.itechplus.info/2011/04/magazine-recent-posts-cho-blogger.html bạn bổ sung,trang bạn load hơi chậm..tớ ngồi đợi lâu quá..thủ thuật tiện tích vnexpress bạn xem có cách nào thu gọn js vào trong temple ko mình ko rành lắm..Blog Điện Tử | Tin Học

dungheineken nói...

Cám ơn bạn đã ghé tham quan và gởi lại những lời nhận xét chân tình...
Mình không biết bạn đang sử dụng đường truyền Internet nào chứ mình load trang chỉ tốn khoảng 10 giây (mình sử dụng 3G của Viettel)
Mình sẽ xem xét lời đề nghị của bạn để tìm cách thu gọn file .js

Sát Thủ Hào Hoa nói...

cái này mình thử nó bị lỗi. hiện dc hình dầu tien rồi bị mất luôn chỉ hiện có mỗi cái lá. còn thử vs web khac thi dc kho hieu wa

dungheineken nói...

Bạn thử làm lại xem, nếu vẫn bị như vậy thì code này bị xung đột với một trong các code nào đó đang có ở trang Web của bạn...

Sakaguchi nói...

Slideshow kieu 5 hình nhu bi lỗi rùi ! anh xem lại dùm em cai'

Dung PHAM HOANG nói...

Bị lỗi gì vậy em...??? Anh đã xem lại vẫn "chạy" vù vù mà...

CID.Designer nói...

Em nhap code cua anh nhung slide ko chuyen hinh anh oi! anh xem giup em nhe!

Dung PHAM HOANG nói...

Oh...Vậy là code này đã bị xung đột với một code nào đó ở trên blog của em rồi

CID.Designer nói...

Anh cho em hỏi muốn mở liên kết slide trên tab mới em đưa target=_new vào mà nó không được anh ơi! giúp em với

Dung PHAM HOANG nói...

Ý em là sao anh chưa hiểu rõ lắm????

CID.Designer nói...

Ý em là muốn khi lick vào ảnh thì liên kết sẽ được mở trên 1 trang mới thì làm thế nào ấy ạ!

Dung PHAM HOANG nói...

À...thì em thay link liên kết vào dấu thăng ở dòng lệnh thislink là xong
Chúc em thành công

CID.Designer nói...

Em thay link rồi, nhưng mà khi lick vào link nó mở trang liên kết trong tab đó luôn. giờ muốn nó mở trên tab mới có được không anh. Cảm ơn anh!

Hieu Thanhhang nói...

lạ quá , sao ko thấy liên kết thienhieu.com vậy a dũng , e tú đây

Dung PHAM HOANG nói...

Vì có một vài lần Anh vào blog của em không được (chắc do em đang sửa chữa...) tưởng em không sử dụng nữa, nên anh đã xoá...Bây giờ thì Anh đã gắn lại cho em rồi đó (tin tức tổng hợp)

Đăng nhận xét

 
Powered by by: Blogger