HIỂN THỊ BÀI VIẾT TRONG NHÃN (Kiểu 10)

Ngày Thứ Tư, 5 tháng 9, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết HIỂN THỊ BÀI VIẾT TRONG NHÃN (Kiểu 10)
Chúc bạn xem tin tức vui vẻ !!

Với thủ thuật này, các bài viết của toàn bộ trang Blog hoặc các bài viết trong cùng một nhãn được hiển thị trong một tiện ích được chia thành 2 cột riêng biệt: cột bên trái và cột bên phải.

Cột bên trái bao gồm 2 phần: Phần trên cùng (còn gọi là top-news) bao gồm một hình ảnh đại diện và tiêu đề kèm theo một số dòng mô tả của bài viết mới nhất mà bạn vừa mới đăng. Phần dưới (còn gọi là bottom-news) bao gồm 4 ảnh nhỏ và tiêu đề bài viết của 4 bài đăng kế tiếp (số lượng này bạn có thể tuỳ chọn).

Cột bên phải bao gồm các tiêu đề bài viết tiếp theo của Blog hoặc của một nhãn được sắp xếp từ trên xuống theo thứ tự thời gian (số lượng này bạn cũng có thể tuỳ chọn).

Mời bạn bấm vào "Xem thử" phía dưới để trải nghiệm trước thủ thuật này.

Xem thử

Đầu tiên, bạn đăng nhập vào blog > Chọn thiết kế > thêm tiện ích HTML/Javacript (nếu sử dụng giao diện mới thì bạn chọn Mẫu > thêm tiện ích HTML/Javacript), các bạn nào chưa biết cách thêm tiện ích HTML/Javacript thì xem BÀI NÀY, rồi dán code phía dưới vào.

<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 660px;
}
#top-news {
width: 460px;
height:166px;
padding:5px;
border:#bbb solid 1px;
background:#000;
font-size:12px;
}
#bottom-news {
width: 460px;
padding:5px;
}
#bottom-news-item {
width: 106px;
margin-right:9px;
float:left;
}
#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLvUJno5jaEHhPCJMkEKFfCAxPabtEu2TDmUEsGK8vzAYrsutjX4wGJ0XU98UHgSEgZWXeZkOF6EOZUQZNxn38jQZCXmJ4HSeGsOk8n3JbhgwmyeLdOi71Rg6GZszMcYGaeEoV_uQGYx5/s1600/1399304s1osheptmw.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 105;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#fff";
cmcolor = "#fff";
topcolor = "#fff";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 15;
label = "";
home_page = "http://www.dunghennessy.blogspot.com/";
</script>
<script src="https://dl.dropbox.com/u/66348944/all.txt" type="text/javascript"></script>

Bây giờ bạn chỉnh sửa các dòng lệnh màu đỏ theo ý thích của mình. Trong đó:

* Width (đầu tiên): là chiều rộng của cả tiện ích

* Width (thứ hai): là chiều rộng của top-news

* Width (thứ ba): là chiều rộng của bottom-news  

* Background: màu nền của top-news

* Imgicon: icon trước tiêu đề bài viết ở cột bên phải 

* Topwidth: chiều ngang của ảnh ở top-news

* Topheight: Chiều cao của ảnh ở top-news

* Botheight: Chiều cao của ảnh ở bottom-news

* Botwidth: Chiều ngang của ảnh ở bottom-news

* cmcolor: màu của chữ

* Summary Post: số lượng từ của dòng mô tả bài viết mới nhất

* Summary Fontsize: Kích thước chữ của dòng mô tả bài viết mới nhất.

* Botnum: Số lượng ảnh và tiêu đề các bài viết ở bottom-news

* Numpost: Số lượng các bài viết hiển thị ở tiện ích (bao gồm các bài viết ở top-news, bottom-news và các bài viết ở cột bên phải)

* Label: tên nhãn (nếu sử dụng cho cả blog thì ô này bỏ trống, còn nếu sử dụng cho một nhãn thì bạn phải viết chính xác tên nhãn và tên nhãn này phải nằm trong dấu ngoặc kép nếu không thì tiện ích này sẽ bị lỗi và không hiển thị...).

* Home Page: Địa chỉ blog của bạn.

Cuối cùng bấm Lưu và trở về blog xem kết quả nha.

Mở rộng thêm:

Code trên tôi đang áp dụng cho toàn blog, vì vậy nếu muốn hiển thị cho một nhãn nào đó các bạn phải ghi chính xác tên nhãn ở dòng lệnh Label và thay thế dòng lệnh màu vàng bằng dòng lệnh này:

https://dl.dropbox.com/u/66348944/only.txt    

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

  

 

TẠO HIỆU ỨNG CHO LINK LIÊN KẾT (Phần 2)

Ngày Thứ Năm, 30 tháng 8, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết TẠO HIỆU ỨNG CHO LINK LIÊN KẾT (Phần 2)
Chúc bạn xem tin tức vui vẻ !!

Trước đây, tôi có chia sẻ với các bạn cách tạo hiệu ứng link liên kết (xem TẠI ĐÂY). 

Hôm nay, dunghennessy tiếp tục chia sẻ với các bạn cách tạo hiệu ứng cho link liên kết (phần 2). Với phần 2 này, khi các bạn rê chuột vào mỗi link liên kết thì sẽ có các chữ hoặc các symbol toả ra khá đẹp và ngộ nghĩnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hơn hiệu ứng này.

Xem thử

Để làm được điều này, các bạn đăng nhập vào blog > Chọn thiết kế (nếu sử dụng giao diện mới thì các bạn chọn thẻ Bố cục), sau đó thêm tiện ích HTML/Javacript (nếu các bạn chưa biết thì xem cách thêm tiện ích HTML TẠI ĐÂY).

Sau đó dán toàn bộ các code dưới vào.

<script>

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION STARTS HERE
///////////////////////////////////////////////////////////////////////////
      
// Đặt số lượng chữ hiển thị theo ý thích của bạn 
var sparklenumber=20

// Đặt lại font chữ theo ý thích của bạn
var sparklefont=new Array("Arial","Times","Comic Sans MS")

// Đặt lại kích thước chữ theo ý thích của bạn
var sparklesize=new Array(5,10,15,20)

// Đặt lại mã màu theo ý thích
var sparklecolor=new Array("#FF0000","#0000FF","#00FF00","#000000")

// Đặt lại tốc độ theo ý thích của bạn (số càng lớn tốc độ càng chậm)
var speed=20

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var sparklesizeNS4=new Array()
var x_sparklepos
var y_sparklepos
var x,y
var x_random=new Array()
var y_random=new Array()
var max_explsteps=80
var i_explsteps=0
var i_color=0
var i_size=0
var i_font=0
var marginbottom
var marginright
var sparklewidth=20
var sparkleheight=20
var isloaded=false

var browserinfos=navigator.userAgent
var ie4=document.all&&!document.getElementById&&!browserinfos.match(/Opera/)
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=!document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)
var browserok=ie4||ie5||ns4||ns6||opera

function initlinkexploder() {
    isloaded=true
}

function startexplosion(whatword) {
    if (isloaded) {
        i_explsteps=0
        x_sparklepos=x
        y_sparklepos=y
        for (i=0;i<=sparklenumber;i++) {
            x_random[i]=Math.ceil(20*Math.random())-10
            y_random[i]=Math.ceil(20*Math.random())-10
            while(x_random[i]>-2 && x_random[i]<2) {
                x_random[i]=Math.ceil(20*Math.random())-10
                y_random[i]=Math.ceil(20*Math.random())-10
            }
        }
        if (ie5||opera) {
            marginbottom=document.body.clientHeight
            marginright=document.body.clientWidth
        }
        if (ns6) {
            marginbottom=window.innerHeight
            marginright=window.innerWidth
        }
        for (i=0;i<=sparklenumber;i++) {
             var thisspan=document.getElementById("span"+i).style
            thisspan.visibility="VISIBLE"
            thisspan.left=x_sparklepos+"px"
            thisspan.top=y_sparklepos+"px"
            var thisspan=document.getElementById("span"+i)
            thisspan.innerHTML=whatword
            sparklewidth=parseInt(thisspan.offsetWidth)
            sparkleheight=parseInt(thisspan.offsetHeight)
        }
    explode()
    }
}


function explode() {
    if (i_explsteps<=max_explsteps) {
        for (i=0;i<=sparklenumber;i++) {  
            var thisspan=document.getElementById("span"+i).style
            if (parseInt(thisspan.left)>=marginright-sparklewidth-30+document.body.scrollLeft || parseInt(thisspan.top)>=marginbottom-sparkleheight-20+document.body.scrollTop) {
                   thisspan.left=-1000+"px"
                thisspan.top=-1000+"px"          
            }
            else {
                thisspan.visibility="VISIBLE"
                thisspan.left=parseInt(thisspan.left)+x_random[i]+"px"
                thisspan.top=parseInt(thisspan.top)+y_random[i]+"px"
            }  
        }
        i_explsteps++
        var timer=setTimeout("explode()",speed)
    }
    else {
        for (i=0;i<=sparklenumber;i++) {
            var thisspan=document.getElementById("span"+i).style
            thisspan.visibility="hidden"
        }
        clearTimeout(timer)
    }
}

function handlerMM(e){
    x = (ns4||ns6) ? e.pageX : document.body.scrollLeft+event.clientX
    y = (ns4||ns6) ? e.pageY : document.body.scrollTop+event.clientY
}


document.onmousemove=handlerMM;

document.write("<style>")
document.write(".spanstyle {")
document.write("position:absolute;")
document.write("visibility:hidden;")
document.write("}")
document.write("</style>")

for (i=0;i<=sparklenumber;i++) {
       document.write("<div id='span"+i+"' class='spanstyle' style='font-family:"+sparklefont[i_font]+";font-size:"+sparklesize[i_size]+"pt;color:"+sparklecolor[i_color]+";'>")
    document.write(".")
    document.write("</div>")
    i_color++;i_font++;i_size++;
    if (i_color>=sparklecolor.length) {i_color=0}
    if (i_font>=sparklefont.length) {i_font=0}
    if (i_size>=sparklesize.length) {i_size=0}
}
if (browserok) {
    window.onload=initlinkexploder
}
</script>

Bạn thay đổi các mã màu, font chữ, tốc độ...theo ý thích của mình (có ghi chú trên code) và bấm Lưu lại.

Bây giờ, bạn muốn link liên kết nào có hiệu ứng thì copy đoạn code này dán vào nơi bạn muốn link liên kết hiển thị (code HTML).

 <a href="Địa chỉ link liên kết" onMouseOver="startexplosion('Welcome')">Tên link liên kết</a>

Bạn thay đổi chữ Welcome thành chữ khác hoặc symblol theo ý của bạn rồi bấm Lưu và trở lại blog xem kết quả nha.

CHỮ TỰ ĐỘNG THAY ĐỔI TRÊN THANH TIÊU ĐỀ

Ngày Thứ Hai, 6 tháng 8, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết CHỮ TỰ ĐỘNG THAY ĐỔI TRÊN THANH TIÊU ĐỀ
Chúc bạn xem tin tức vui vẻ !!

Trước đây, dunghennessy có chia sẻ với các bạn code làm các chữ chạy trên thanh tiêu đề (xem TẠI ĐÂY), hôm nay tôi xin chia sẻ với các bạn code làm các dòng chữ tự động thay đổi trên thanh tiêu đề theo thời gian định trước.

Mời bạn bấm vào "xem thử" phía dưới để thấy rõ hơn hiệu ứng này.

Xem thử

Rất đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML (nếu bạn nào chưa biết cách thêm tiện ích HTML thì mời xem BÀI NÀY) rồi dán đoạn code phía dưới vào.

<script language='javascript'>

step=0

function flash_title(){

step++

if (step==8) {step=1}

if (step==1) {document.title='Welcome to my blog!!!'}

if (step==2) {document.title='dunghennessy.blogspot.com'}

if (step==3) {document.title='Thủ thuật cho Blogspot'}

if (step==4) {document.title='Kết nối bạn bè'}

if (step==5) {document.title='Sẻ chia kinh nghiệm'}

if (step==6) {document.title='Gặt hái thành công'}

if (step==7) {document.title='Good luck!!!'}

setTimeout("flash_title()",1000);}

flash_title()

</script>

Bây giờ, các bạn thay đổi các dòng chữ theo ý thích của mình và đặt lại thời gian để chữ thay đổi ở mục setTimeout (số càng lớn chữ chạy càng chậm).

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

TẠO SLIDESHOW (Kiểu 5)

Ngày Thứ Bảy, 14 tháng 7, 2012 Blog của Báo Mới Hà Nội chia sẻ với bạn đọc bài viết TẠO SLIDESHOW (Kiểu 5)
Chúc bạn xem tin tức vui vẻ !!

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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIMDPo1PP35Hn_ncxMd21hXFvOmxWcbn7HH95DNy2kWjXus2Hjaq0Tvq9crF4lpu6MsBtkl68v6ZNGfqH8d07p42EgsBfPrQFhLLBGb5uVk2ZuuUE71KVzRqmLsblkdynR5dg1kSo9ahU/s1600/0003.gif"

imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoXieTHPb3ZQZjc7b8tiMnUWMglNdzXF-poG8iVqAPZDvR_lvUK-ZGbn0YMdGqYU2ZE0H-Gpy6Dzkm_gmZV9cXTm0Wxt7vd3XgGHc9WIi2ApQB_4bBDn-HGI5PbnI-7S6fii583GhGMlg/s1600/0008.gif"

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

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVpNf_W35xw4vIgLl3y-nafYY156MLSMWOYhM59EwN4Lc9rp7EF_Vi05hCbnN3XYpYw_0Fs7NcaNTwuScv50OyZn-_zR2mutQ9bp4Svtl3ki9inihBc9Z5FcluQl0hn2TQcV1ZRZ9F7fh/s1600/0019.gif"

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

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

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

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQTQB5vIjunpZ9JkRuT_ZfcrwsgPvWQEiCVViLzxLvro1m375saRbxvB5GMBU6NL4nNCHqd6f8ze3AgPgjOnifvQSW3nQh87WuNnYSV4zTEkGMcKOBmR9pewFqKj0L-boiQo5dJHLvb-A/s1600/0059.gif"

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

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVKzDUQIA2WFmJgRfbcDkTW5m0drUb72NIi44WiKyddbhEbHWKYEOHV9WzRuRwqMKo7_RGRyDxp5K_vgF48HCermjPSRTzTpAxQJkxmdMZvXZdFRY98cg9QSu26kWjJ_mbUwx3IDHhafg/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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIMDPo1PP35Hn_ncxMd21hXFvOmxWcbn7HH95DNy2kWjXus2Hjaq0Tvq9crF4lpu6MsBtkl68v6ZNGfqH8d07p42EgsBfPrQFhLLBGb5uVk2ZuuUE71KVzRqmLsblkdynR5dg1kSo9ahU/s1600/0003.gif"

imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoXieTHPb3ZQZjc7b8tiMnUWMglNdzXF-poG8iVqAPZDvR_lvUK-ZGbn0YMdGqYU2ZE0H-Gpy6Dzkm_gmZV9cXTm0Wxt7vd3XgGHc9WIi2ApQB_4bBDn-HGI5PbnI-7S6fii583GhGMlg/s1600/0008.gif"

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

imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVpNf_W35xw4vIgLl3y-nafYY156MLSMWOYhM59EwN4Lc9rp7EF_Vi05hCbnN3XYpYw_0Fs7NcaNTwuScv50OyZn-_zR2mutQ9bp4Svtl3ki9inihBc9Z5FcluQl0hn2TQcV1ZRZ9F7fh/s1600/0019.gif"

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

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

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

imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQTQB5vIjunpZ9JkRuT_ZfcrwsgPvWQEiCVViLzxLvro1m375saRbxvB5GMBU6NL4nNCHqd6f8ze3AgPgjOnifvQSW3nQh87WuNnYSV4zTEkGMcKOBmR9pewFqKj0L-boiQo5dJHLvb-A/s1600/0059.gif"

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

imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVKzDUQIA2WFmJgRfbcDkTW5m0drUb72NIi44WiKyddbhEbHWKYEOHV9WzRuRwqMKo7_RGRyDxp5K_vgF48HCermjPSRTzTpAxQJkxmdMZvXZdFRY98cg9QSu26kWjJ_mbUwx3IDHhafg/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!!!