ThanLongCement.Com: Thủ thuật Blogspot

Showing posts with label Thủ thuật Blogspot. Show all posts

Friday, September 30, 2016

Code tạo hiệu ứng loading cho Blogspot

Code tạo hiệu ứng loading cho blogspot blogger rất đẹp cho các bạn sài blogspot hay các bạn sài website.

Cách tạo hiệu ứng loading hay là tải trang cho blogspot các bạn làm như sau

Các bạn vào edit HTML => Chèn Code bên dưới vào phần </Body>

<style type='text/css'>#loading{position: fixed!important;top: 0;right: 0;bottom: 0;left: 0;z-index: 9999;background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvswHahnUnC2n8VIvu0SZmKhPJQ7efp_aYFjoxtbUDetg9T3X-paoFhrUrgtu_HcqLqviV3Zb54as3ifTMaG-sHlITlXH_tABHQXq6QsxaO20o3xSmeNDLumY-1fOs7fcFbZANyxUsHZNw/s1600/Loading+%25283%2529.gif') no-repeat 50% 50%; display: none;font: 0/0 a;text-shadow: none;padding: 1em 1.2em;}</style><script type='text/javascript'>//<![CDATA[$(document.body).append('<div id="loading">Loading...</div>');$(window).on("beforeunload", function() {// ... Show the Animation `.fadeIn()`$('#loading').fadeIn(1000).delay(9000).fadeOut(1000);});//]]></script>

Chú ý : Các bạn thay link màu đỏ thành link ảnh mà bạn muốn Loading. Chúc các bạn thành công.

Code Javascript con trỏ chuột dễ thương cho Blog, Website

Làm thế nào để thêm được hiệu ứng con trỏ chuột dễ thương cho Blog? Mình muốn có hiệu ứng con trỏ chuột đẹp cho Website của mình...

- Chỉ với 1 đoạn Code javascript mình có thể sử dụng để thêm được con trỏ chuột ấn tượng cho Blog của bạn...

Code:

<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
 for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event; 
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
} 
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

- Trong đó:
+: Khu vực bôi vàng là mã màu của hiệu ứng
- HƯỚNG DẪN TRÊN BLOGSPOT
1. Vào bảng điều khiền Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code ở trên vào tiện ích vừa thêm...

Thủ thuật 3 bước thêm ảnh tác giả ở đầu tiêu đề cho Blogspot

Lượn lờ vào một số trang web thấy họ hay để ảnh tác giả bên cạnh tiêu đề bài viết thấy cũng hay hay nên áp dụng vào blog của mình vì blog mình có nhiều tác giả tham gia viết bài nên việc thêm vào lại rất cần thiết

Sau vài lần tìm hiểu trên google mình cũng sưu tầm được hướng dẫn nay xin chia sẻ lại cho anh em nào đang dùng blog viết bài. Cách làm chỉ cần qua 3 bước thôi.

Bước 1: Chèn CSS vào HTML chính của blog bạn

Đầu tiên các bạn hãy vào Blog Title → Template → Edit HTML. Nhấn Ctrl + F. Bạn tìm đoạn mã ]]></b:skin> và thêm vào ngay trước nó

.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Bước 2 - Chèn Javascript vào HTML chính của website bạn

Tìm </head> và chèn code sau vào trước </head>.

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Bước 3 - Tìm kiếm <b:if cond='data:post.title'>

Tiếp theo các bạn tìm kiếm <b:if cond='data:post.title'> và chèn code sau ở trước nó. Và nhớ rằng có ít nhất 2 thẻ <b:if cond='data:post.title'>, nên bạn phải chắc chắn rằng tìm đến vị trí đúng. Thử cái này không được thì hoàn tác lại và thử ở vị trí <b:if cond='data:post.title'> khác nhé!

<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>

Lưu lại là xong! Các bạn có thể xem Demo trực tiếp ở tiều đề bài viết mà các bạn đang đọc hoặc xem hình dưới

Hiển thị bài viết theo nhãn ngoài trang chủ Blogspot

Bài này mình cùng giới thiệu đến các bạn một cách khá đơn giản để đưa các bài viết ra ngoài trang chủ theo nhãn.
Mẫu này được mình trích ra từ template Johny Kampret được chia sẻ từ mastemplate.com. Mẫu đã được chỉnh lại về giao diện và thêm một số hiệu ứng nhỏ nhằm làm đẹp hơn.

Bước 1: Các bạn vào Chỉnh sửa HTML trong trang quản trị blog, Tìm đến thẻ đóng ]]</b:skin>và copy đoạn code phía dưới vào trước thẻ đóng.

.featuredPost2 h1{font-size:15px;font-family:Arial;font-weight:bold;text-shadow:1px 1px 1px #fff;padding:10px 10px;color: #464546;letter-spacing:-1px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #c6c2c1;background:#E3E3E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Nao17lJR3N01syHNak0HHrl7E2TrUNAE7ddjE9vUeP_T7XcsvfzmdFj5xWEkAX2RUhuOXHX-srOrxKfeH1CDZeivuO9PP_qgmwiqKuww7syvVspjfS6kOkEy9jVEKWdjWw18HL68fzHK/) repeat-x left bottom;text-transform:none;}
.featuredPost2 h1 a{color:#464546}
.featuredPost2 h1 a:hover{color:#0077ff}
.featuredPost2{font-size:13px;font-family:Arial;color:#464546;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);margin-bottom:15px;padding-bottom:8px;float:left;line-height:1.3em;}
.featuredPost2 ul{border:1px solid #fff}
.featuredPost2 .entry-title{font-size:13px;font-family:Arial;font-weight:bold;text-transform:none;color:#0077ff;line-height:15px;margin-bottom:5px}
.featuredPost2 .entry-title a{color:#0077ff}
.featuredPost2 .entry-title a:hover{color:#464546;text-decoration:underline}
.featuredPost2 ul li{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom: 1px dashed #b2b1b4;margin:0 8px;padding:8px 0}
.featuredPost2 img{background:#fff;-webkit-box-shadow:0 0 5px rgba(0,0,0,.7);-moz-box-shadow:0 0 5px rgba(0,0,0,.7);box-shadow:0 0 5px rgba(0,0,0,.7);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;;padding:3px;float:left;display:block;margin-right:10px}
.featuredPost2 img:hover{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.index{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#0077ff;float:right;font:12px Tahoma;color:#fff;display:block;margin:8px 5px 0;padding:3px 10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.index a,.index a:visited{color:#fff;}
.index:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#555;text-decoration:none}

Bước 2: Các bạn chèn đoạn code phía dưới vào trước thẻ đóng </head>

Bước 3 : Các bạn tìm đến widget 'Blog1' như đoạn mã phía dưới

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Và thêm ngay dưới nó đoạn mã sau :

<b:section class='book' id='dxh1' preferred='yes'>
<b:widget id='HTML51' locked='false' title='TEST1' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML52' locked='false' title='TEST3' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='book' id='dxh2' preferred='yes'>
<b:widget id='HTML53' locked='false' title='TEST2' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML54' locked='false' title='TEST4' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>

Các bạn thay những phần được tô đỏ là địa chỉ các label mà các bạn muốn hiển thị bài đăng
Bước 4: Bạn vào phần Bố cục → Lúc này trong template đã hiển thị thêm 4 widget với tên lần lượt là: TEST1, TEST2, TEST3, TEST4 nằm ngay bên dưới "Bài đăng trên Blog" .

Bạn nhấp vào "Chỉnh sửa" và thêm vào phần nội dung của widget tên nhãn mà bạn muốn hiển thị.

Và thay đổi tên nhãn bạn muốn hiển thị.
Chúc các bạn thành công

Thursday, September 29, 2016

Cách làm chữ và hình chạy cho Blogspot - Thủ thuật hay

Nhiều bạn hỏi cách làm chữ chạy trong blog, vì vậy hôm nay haitaynamkg hướng dẫn cách làm đơn giản nhất cho bạn nha? cũng dễ thôi bạn quan sát và copy các code dưới đây, nếu làm trong Blog entry thì nhớ tick Edit HTLM còn trong các module (các cái hộp trong home ) thì bạn chỉ việc coppy cho vô tiện ích rồi chọn lưu là xong thế là ... chữ hay hình tà tà chạy đó.

Bạn cũng có thể chèn link hình vào nó cũng chạy luôn, nhưng nhớ đừng chèn hình to quá nó sẽ làm chậm blog bạn đó nha... vậy bạn chọn 1 code rùi bỏ vô comment dưới của mình nè ! thay chử text bằng vài dòng thử coi...hihi thú vị nha ! thử cái coi

1 Code chạy phải qua trái

<marquee>TEXT</marquee>

2 Code chạy trái qua phải

<marquee direction="right">TEXT</marquee>

3 Code chạy tới rồi chạy lui

<marquee behavior="alternate">TEXT</marquee>

4 Code chạy dưới lên trên

<marquee direction="up">TEXT</marquee>

5 Code chạy trên xuống dưới

<marquee direction="down">TEXT</marquee>

6 CodeCodeChạy lên rồi chạy xuống

<marquee direction="up" behavior="alternate">TEXT</marquee>

7 Chạy ziczac

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</marquee></marquee>

Bạn thay chử TEXT bằng 1 câu gì đó bạn thích ..chay luôn nha ..

Cách khác về hình gif chạy (nhớ chọn hình bé xíu thui nha )

<marquee><img src="http://i158.photobucket.com/albums/t105/lenamit/bird.gif"> 4U SHOP THỜI TRANG UT TÍN, CHẤT LƯỢNG TẠI RẠCH GIÁ<img src="http://i158.photobucket.com/albums/t105/lenamit/bird.gif"></marquee>

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

Demo tại đây

Kết quả là:

4U SHOP THỜI TRANG UT TÍN, CHẤT LƯỢNG TẠI RẠCH GIÁ

Hiển thị bài viết ngoài trang chủ giống như trang tin247.com

Theo yêu cầu, thủ thuật sẽ tạo các chuyên mục ngoài trang chủ, mỗi chuyên mục tương ứng với 1 nhãn. Bài viết mới nhất của nhãn đó sẽ hiển thị có kèm ảnh thumbnail, các bài viết khác sẽ hiển thị dạng list, có kèm hiệu ứng mô tả bài viết. Đây là 1 style lấy ý tưởng từ trang tin247.com.

Hình ảnh minh họa từ trang tin247.com

và đây là kết quả sẽ dùng cho blogspot:

Nếu bạn nào muốn thực hiện giống như trang tin247.com thì phải làm 4 bướcsau:
- Bước 1: làm ẩn bài viết mới nhất ở trang chủ.
- Bước 2: tạo các widget HTML/javascript, mỗi widget là 1 chuyên mục, sau đó dán code của thủ thuật vào.
- Bước 3 : Chỉ cho phép các chuyên mục vừa tạo hiển thị ở trang chủ.
- Bước 4 : là bước trang trí cho các chuyên mục, như tạo khung, màu nền, tạoheader cho các chuyên mục...

Và ở bài viết này mình sẽ không hướng dẫn các bạn từng bước, mà chỉ cung cấp cho các bạn code của thủ thuật mà thôi. Còn thủ thuật chỉ cho phép các widget này hiển thị ở trang chủ hoặc ẩn bài viết ngoài trang chủ, các bạn có thể tham khảo bài viết này.

☼ Và bây giờ ta bắt đầu :
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HMTL
4. Dán code CSS bên dưới vào trước dòng code ]]></b:skin>

.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota:hover{
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

5. Save template.
6. Tạo widget HTML/Javascript, và dán code bên dưới vào:

Để có thể hiểu rõ và tùy chỉnh code theo ý mình thì các bạn xem hình minh họa bên dưới:

Một vài thiếu sót của thủ thuật : do mình không rành về việc chỉnh sửa code javascript, nên thủ thuật này không hoàn hảo cho lắm :

+ Thứ nhất : chưa thực hiện được việc bài viết mới nhất (đầu tiên) không cho phép hiển thị ở list, vì thế phải dùng tới 2 file javascript.
+ Thứ 2 : chưa áp dụng được hiệu ứng mô tả bài viết bằng javascript (như của trang tin247.com) vào thủ thuật này.

Hy vọng sau này mình sẽ rành hơn về javascript để có thể có nhưng bài viết tốt hơn.

☼ Thực hiện yêu cầu của bạn Vietmanga
- Trong yêu cầu có việc lấy bài viết từ 1 blog khác, cái này rất đơn giản, bạn chỉ việc thay link(code màu xanh) trong code home_page = "http://fandung.blogspot.com/"; thành URL của blog mà bạn muốn lấy bài vết.

Yêu cầu chỉnh sửa như hình bên dưới:

Và đây là kết quả :

Xem demo trực tiếp: http://data.fandung.com/blog/demo/label-tin247/fix2/index.html

☼ Và đây là code của thủ thuật :
- Lưu ý, code chỉ dùng được cho 1 blog, nếu muốn hiển thị cho nhiều blog thì phải chỉnh sửa lại đôi chút trong file JS.

- Vài lưu ý :

+ img_icon = "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"; : đây là link của ảnh icon đầu dòng.
+ padding-left:30px; : có thể tùy chỉnh lại, nếu muốn thụt vào nữa thì tăng lên là 40px, 50px;...
+ blogname = "Blog FD"; : tên blog mà bạn muốn hiển thị bài viết.
+ Những đoạn code khác thì có lẽ khá quen thuộc.

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

Tạo chạy chữ với lệnh Marquee (Nâng cao)

Marquee là gì? Marquee là một mã HTML để làm cho một đối tượng có thể chuyển động. Marquee mã là một mã phổ biến vì nhiều blogger sử dụng mã này vào blog của họ. Lệnh Marquee được thực hiện bằng cách sử dụng thẻ <marquee> {đối tượng}<marquee>. Lệnh marquee hiển thị tốt nếu xem tại trình duyệt Internet Explorer, tuy nhiên các trình duyệt khác sau này có nhiều phiên bản mới đã cũng có thể hiển thị tốt như IE.

Một số các thuộc tính thường dùng của lệnh marquee:

- BGCOLOR="color" → tạo màu nền cho vùng hiện thị lệnh marquee (có thể dùng hình nền...).

- DIRECTION="left/right/up/down" → chọn hình thức chạy chữ ( trái, phải, lên, xuống...)

- BEHAVIOR="scroll/slide/alternate" → thiết lập kiểu chạy chữ .

Scroll → di chuyển tuần tự.
Slide → di chuyện 1 thời gian, sau đó dừng lại.
Alternate → di chuyển từ trái sang phải sau đó dừng lại.

- TITLE="message" → Một đọan tin nhắn nhỏ được hiển thị khi người dùng rê chuột vào.

- SCROLLMOUNT="number" → điều chỉnh tốc độ chạy

- SCROLLDELAY="number" → chỉnh thời gian hiển thị (tính bằng giây)

- LOOP="number|-1|infinite" → to manage sum of looping.

- WIDTH="number" → chỉnh độ rộng của vùng chạy chữ. Có thể dùng đơn vị pixel (px) hoặc phần trăm (%).

►Một vài ví dụ :

Ví dụ 1

Code

Chuyển động từ trái qua phải, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2

</marquee>

Kết quả hiển thị:

Chuyển động từ trái qua phải, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2

Ví dụ 2 :

Code

Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)

</marquee>

Kết quả hiển thị:

Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)

Ví dụ 3:

Code

Chạy chữ với màu nền

</marquee></b></font></div>

Kết quả hiển thị:

Chạy chữ với màu nền

Ví dụ 5:

Code

Di chuyển xuống dưới,

dừng lại khi ta rê chuột vào,

chạy tiếp khi rê chuột ra

</marquee>

Kết quả hiển thị:

Di chuyển xuống dưới,

dừng lại khi ta rê chuột vào,

chạy tiếp khi rê chuột ra

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

Tạo chữ chạy cho BLogspot

Tạo chữ chạy sang ngang, lên trên, xuống dưới mượt mà thông qua cặp thẻ ... đơn giản, dễ làm.

Bạn từng thấy rất nhiều blogger hiện nay sử dụng các kiểu chữ chạy trên blog nhìn khá bắt mắt và chuyên nghiệp. Thật ra cơ chế tạo chữ chạy của các trang web đó rất đơn giản. Họ chỉ cần tùy biến thẻ <marquee> ... </marquee> chứa các dòng, đoạn chữ mà bạn cần chạy. Bài viết này namkna sẽ hướng dẫn các bạn chi tiết cách tùy biến và tạo chữ chạy với các kiểu đẹp cho blogger của bạn.

» Sau đây mình sẽ hướng dẫn chi tiết và cụ thể từng bước để làm các thủ thuật này các bạn chú ý và làm theo hướng dẫn nha:

Bạn có thể thêm vào một tiện ích HTML/Javascripts hoặc thêm vào phần HTML của bài viết tùy ý muốn và cách sử dụng của mỗi người;

1. Tạo một dòng chữ chạy đơn giản:

Đây là cách tạo một dòng chữ chạy đơn giản nhất bởi nó chưa hề được tùy biến gì tất cả chỉ là sơ khai:

<MARQUEE> Dòng chữ chạy </MARQUEE>

Kết quả hiện thị bạn sẽ được như sau: Dòng chữ chạy

2. Tạo dòng chữ chạy có định dạng

Bao gồm các kiểu định dạng như: kiểu chữ, font chữ, kích thước chữ, màu sắc,... Thậm chí bao gồm cả liên kết và hình ảnh....

» Mã in nghiêng và kèm theo một liên kết:

<MARQUEE> <span style="font-style:italic;">Chào mừng bạn đến với <a href="http://namkna.blogspot.com/" target="_blank">Namkna!</a> </span></MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến với Namkna!

» Kích thước chữ:

<MARQUEE> <span style="font-size:180%;">Chào mừng bạn đến với<a href="http://namkna.blogspot.com/" target="_blank">Thủ Thuật Cho Blogger!</a> </span> </MARQUEE>

Kết quản hiển thị:

Chào mừng bạn đến vớiThủ Thuật Cho Blogger!

» Có chữ hay hình ảnh cùng chạy:

<marquee> Chào mừng bạn đến với <a href="http://namkna.blogspot.com/" target="_blank">Namkna </a> <img border="0" src="http://namkna.blogspot.com/favicon.ico" /> </marquee>

Kêt quả hiển thị:

Chào mừng bạn đến với Namkna

3. Định kích thước hiển thị MARQUEE trên trang

<MARQUEE WIDTH="20%">Chào mừng bạn đến với namkna</MARQUEE>

Với WIDTH="20%" (chiều rộng) thì dòng chữ chạy chỉ xuất hiện trong khoảng 20% kích thước màn hình.
Kết quả hiển thị:

Chào mừng bạn đến với namkna

Chào mừng bạn đến vớiThủ Thuật Cho Blogger!

» Chiều chạy

<MARQUEE DIRECTION="LEFT">Chào mừng bạn đến với namkna</MARQUEE>

Bạn có thể thay LEFT bằng RIGHT, UP và DOWN nếu bạn muốn chiều chạy lần lượt từ bên phải qua, dưới lên và trên xuống

Kết quả
DIRECTION="LEFT"

Chào mừng bạn đến với namkna

DIRECTION="RIGHT"

Chào mừng bạn đến với namkna

DIRECTION="UP"

Chào mừng bạn đến với namkna

DIRECTION="DOWN"

Chào mừng bạn đến với namkna

4. Cách "chạy":

<MARQUEE BEHAVIOR="SCROLL">Chào mừng bạn đến với Namkna</MARQUEE>

Như mặc định, dòng chữ chạy này sẽ xuất hiện từ bên trái, và lập đi lập lại. Nếu bạn muốn chỉ "chạy" một lần từ bên trái qua hãy thay SCROLL bằng SLIDE, hoặc ALTERNATE chạy qua lại.
Kết quả hiển thị:
BEHAVIOR="SCROLL"

Chào mừng bạn đến với Namkna

BEHAVIOR="SLIDE"

Chào mừng bạn đến với Namkna

BEHAVIOR="ALTERNATE"

Chào mừng bạn đến với Namkna

5. Thời gian trễ

<MARQUEE SCROLLDELAY=200>Chào mừng bạn đến với Namkna</MARQUEE>

Ở đây thời gian trễ tính bằng mili giây (1 miligiây=1/1000 giây). Tôi chọn 200, nghĩa là thời gian trễ bằng 200/1000=0,2 giây
Kết quả hiển thị:

Chào mừng bạn đến với Namkna

Hãy so sánh:

Không có thời gian trễ

Chào mừng bạn đến với Namkna

SCROLLDELAY="100"

Chào mừng bạn đến với Namkna

SCROLLDELAY="1000"

Chào mừng bạn đến với Namkna

SCROLLDELAY="2000"

Chào mừng bạn đến với Namkna

6. Số lần lặp

<MARQUEE LOOP=10>Chào mừng bạn đến với namkna.blogspot</MARQUEE>

Nếu bạn muốn số lần lặp lại cụ thể, hay thay 10 bằng con số khác. Sau lần lặp cuối dòng chữ sẽ biến mất.

7. Bước "nhảy":

<MARQUEE SCROLLAMOUNT=30>Chào mừng bạn đến với namkna</MARQUEE>

30 ở đây là số pixel (số điểm ảnh) trên màn hình của bạn. Mỗi lần xuất hiện dòng chữ sẽ "nhảy" một bước cách điểm trước đó 30 pixel. bạn có thể thay số 30 = số khác
Kết quả

Chào mừng bạn đến với namkna

8. Màu nền

<MARQUEE BGCOLOR=ORANGE>Chào mừng bạn đến với Namkna</MARQUEE>

- Thay ORANGE bằng các từ khác để được màu theo ý muốn của bạn. Ví dụ: RED (đỏ), BLUE (xanh da trời), GREEN (xanh lá cây), PINK (hồng), YELLOW (vàng), VIOLET (tím), BLACK (đen)....
Kết quả:

Chào mừng bạn đến với Namkna

- Cuối cùng Trong quá trình áp dụng nếu gặp bất kỳ khó khăn gì hãy comment ở bên dưới để mình hỗ trợ trực tiếp nha.

CÁC ĐOẠN MÃ TẠO CHỮ CHẠY (TỔNG HỢP)

Lần trước tôi có dịp giới thiệu trang www.taochu.com giúp bạn làm dòng chữ chạy trên blog của mình. Thật ra cơ chế tạo chữ của trang web này rất đơn giản. Bạn nhập các ký tự và chọn mẫu chữ mình ưu thích. Bấm Do it để lấy các chữ lưu dưới dạng hình ảnh tương ứng với các ký tự bạn nhập vào kèm theo mã và bạn dán mã này vào HTML/JavaScript (Template | Add a Page Element). Trang web này tốt độ hơi chậm, vì vậy có thể mất nhiều thời gian để blog của bạn load đầy đủ các hình này. Nếu bạn muốn dùng lâu dài, hãy lấy các lên kết đến các ký tự (nằm trong đoạn mã mà bạn lấy được) và upload lên các trang chia sẻ ảnh trực tuyến như: www.photobucket.com, www.imageshack.us, www.tinypic.com,...

Để làm dòng chữ chạy hiển thị trên blog, hãy tham khảo các đoạn mã dưới đây.

1. Bạn cần một dòng chữ chạy đơn giản, hãy đưa nó vào giữa hai tag <marquee> ... </marquee>

Mã :

<MARQUEE> Dòng chữ chạy </MARQUEE>

Kết quả hiển thị:

Dòng chữ chạy

2. Bạn cần dòng chữ có định dạng (kiểu chữ, font chữ, kích thước chữ, màu sắc,...) liên kết, hình ảnh....
Kiểu chữ

In nghiêng
Mã:

<MARQUEE> <span style="font-style:italic;">Chào mừng bạn đến với<a href="http://thuthuatchoblogger.blogspot.com" target="_blank">Thủ Thuật Cho Blogger!</a> </span></MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger!

In đậm

Mã:

<MARQUEE> <span style="font-weight:bold;">Chào mừng bạn đến với<a href="http://thuthuatchoblogger.blogspot.com" target="_blank">Thủ Thuật Cho Blogger!</a> </span></MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger!

Font chữ:

Mã:

<MARQUEE> <span >Chào mừng bạn đến với<a href="http://thuthuatchoblogger.blogspot.com" target="_blank">Thủ Thuật Cho Blogger!</a> </span> </MARQUEE>

Hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger!

Màu chữ:

Mã:

<MARQUEE> <span style="color: rgb(255, 102, 0);">Chào mừng bạn đến với<a href="http://thuthuatchoblogger.blogspot.com" target="_blank">Thủ Thuật Cho Blogger!</a> </span> </MARQUEE>

Hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger!

Kích thước chữ:

Mã:

<MARQUEE> <span style="font-size:180%;">Chào mừng bạn đến với<a href="http://thuthuatchoblogger.blogspot.com" target="_blank">Thủ Thuật Cho Blogger!</a> </span> </MARQUEE>

Hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger!

Nếu bạn muốn có chữ hoặc hình ảnh hay cả hai cùng "chạy".

Mã:

<MARQUEE> Chào mừng bạn đến với<a href="http://thuthuatchoblogger.blogspot.com" target="_blank">Thủ Thuật Cho Blogger! </a><img border="0" SRC="http://taochu.com/gen/gimg/30/a.gif"/> </MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến vớiThủ Thuật Cho Blogger!

3. Định kích thước hiển thị MARQUEE trên trang

Mã:

<MARQUEE WIDTH="20%">Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

Với WIDTH="20%" (chiều rộng) thì dòng chữ chạy chỉ xuất hiện trong khoảng 20% kích thước màn hình.

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger

Tương tự như vậy bạn có thể định chiều cao HEIGHT.

4. Chiều chạy

Mã:

<MARQUEE DIRECTION="LEFT">Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger

Bạn có thể thay LEFT bằng RIGHT, UP và DOWN nếu bạn muốn chiều chạy lần lượt từ bên phải qua, dưới lên và trên xuống

Kết quả hiển thị:

DIRECTION="RIGHT"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

DIRECTION="UP"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

DIRECTION="DOWN"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

4. Cách "chạy":

Mã:

<MARQUEE BEHAVIOR="SCROLL">Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger

Như mặc định, dòng chữ chạy này sẽ xuất hiện từ bên trái, và lập đi lập lại. Nếu bạn muốn chỉ "chạy" một lần từ bên trái qua hãy thay SCROLL bằng SLIDE, hoặc ALTERNATE chạy qua lại.

Kết quả hiển thị:

BEHAVIOR="SLIDE"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

BEHAVIOR="ALTERNATE"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

5. Thời gian trễ

Mã:

<MARQUEE SCROLLDELAY=200>Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

Ở đây thời gian trễ tính bằng mili giây (1 miligiây=1/1000 giây). Tôi chọn 200, nghĩa là thời gian trễ bằng 200/1000=0,2 giây

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger

Hãy so sánh:

Không có thời gian trễ

Chào mừng bạn đến với Thủ Thuật Cho Blogger

SCROLLDELAY="100"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

SCROLLDELAY="1000"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

SCROLLDELAY="2000"

Chào mừng bạn đến với Thủ Thuật Cho Blogger

6. Số lần lặp

Mã:

<MARQUEE LOOP=10>Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

Nếu bạn muốn số lần lặp lại cụ thể, hay thay 10 bằng con số khác. Sau lần lặp cuối dòng chữ sẽ biến mất.

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger

7. Bước "nhảy":

Mã:

<MARQUEE SCROLLAMOUNT=30>Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

30 ở đây là số pixel (số điểm ảnh) trên màn hình của bạn. Mỗi lần xuất hiện dòng chữ sẽ "nhảy" một bước cách điểm trước đó 30 pixel.

Kết quả hiển thị:

SCROLLAMOUNT=30

Chào mừng bạn đến với Thủ Thuật Cho Blogger

SCROLLAMOUNT=60

Chào mừng bạn đến với Thủ Thuật Cho Blogger

SCROLLAMOUNT=100

Chào mừng bạn đến với Thủ Thuật Cho Blogger

8. Màu nền

Mã:

<MARQUEE BGCOLOR=ORANGE>Chào mừng bạn đến với Thủ Thuật Cho Blogger</MARQUEE>

Kết quả hiển thị:

Chào mừng bạn đến với Thủ Thuật Cho Blogger

Thay ORANGE bằng các từ khác để được màu theo ý muốn của bạn. Ví dụ: RED (đỏ), BLUE (xanh da trời), GREEN (xanh lá cây), PINK (hồng), YELLOW (vàng), VIOLET (tím), BLACK (đen)....

Cuối cùng, bạn copy mã, paste vào HTML/JavaScript (Template | Add A Page Element | HTML/JavaScript), di chuyển đến vị trí thích hợp bấm Save để hoàn tất.

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