Trước đây mình đã giới thiệu cho các bạn cách thực hiện việc tạo dòng chữ trên thanh tiêu đề cho blog, hôm nay mình cũng xin chia sẽ thêm cách tạo hiệu ứng cho dòng chữ trên thanh tiêu đề của blogger. Thủ thuật này sẽ làm cho các dòng chữ thay đổi theo thời gian và có sử dụng một số hiệu ứng động cho các ký hiệu bắt mắt. Để sử dụng thủ thuật này bạn hãy tham khảo các bước thực hiện bên dưới.Live demo: Live Demo
☼ Thực hiện thủ thuật
1. Đăng nhập vào tài khoản blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Tìm đến thẻ <head> và thêm code bên dưới vào sau nó
<script type='text/javascript'>
//<![CDATA[
var message = new Array() // leave this as is
message[0] = "Blog Trần Phúc Minh";
message[1] = "Welcom";
var reps = 1
var speed = 100
var p=message.length;
var T="";
var C=0;
var mC=0;
var s=0;
var sT=null;
if(reps<1)reps=1;
function doTheThing(){
T=message[mC];
A();}
function A(){
s++
if(s>9){s=1}
if(s==1){document.title='(--((--(('+T+'))--))--)'}
if(s==2){document.title='--((--((-'+T+'-))--))--'}
if(s==3){document.title='-((--((--'+T+'--))--))-'}
if(s==4){document.title='((--((---'+T+'---))--))'}
if(s==5){document.title='(--((--(('+T+'))--))--)'}
if(s==6){document.title='--((--((-'+T+'-))--))--'}
if(s==7){document.title='-((--((--'+T+'--))--))-'}
if(s==8){document.title='((--((--['+T+']--))--))'}
if(s==9){document.title='(--((--(('+T+'))--))--)'}
if(C<(8*reps)){
sT=setTimeout("A()",speed);
C++
}else{
C=0;
s=0;
mC++
if(mC>p-1)mC=0;
sT=null;
doTheThing();}}
doTheThing();
//]]>
</script>
Chỉnh sửa code: bạn hãy thay dòng chữ xanh đậm trong code thành dòng chữ của bạn.
Lưu ý: ở trên mình chỉ cho thay đổi 2 đoạn text qua lại, bạn có thể thêm nhiều đoạn text nửa hoặc xóa nó đi: ví dụ bên dưới mình thêm 4 đoạn text nửa 3, 4, 5, 6 thì thêm code bên dưới vào sau đoạn mã message[1] = "Welcom"; trong code trên.
message[3] = "Text 3";
message[4] = "Text 4";
message[5] = "Text 5";
message[6] = "Text 6";
- Nếu bạn muốn chỉ hiển thị 1 dòng chữ thì hãy xóa đoạn mã message[1] = "Welcom"; trong code trên đi.
4. Cuối cùng save lại là xong
Chúc bạn thành công
.png)
.png)
.png)
0 comments:
Post a Comment