Tuesday, August 7, 2012

TẠO BANNER CHO BẠN (Phần 2)

Để trang trí cho Web/Blog thêm đẹp hơn, thêm sinh động hơn thì banner là thành phần không thể thiếu cho Web/Blog, tuỳ theo sở thích, nhu cầu của mỗi người mà banner có thể là một ảnh tĩnh hay một ảnh động hoặc cầu kỳ hơn là một file Flash...
Tiếp theo phần 1 (xem TẠI ĐÂY), ở phần 2 này các banner được dunghennessy cắt, ghép, nối từ những file flash khác, thêm hiệu ứng chữ, hiệu ứng nền... để tạo thành một file flash hoàn chỉnh.
Mời các bạn xem thử vài mẫu phía dưới. (do có nhiều file flash có kích thước lớn nên tốc độ load trang hơi bị chậm... ngoài ra các bạn có thể bấm xem các file flash ở chế độ toàn màn hình tương ứng phía dưới)
* Mẫu 1:
- Kích thước: 960x150
- Màu nền: Xanh lá
- Màu chữ: Cam
- Hiệu ứng chữ: Blur in
- Font chữ: Arial
- Đồng hồ: không có


* Mẫu 2:
- Kích thước: 960x150
- Màu nền: Nâu đỏ
- Màu chữ: Vàng
- Hiệu ứng chữ: Heart Beat Text
- Font chữ:VNI-Centur
- Đồng hồ: Số 4


* Mẫu 3:
- Kích thước: 960x150
- Màu nền: Xanh dương
- Màu chữ: Trắng
- Hiệu ứng chữ: Rotate Anti-Clockwise
- Font chữ:VNI-Commerce
- Đồng hồ: Không có


* Mẫu 4:
- Kích thước: 960x150
- Màu nền: Đen
- Màu chữ: Vàng
- Hiệu ứng chữ: Two Parts - Zoom out
- Font chữ: VNI-Duff
- Đồng hồ: Số 16




* Mẫu 5:
- Kích thước: 960x150
- Màu nền: Đỏ
- Màu chữ: Trắng
- Hiệu ứng chữ: Type Writer
- Font chữ: VNI-Maria
- Đồng hồ: Số 1


* Mẫu 6:
- Kích thước: 960x150
- Màu nền: Tím
- Màu chữ: Trắng
- Hiệu ứng chữ: Type Writer
- Font chữ: VNI-OngDo
- Đồng hồ: Số 89


* Mẫu 7:
- Kích thước: 960x200
- Màu nền: Không có
- Màu chữ: Đỏ
- Hiệu ứng chữ: Zoom and Rotate
- Font chữ: VNI-Truck
- Đồng hồ: Không có


* Mẫu 8:
- Kích thước: 960x200
- Màu nền: Không có
- Màu chữ: Cam
- Hiệu ứng chữ: Zoom in - X
- Font chữ: VNI-Univer
- Đồng hồ: Số 105


* Mẫu 9:
- Kích thước: 960x200
- Màu nền: Không có
- Màu chữ: Tím
- Hiệu ứng chữ: Zoom out - X
- Font chữ: VNI-Win Sample Font
- Đồng hồ: Số 46


* Mẫu 10:
- Kích thước: 960x200
- Màu nền: Đen
- Màu chữ: Trắng
- Hiệu ứng chữ: Star
- Font chữ: VNI-Univer
- Đồng hồ: Số 77

Và để tạo niềm vui nho nhỏ cho các bạn khi ghé thăm, dunghennessy sẽ tạo banner cho các bạn theo các mẫu như trên. Nếu các bạn có quan tâm vui lòng ghi rõ yêu cầu của mình vào khung comments phía dưới theo mẫu sau:
* Mẫu: ......
* Kích thước: .....
* Màu nền: .....
* Màu chữ: .....
* Dòng chữ 1: .....
* Dòng chữ 2: .....
* Hiệu ứng chữ: .....
* Font chữ: .....
* Đồng hồ: .....
* Địa chỉ mail: ...... (để tôi gởi file flash cho các bạn)

Ví dụ:
* Mẫu: 1
* Kích thước: 650x200
* Màu nền: Đen
* Màu chữ: Trắng
* Dòng chữ 1: Welcome to my Blog
* Dòng chữ 2: dunghennessy.blogspot.com
* Dòng chữ 3: Hân hạnh phục vụ các bạn
* Hiệu ứng chữ: Two Parts - Zoom out
* Font chữ: VNI-OngDo
* Đồng hồ: Số 77 (nằm bên phải).
Với yêu cầu trên, các bạn sẽ có một banner giống như vầy:



Chúc các bạn vui!!!



Sunday, August 5, 2012

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

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.



Thursday, August 2, 2012

ĐÓNG KHUNG CHO FLASH (Kiểu 3)

Flash là một thành phần không thể thiếu trên một Web/Blog, các file Flash này sẽ làm cho Web/Blog của bạn thêm sinh động hơn.
Tương tự với kiểu 1 (Xem TẠI ĐÂY) kiểu 2 (Xem TẠI ĐÂY). Với thủ thuật dưới đây, các bạn sẽ làm file Flash trông đẹp hơn nhờ vào việc đóng khung cho nó.
Bạn xem thử vài mẫu phía dưới nha:










Rất đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<iframe name="cwindow" style="border:15px groove green" width=500 height=300 src="dán địa chỉ  file flash vào đây"></iframe>

Bây giờ, bạn chỉ việc thay đường link file Flash vào và thay đổi chiều rộng (Width), chiều cao (Height), bạn có thể đổi màu cho khung như: green, blue, red, orange, white, black, yellow...theo ý thích của mình. Cuối cùng bấm Lưu lại là xong.
Bạn cũng có thể áp dụng thủ thuật này để đóng khung cho ảnh cũng được, bạn xem mẫu phía dưới:












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



Wednesday, August 1, 2012

TẠO BẢNG HIỆU HỘP ĐÈN

Có nhiều cách để các bạn có thể "quảng bá" thương hiệu Web/Blog của mình: gắn liên kết, gắn banner...
Hôm nay mình xin chia sẻ cho các bạn cách gắn tên Web/Blog của mình vào một file Flash khá đẹp mắt. Bạn có thể dùng để trang trí blog mình thêm đẹp
Ở file flash này, tên Web/Blog của bạn sẽ hiển thị trên một bảng nhỏ và chạy theo kiểu hộp đèn kèm theo những tiếng reo hò cổ vũ cùng với tiếng nổ "đì đùng" của những ngôi sao nhỏ được bắn theo kiểu pháo bông khá đẹp...
Mời bạn xem thử bảng hiệu của dunghennessy phía dưới nha.



Đẹp không bạn???
Bạn chỉ cần đăng nhập vào blog > chọn Bố cục > thêm tiện ích HTML rồi dán code phía dưới vào.

<embed src="http://www.notcelebrity.co.uk/flashcontent/flashHeader.swf?thename=dunghennessy" type="application/x-shockwave-flash" wmode="transparent" width="680" height="350"></embed>

Bây giờ, bạn thay đổi các dòng lệnh màu đỏ để phù hợp với Web/Blog của mình, trong đó Width là chiều rộng, height là chiều cao, thay chữ dunghennessy bằng tên Web/Blog của bạn. Cuối cùng bấm Lưu và trở lại Blog xem kết quả nha...

code trên file flash có âm thanh khá lớn, vì vậy nếu muốn âm thanh nhỏ hơn, bạn copy đoạn code này thay cho code trên.


<embed src="http://www.notcelebrity.co.uk/flashcontent/flashHeader.swf?thename=dunghennessy&mute=1&skipIntro=1" type="application/x-shockwave-flash" wmode="transparent" width="680" height="350"></embed>  
Chúc các bạn vui.




Tuesday, July 24, 2012

BẢNG THÔNG BÁO (Kiểu 9)

Với bảng thông báo kiểu 9 này, các thông điệp mà bạn muốn gởi đến bạn bè, khách tham quan sẽ được nằm trên một nền màu, nền màu này sẽ tự động lần lượt thay đổi màu theo thời gian do bạn định trước.
Mời bạn bấm vào Xem thử phía dưới để trải nghiệm bảng thông báo  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>
a.textcontentstyle{
    /* Set the font-style of the text */
    /* ATTENTION: background-color must be set within the script below */
    font-family:Arial;
    font-size:13pt; /* Kích thước của chữ */
    color:#151B8D;
    padding:5px;
    text-decoration:none;
    font-weight:bold;
    color:#ffffff; /* Màu chữ */
}

.textalignstyle{
    /* Set the alignement of the text */
    text-align:center;     /* Set the horizontal text-alignement (center or left or right) */
    vertical-align:middle;     /* Set the vertical text-alignement (middle or top or bottom) */
}

.textboxstyle{
    /* Set the attributes for the text-box */
    /* ATTENTION: width and height must be set within the script below */
    border-style:solid;
    border-width:1px;
    border-color:white;

    /* 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;
}
</style>
<!-- END OF STYLE CONFIGURATION -->

<script>




var message= [

///////////////////////////////////////////////////////////////////////
// START OF CONFIGURATION ZONE
///////////////////////////////////////////////////////////////////////

// Set your messages and the corresponding links below
// Add as many messages and links as you like
{
text : "Nhập nội dung vào đây",
linkto : "http://dunghennessy.blogspot.com" /* Link liên kết */
}, // commra required

{
text : "Nhập nội dung vào đây",
linkto : "#"
}, // comma required

{
text : "Nhập nội dung vào đây",
linkto : "#"
}, // comma required

{
text : "Nhập nội dung vào đây",
linkto : "#"
}
]

// Set the width of the textbox (pixels)
var textboxwidth=675 /* Chiều rộng của bảng thông báo */

//Set the height of the textbox (pixels)
var textboxheight=50 /* Chiều cao của bảng thông báo */

// Select the background-colors below
// IMPORTANT 1: The script requires three colors at least
// IMPORTANT 2: The last two colors must be the same as the font-color
// IMPORTANT 3: The script requires hexadecimal-values! For instance: enter "#00FF00" instead of "Blue"
var colors=new Array("#E45E9D","#2554C7","#FF0000","#52D017","#347C2C") /* Các mã màu của nền, bạn có thể thay đổi tuỳ thích */

// Set pause between colors (seconds)
var pausebetweencolors=1 /* Thời gian tạm ngưng giữa 2 màu */

// Set speed (higher=slower)
var speed=30 /* Tốc độ chuyển màu */

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

// do not edit code below this line
var i_loopmax=1000
var pausesteps=30
var gradient_effect="horizontal"
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
var redcol_1
var redcol_2
var redcol_1_b
var redcol_2_b
var greencol_1
var greencol_2
var greencol_1_b
var greencol_2_b
var bluecol_1
var bluecol_2
var bluecol_1_b
var bluecol_2_b

var rgbredfrom
var rgbgreenfrom
var rgbbluefrom
var rgbredto
var rgbgreento
var rgbblueto
var rgbrednow
var rgbgreennow
var rgbbluenow

var rgbredfrom_b
var rgbgreenfrom_b
var rgbbluefrom_b
var rgbredto_b
var rgbgreento_b
var rgbblueto_b
var rgbrednow_b
var rgbgreennow_b
var rgbbluenow_b

var colorhexafrom
var colorhexato

var i_step=1
var i_loop=0
var i_colorsA=0
var i_colorsB=1
var i_colorsC=1
var i_colorsD=2

var i_message=0

pausebetweencolors*=1000

var browserinfos=navigator.userAgent.toLowerCase();
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/opera/)
var opera=browserinfos.indexOf("opera")!=-1
var chrome=browserinfos.indexOf("chrome")!=-1
var ff36=browserinfos.indexOf("firefox/3.6") !=-1 || browserinfos.indexOf("firefox/.3.6") !=-1 || browserinfos.indexOf("firefox/0.3.6") || browserinfos.indexOf("firefox/3.7") !=-1 || browserinfos.indexOf("firefox/.3.7") !=-1 || browserinfos.indexOf("firefox/0.3.7") || browserinfos.indexOf("firefox/3.8") !=-1 || browserinfos.indexOf("firefox/.3.8") !=-1 || browserinfos.indexOf("firefox/0.3.8") || browserinfos.indexOf("firefox/3.9") !=-1 || browserinfos.indexOf("firefox/.3.9") !=-1 || browserinfos.indexOf("firefox/0.3.9") || browserinfos.indexOf("firefox/4") !=-1 || browserinfos.indexOf("firefox/.4") !=-1 || browserinfos.indexOf("firefox/0.4") !=-1;

var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/opera/)

var browserok=ie4||ie5||ns4||ns6||opera||ff36||chrome

function translateintorgb() {

    var hexa=colors[i_colorsA]
    var hexared=hexa.substring(1,3)
    var hexagreen=hexa.substring(3,5)
    var hexablue=hexa.substring(5,7)
    rgbredfrom=parseInt("0x"+hexared)
    rgbgreenfrom=parseInt("0x"+hexagreen)
    rgbbluefrom=parseInt("0x"+hexablue)
    rgbrednow=rgbredfrom
    rgbgreennow=rgbgreenfrom
    rgbbluenow=rgbbluefrom
  
    var hexa=colors[i_colorsB]
    var hexared=hexa.substring(1,3)
    var hexagreen=hexa.substring(3,5)
    var hexablue=hexa.substring(5,7)
    rgbredto=parseInt("0x"+hexared)
    rgbgreento=parseInt("0x"+hexagreen)
    rgbblueto=parseInt("0x"+hexablue)
  
    var hexa=colors[i_colorsC]
    var hexared=hexa.substring(1,3)
    var hexagreen=hexa.substring(3,5)
    var hexablue=hexa.substring(5,7)
    rgbredfrom_b=parseInt("0x"+hexared)
    rgbgreenfrom_b=parseInt("0x"+hexagreen)
    rgbbluefrom_b=parseInt("0x"+hexablue)
    rgbrednow_b=rgbredfrom_b
    rgbgreennow_b=rgbgreenfrom_b
    rgbbluenow_b=rgbbluefrom_b
  
    var hexa=colors[i_colorsD]
    var hexared=hexa.substring(1,3)
    var hexagreen=hexa.substring(3,5)
    var hexablue=hexa.substring(5,7)
    rgbredto_b=parseInt("0x"+hexared)
    rgbgreento_b=parseInt("0x"+hexagreen)
    rgbblueto_b=parseInt("0x"+hexablue)
    i_colorsA++
    i_colorsB++
    i_colorsC++
    i_colorsD++
    if (i_colorsA>=colors.length) {i_colorsA=0}
    if (i_colorsB>=colors.length) {i_colorsB=0}
    if (i_colorsC>=colors.length) {
    i_colorsC=0;
    i_message++;
    if (i_message >= message.length) {
    i_message=0;
    }
    document.getElementById("textalign").innerHTML="<a href='"+message[i_message].linkto+"' id='textcontent' class='textcontentstyle'>"+message[i_message].text+"</a>"
    }
    if (i_colorsD>=colors.length) {i_colorsD=0}
    changefromto()
}

function changefromto() {
    rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed)
    rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed)
    rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed)
  
    rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed)
    rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed)
    rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed)
  
    if (rgbrednow>255) {rgbrednow=255}
    if (rgbrednow<0) {rgbrednow=0}
    if (rgbgreennow>255) {rgbgreennow=255}
    if (rgbgreennow<0) {rgbgreennow=0}
    if (rgbbluenow>255) {rgbbluenow=255}
    if (rgbbluenow<0) {rgbbluenow=0}
  
    if (rgbrednow_b>255) {rgbrednow_b=255}
    if (rgbrednow_b<0) {rgbrednow_b=0}
    if (rgbgreennow_b>255) {rgbgreennow_b=255}
    if (rgbgreennow_b<0) {rgbgreennow_b=0}
    if (rgbbluenow_b>255) {rgbbluenow_b=255}
    if (rgbbluenow_b<0) {rgbbluenow_b=0}
  
    if (i_step<=speed) {
          redcol_1 = hexc[Math.floor(rgbrednow/16)];
         redcol_2 = hexc[Math.floor(rgbrednow)%16];
         greencol_1 = hexc[Math.floor(rgbgreennow/16)];
          greencol_2 = hexc[Math.floor(rgbgreennow)%16];
          bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
          bluecol_2 = hexc[Math.floor(rgbbluenow)%16];
      
        redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
         redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
         greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
          greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
          bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
          bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
          var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
        var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
        if (ie5 && gradient_effect!="none") {
            if (gradient_effect=="horizontal") {var gr_effect=1}
            if (gradient_effect=="vertical") {var gr_effect=0}
              document.getElementById("textbox").style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"
        }
        else if ((ff36==1  || chrome==1)&& gradient_effect!="none") {
              document.getElementById("textbox").style.background="-moz-linear-gradient(left, "+backcolor+","+backcolor_b+")"
            document.getElementById("textbox").style.background="-webkit-gradient(linear, left center, right center, from("+backcolor+"),to("+backcolor_b+"))"
        }
        else {
            document.getElementById("textbox").style.background=backcolor
        }
        i_step++
        var timer=setTimeout("changefromto()",pausesteps);
  
    }
      else {
          clearTimeout(timer)
        i_step=1
        i_loop++
        if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}
      }
}

document.write("<div id='textbox' class='textboxstyle' style='position:relative;width:"+textboxwidth+"px;height:"+textboxheight+"px;'>")
document.write("<div style='position:absolute;left:0px;top:0px;width:"+textboxwidth+"px;height:"+textboxheight+"px;'><table width="+textboxwidth+" height="+textboxheight+"><tr><td id='textalign' class='textalignstyle'><a href='"+message[0].linkto+"' id='textcontent' class='textcontentstyle'>"+message[0].text+"</a> </td></tr></table></div>")
document.write("</div>")

if (browserok) {
    window.onload=translateintorgb
}
</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.




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




Friday, July 13, 2012

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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-NSzoJCga4ixduDxSxtKh1cm2vKwsUQvzSdCC61D5kMqacqVnv1FiqAgj6n7yhT_4lUo4hEj9qzZ90AmYMvQdeoefKLfwF-K2Ygor45Hgd7txCure7PtaSnloo9ua5gt9mxFxcmXLJ-R/s1600/0003.gif"
imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zuV8mNQIr37T7JiEMtZMaAEXs1bS8X6tXzhnco8bYzSlUyLtp_Y0QKRsWrWNAT1OiANGw8P5KhXai3RultLCYwkRNRt4-O7Aqbq4ngmT82b55YxQXmJC9a0RlgLQffuEF-WI-r6vboUU/s1600/0008.gif"
imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVCrBRvMkPfJTQhkGUeWnGIyOrERwPGPTSwk2SvAYHLbXFyRa-oIunVVyYUEx3ngeZ3WeT7VIYshaH77-nCsE9CVaDV2h3zPYbOSFlHoAU137UHRfKqKlBepFiyD755bb7c6IPBouEWjs/s1600/0009.gif"
imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zBEol8gYGoGij0JNG9puMAnFkF6eYOCy3Bq2l64RCI0ZB_LpJ4Rx5Gif31zT3jIv6RAPw2DvrisZyi3kzZFItKItMBswcvm4eQlxBQK-_xY6sH3qKl0Gv4LUNm1HNVniArWfBxfZXsqw/s1600/0019.gif"
imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMh0oPiNZrRj2Q0306XYq0uJuHDq8XMFAPYjDB7eOWYhQCmMDqE5mdT8S_8n-LzyH8CWgXf-4k68yrvBc3PXwJFl77okhihEkBYN0lS06AZtFYr7S-YKBhdAXBwW-uqP3AKrPvU8imaU1n/s1600/0027.gif"
imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhar8e7XVlZWfRdrlpJ38l4ppHGIN8VUsUZJKTkDq3pYCCMVRZbI7pg-K8ucqVISGjb8aLOQxBmVIWtR0scqXf7kSFao0BoJ8IRNRruUHtOtqpEF9gEI4vtjsdEd4Z2UTvSpqauX5bnNWrz/s1600/0048.gif"
imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJ1r6M0QT0X_DUqtjHrlzI3NVSoQVjlQmRItdmgLpjVlY9bHbhIPSeo5y885f23DAm5ot5KhBpibQ1BUL8lhJwI_rMkSNjrtSiZD4MGR5iYbP6bWBsLH8xAWGMijZBKfrzInPe5cKHNnq/s1600/0050.gif"
imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRhHZm7Ztl0ocUlQDfkpfBNmUbO3PWI3h2HZUzak96bkt_Vr83F_306I3PDmB11rZPrB1_eCHU67hsDiS54Hc-W757_yPtUTV2dYRSNWCdlPj6hji-OKAtG_Zlonc_cGgQgkXfVgN6DWkG/s1600/0059.gif"
imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGe_9T20MjOoxGWB4rjlvW-N_cenNdCl7y6B5Gr8Qt-NUKesyYauxOSdbEk1oK_UU0vo-5kmq0WRMkuXiESDaJUONID7s_Gl1-McIrQOycMO66ULM3DfF2mAaOvZY438Vk5Suhl4mndAE/s1600/0062.gif"
imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvuyNK51LJlwHHvTnJXPUS24k5tuK0A3pTHFa2U9dGKRXxJH0diJQEAUefO5sn8RYfKw6S2L91C4a8fYXSELnso0hTfIhPWvwhnHcsiHB1ZBzzVAhBrGw0xutWSjLODjtngL6mkiYU_TCh/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/AVvXsEgO-NSzoJCga4ixduDxSxtKh1cm2vKwsUQvzSdCC61D5kMqacqVnv1FiqAgj6n7yhT_4lUo4hEj9qzZ90AmYMvQdeoefKLfwF-K2Ygor45Hgd7txCure7PtaSnloo9ua5gt9mxFxcmXLJ-R/s1600/0003.gif"
imgurl[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zuV8mNQIr37T7JiEMtZMaAEXs1bS8X6tXzhnco8bYzSlUyLtp_Y0QKRsWrWNAT1OiANGw8P5KhXai3RultLCYwkRNRt4-O7Aqbq4ngmT82b55YxQXmJC9a0RlgLQffuEF-WI-r6vboUU/s1600/0008.gif"
imgurl[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVCrBRvMkPfJTQhkGUeWnGIyOrERwPGPTSwk2SvAYHLbXFyRa-oIunVVyYUEx3ngeZ3WeT7VIYshaH77-nCsE9CVaDV2h3zPYbOSFlHoAU137UHRfKqKlBepFiyD755bb7c6IPBouEWjs/s1600/0009.gif"
imgurl[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5zBEol8gYGoGij0JNG9puMAnFkF6eYOCy3Bq2l64RCI0ZB_LpJ4Rx5Gif31zT3jIv6RAPw2DvrisZyi3kzZFItKItMBswcvm4eQlxBQK-_xY6sH3qKl0Gv4LUNm1HNVniArWfBxfZXsqw/s1600/0019.gif"
imgurl[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMh0oPiNZrRj2Q0306XYq0uJuHDq8XMFAPYjDB7eOWYhQCmMDqE5mdT8S_8n-LzyH8CWgXf-4k68yrvBc3PXwJFl77okhihEkBYN0lS06AZtFYr7S-YKBhdAXBwW-uqP3AKrPvU8imaU1n/s1600/0027.gif"
imgurl[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhar8e7XVlZWfRdrlpJ38l4ppHGIN8VUsUZJKTkDq3pYCCMVRZbI7pg-K8ucqVISGjb8aLOQxBmVIWtR0scqXf7kSFao0BoJ8IRNRruUHtOtqpEF9gEI4vtjsdEd4Z2UTvSpqauX5bnNWrz/s1600/0048.gif"
imgurl[6]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrJ1r6M0QT0X_DUqtjHrlzI3NVSoQVjlQmRItdmgLpjVlY9bHbhIPSeo5y885f23DAm5ot5KhBpibQ1BUL8lhJwI_rMkSNjrtSiZD4MGR5iYbP6bWBsLH8xAWGMijZBKfrzInPe5cKHNnq/s1600/0050.gif"
imgurl[7]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRhHZm7Ztl0ocUlQDfkpfBNmUbO3PWI3h2HZUzak96bkt_Vr83F_306I3PDmB11rZPrB1_eCHU67hsDiS54Hc-W757_yPtUTV2dYRSNWCdlPj6hji-OKAtG_Zlonc_cGgQgkXfVgN6DWkG/s1600/0059.gif"
imgurl[8]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGe_9T20MjOoxGWB4rjlvW-N_cenNdCl7y6B5Gr8Qt-NUKesyYauxOSdbEk1oK_UU0vo-5kmq0WRMkuXiESDaJUONID7s_Gl1-McIrQOycMO66ULM3DfF2mAaOvZY438Vk5Suhl4mndAE/s1600/0062.gif"
imgurl[9]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvuyNK51LJlwHHvTnJXPUS24k5tuK0A3pTHFa2U9dGKRXxJH0diJQEAUefO5sn8RYfKw6S2L91C4a8fYXSELnso0hTfIhPWvwhnHcsiHB1ZBzzVAhBrGw0xutWSjLODjtngL6mkiYU_TCh/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!!! 




Wednesday, July 11, 2012

MENU NGANG TRƯỢT THEO BLOG

Menu ngang này thuộc loại đơn giản (không có xổ xuống) nhưng menu này đặc biệt ở chỗ là lúc nào cũng nằm trên đầu trang blog. Khi bạn kéo thanh trượt xuống phía dưới cùng của blog thì nó vẫn xuất hiện ở đầu blog sẳn sàng cho bạn sử dụng.
Mời bạn bấm vào Xem thử phía dưới để thấy rõ Menu ngang 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>

/* CSS for sample sticky content */

.mattblacktabs{
overflow: hidden;
width:590px; /*Chiều rộng của menu*/
background:#736AFF; /*Màu nền phía dưới menu*/
}

.mattblacktabs ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
}

.mattblacktabs li{
display: inline;
margin: 0;
}

.mattblacktabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #736AFF; /*Màu nền của mỗi tab*/
}

.mattblacktabs li a:visited{
color: white;
}

.mattblacktabs li a:hover, .mattblacktabs li.selected a{
background: red; /*Màu nền của tab khi rê chuột vào*/
}

/* Sample CSS class applied to sticky element */

.docked{
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow version*/
}

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="https://sites.google.com/site/dunghennessyjs/menungangtheoblog.js">

/***********************************************
* Mời bạn tham quan và ủng hộ dunghennessy:http://www.dunghennessy.blogspot.com
***********************************************/

</script>

<script>

//initialize sticky content:

jQuery(document).ready(function($){

  $('#samplemenu').stickyit({
        gap: 5,
        stickyclass: "docked"
    })

})

</script>


<div id="samplemenu" class="mattblacktabs">
<ul>
<li><a href="http://www.dunghennessy.blogspot.com/">Trang chủ</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/C%C6%A0%20B%E1%BA%A2N">Thủ thuật cơ bản</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/N%C3%82NG%20CAO">Thủ thuật nâng cao</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/TRANG%20TR%C3%8D%20BLOG">Trang trí blog</a></li>
<li><a href="http://dunghennessy.blogspot.com/search/label/Template">Themes cho blog</a></li>

</ul>
</div>

<div style="height:0px"></div>




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 bạn muốn có nhiều tab hơn nữa thì copy đoạn code này:

<li><a href="Link liên kết">Tên hiển thị</a></li>

 
Dán trên dòng thẻ đóng </ul> cuối cùng phía dưới, sau đó bấm Lưu lại là xong
Lưu ý: Bạn nên kéo tiện ích menu ngang này để xuống phía dưới banner hoặc trên khu vực bài đăng thì đẹp hơn




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