Lỗi nguy hiểm từ việc thêm Tag Cloud (dạng Flash) của trang http://www.tagcloud-generator.com

Người đăng: chaobuoisang on Thứ Hai, 8 tháng 6, 2009

[FD's BlOg] - Hôm nay ngồi test thử cái tab cloud dạng flash từ http://www.tagcloud-generator.com kết quả là không thu được gì nhưng lại có một chút kinh nghiệm. Mình không biết lỗi này là do đâu nhưng cũng post lên cho mọi người xem. Và nếu ai biết lỗi của nó thì chia sẻ với mọi người nhé.




Sau khi nhận lời test thử tag cloud dạng flash từ trang http://www.tagcloud-generator.com mình nhận được kết quả không như mong muốn. Không đơn giản là các flash đó chạy không được, mà còn 1 kết quả ngòai ý muốn nữa là "Blog bị xóa".

Các bạn xem hình minh họa:

Ban đầu mình test trên blog thứ nhất, kết quả là không hiển thị được flash. Và một lúc sau mình vào lại blog test này thì nhận đuợc thông báo như hình minh họa trên. Lúc đó cũng ko biết vì lý do vì mà blog bị xóa vô cớ như vậy (ngòai việc thêm 2 đọan javascript vào code template thì mình không đá động gì tới code của template).

Đến chiều mình tiếp tục test với blog test thứ 2, và kết quả hòan tòan tương tự, không có gì khả quan hơn. Và lúc này mình mới hiểu vì sao blog test của mình bị xóa. Tuy nhiên mình không biết chính xác là vì đâu mà blog bị xóa, mình cũng đóan là code javascript đó không tương thích với blogger, hoặc cũng có thể là do lỗi của mình chăng.

Vì lý do đó, mình đã quyết post bài này lên cho mọi người tham khảo, để mọi người thử test và cho mình một chút ý kiến, xem kết quả có giống mình không. Khuyến cáo là các bạn nên tạo một blog mới để test điều này. Và nếu sau khi test ai có câu trả lời cho cái lỗi này thì hãy chia sẻ cho mình và mọi người biết với nhé.

☼ Và bây giờ là các bước mình đã thực hiện:
1. Đầu tiên truy cập vào trang http://www.tagcloud-generator.com
2. Sau đó làm theo các hướng dẫn để tạo 1 tag cloud dạng flash. Lưu ý, đối với bước 1 ta nên add các tab dạng thủ công.
3. Sau khi thiết lập xong nhấn Genergator Preview để xem trước.
4. Sau đó download gói tiện ích đó về, và giải nén ta sẽ được như hình bên dưới:

(tên của các file đã được thay đổi lại cho gọn)
5. Ta sẽ được 5 file : file Javascript, file demo HTML, file Hứơng dẫn (readme), file xml, file flash (.swf)
6. Và đây là hình ảnh sau khi chạy thử file demo:


7. Mở file hướng dẫn (readme), thì nội dung của nó cơ bản như thế này:

- Đầu tiên, up load 3 file : AC_RunActiveContent.js, tagClouds.xml, tagClouds.swf lên host để lấy link.
- Sau đó mở file demo HTML bằng notepad, ta sẽ thấy được code HTML của file demo.
- Tiếp tục copy 2 dòng code java ở trong thẻ <head> của code và dán 2 dòng javascript này vào sau dòng code <head> ở trong code template của blog.

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

Thay code màu xanh thành link của file Javascript mà bạn đã up lên host.

- Tiếp tục xuống dưới (trong code HTML của file demo) ta sẽ thấy 2 đọan code <javascript><noscript> (như bên dưới). Tiếp theo vào trong bố cục của blog, vào phần tử trang, và tạo một widget HTML/Javascript và dán code bên dưới vào:

<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '250',
'height', '200',
'src', 'tagClouds',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'transparent',
'devicefont', 'false',
'id', 'tagClouds',
'bgcolor', '#ffffff',
'name', 'tagClouds',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'tagClouds',
'salign', '',
'flashVars', 'xmlURL=tagClouds.xml'
); //end AC code
}
</script>

<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="250" height="200" id="tagClouds" align="middle" >
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="tagClouds.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="flashVars" value="xmlURL=tagClouds.xml" />
<embed src="tagClouds.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="tagClouds" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashVars="xmlURL=tagClouds.xml"/>
</object>
</noscript>

Thay các code màu đỏ thành các link tương ứng với file mà bạn đã up lên host.


8. Như vậy đã hòan thành các bước mà mình đã thực hiện.

- Cũng rất may mắn là mình đã test thủ thuật này trên các blog test, nếu mà test ngay trên blog này thì không biết chuyện gì sẽ xảy ra. Hy vọng sẽ có người giải đáp lỗi này giúp mình.
- Và qua thủ thuật này mình cũng rút ra được một điều, không nên thử trực tiếp các tiện ích vào blog của mình khi chưa biết rõ về nó, và tốt nhất nên thử trên 1 blog test sẵn, nếu ok thì hãy thử trên blog của mình.
- Và với cái lỗi này là lần đầu tiên mình gặp, không biết có ai đã gặp nó chưa, và không biết có ai đã thành công khi thêm tiện ích tag cloud từ website này chưa. Nếu có ai đã thêm thành công tiện ích này cho blogspot thì hãy chia sẻ kinh nghiệm với mọi người nhé.

Cảm ơn mọi người đã xem bài viết này.
More about

Tạo tab Cloud (Dạng Flash)

Người đăng: chaobuoisang on Chủ Nhật, 7 tháng 6, 2009

[FD's BlOg] - Đây là 1 trong những tiện ích đầu tiên mà mình cài đặt cho blog. Và cho đến bay giờ mình vẫn còn dùng nó. Tuy nhiên hiện trên blog của mình vẫn chưa đăng tải bài viết hướng dẫn thủ thuật này. Và bây giờ có bạn nhờ mình hướng dẫn dẫn về nó, nên mình post bài hướng dẫn này.



Hình minh họa:


Thủ thuật sẽ phải chèn code trược tiếp vào code của template. Bây giờ ta sẽ đi vào từng bước:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Nhấp chọn mở rộng mẫu tiện ích
5. Tìm dòng code bên dưới (hoặc tương tự):

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Chèn code bên dưới vào sau dòng code vừa tìm được:

<b:widget id='Label99' locked='false' title='Nhãn' type='Label'>
<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<script type='text/javascript'>

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "176", "150", "7", "#FFFFFF");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x000000");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='19'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>
</b:widget>

- Một vài lưu ý:

+ Các dòng code màu đỏ ("176", "150", "#FFFFFF" ): 176 chính là độ rộng của tab cloud, 150 là chiều cao, #FFFFFF là màu nền.
+ Code màu xanh (style='19' , "0x000000") : 19 là kích thước font chữ, 0x000000 là màu chữ.

7. Save template.
8. Vào trở lại bố cục, vào phần tử trang ta sẽ thấy hình như bên dưới:


Trong hình là minh họa vị trí hiển thị của tab cloud sau khi ta thực hiện xong bước 7, và vị trí này do ta xác định trước ở bước 5, Bây giờ bạn có thể di chuyển nó đến vị trí mà bạn mong muốn:

Widget được phát triển bởi Roy Tanck and Amanda Fazani

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

Một "Mẹo" nhỏ cho việc sọan thảo bài viết

Người đăng: chaobuoisang

[FD's BlOg] - Bài viết này mình sẽ chia sẻ cho các bạn 1 thủ thuật nhỏ giúp cho việc sọan thảo bài viết. Đó là dùng của lệnh padding để căn lề làm cho bài viết của bạn có 1 bố cục gọn gàng, dễ nhìn hơn.




Mình sẽ minh họa cho các bạn thấy:

Đọan văn bản chưa qua xử lý:

A. Trường tiểu học A:
I. Lớp 1a
1. Tổ 1
a. Nguyễn Văn An
b. Tăng Quế Anh
c. Tạ Hiên
d. Ngô Kinh
2. Tổ 2
a.
b.
c.
d.
3. Tổ 3
...
II. Lớp 1b
...
III. Lớp 1c
...
B. Trường tiểu học B:

Như vậy trông sẽ rất khó coi, bây giờ ta sẽ dùng lệnh padding để căn lề trái, để tạo nên bố cục gọn gàng hơn.

Và đây là đọan văn bản đã qua xử lý:

A. Trường tiểu học A:

I. Lớp 1a

1. Tổ 1

a. Nguyễn Văn An
b. Tăng Quế Anh
c. Tạ Hiên
d. Ngô Kinh

2. Tổ 2

a.
b.
c.
d.

3. Tổ 3

...

II. Lớp 1b
...
III. Lớp 1c
...

B. Trường tiểu học B:


Ta sẽ xem hình minh họa:

Và đây là code của thủ thuật (theo như hình ví dụ)

Văn bản 1
Văn bản 1
<div style="padding:0 0 0 50px;">
Văn bản 2
Văn bản 2


<div style="padding:0 0 0 50px;">
Văn bản 3
Văn bản 3

<div>

<div>


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

Yêu đơn giản chỉ là...

Người đăng: chaobuoisang

[FD's BlOg] - Tình yêu đơn giản là khi bạn nhớ tới người ấy muốn gọi điện, gọi xong mà chẳng biết nói gì.
Đơn giản là gọi điện không biết nói gì mà chỉ muốn nghe thấy giọng nói của người đó.
Đơn giản là ghi nhớ từng lời nói của người đó
Đơn giản cũng chỉ là muốn giới thiệu tất cả những gì mình có cho người đó xem.


Là bạn đã bắt đầu thích 1 ai đó mà chưa dám nói ra vì sợ người kia chưa chắc đã thích mình.
Tất nhiên là 1 tình yêu nhỏ chỉ dành cho 1 cô gái nhỏ mà thôi.

Bạn thích yêu 1 ai đó mà có thể cãi nhau với bạn hoài mà không chán
Nó cũng chỉ đơn giản là khi bạn muốn nhìn người đó 1 lúc mà không dám.

Mỗi buổi sáng thức dậy người đầu tiên bạn chợt nghĩ tới là người ấy.
Đơn giản là bạn đã bắt đầu cảm thấy 1 số rắc rối đang đến.
Đơn giản là khi phải đi xa bạn cảm thấy lưu luyến... Và bạn đã yêu 1 chút rồi đó!

Tình yêu đơn giản là khi bạn nhớ tới người ấy muốn gọi điện, gọi xong mà chẳng biết nói gì.
Đơn giản là gọi điện không biết nói gì mà chỉ muốn nghe thấy giọng nói của người đó.
Đơn giản là ghi nhớ từng lời nói của người đó
Đơn giản cũng chỉ là muốn giới thiệu tất cả những gì mình có cho người đó xem.

Khi bên cạnh người đó bạn thờ ơ rồi khi xa cách bạn lại đi tìm kiếm.
Đơn giản là chẳng biết nói yêu thế nào cả... (chẳng đơn giản tẹo nào).
Đơn giản chỉ là có những chuyện mà chỉ 2 người hiểu mà không ai có thể hiểu được.
Đơn giản là nhìn ảnh người đó mà bạn cười như chưa bao giờ được cười mà không hiểu lí do tại sao.
Đơn giản khi nghe người đó hát mà bạn cứ nghe đi nghe lại mãi mà không chán.
Đơn giản là khi đi ngoài đường bạn nghĩ tới người đó bạn phá lên cười, mọi người tưởng bạn bị hâm... Có khi nào bạn đã bắt đầu hâm vì một ai đó chưa?
Đơn giản là bạn thích bị gọi là hâm.

Tình yêu đơn giản là bạn yêu cả nhưng cái xấu của người đó, vì nếu không có cái xấu đó thì người đó không còn là người mà bạn đang yêu nữa.

Và cuối cùng là bạn làm cái này cho ai đó thì đó là bạn đang yêu đó.

Theo xitrum

More about

Thủ thuật yêu cầu : Tiện ích Recent post không có ảnh thumbnail

Người đăng: chaobuoisang on Thứ Năm, 4 tháng 6, 2009


Theo yêu cầu của Oliver (oliver273.blogspot.com)
[FD's BlOg] - Vẫn như các bài recent post khác, mình vẫn dùng tiện ích Recent posts của VWG để chỉnh sửa lại. Do bạn Oliver không nói rõ có hay không phần summary post, nên mình sẽ giới thiệu cả 2 cách.

Hình ảnh minh họa:

Không có phần summary post


Không có phần summary posts và phần comment, ngày post...


Có phần summary post


Và đây là code của thủ thuật:
- Chỉ cần tạo một widget HTML/Javascript rồi dán tất cả code bên dưới vào là xong.

<script language="JavaScript">
imgr = new Array();

showRandomImg = true;
fntsize = 12;
acolor = "#f00";
aBold = true;
icon = " » ";

text = "Nhận Xét";

showPostDate = true;

summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 6;
home_page = "http://www.fandung.com/";

</script>

<script src="http://data.fandung.com/js/recentpost-nothumbnail.js" type="text/javascript"></script>

Do bạn Oliver là người mới, nên mình sẽ giải thích kĩ 1 chút về code :

+ fntsize = 12; : font của tiêu đề bài viết.
+ acolor = "#f00"; : màu chữ của tiêu đề bài viết
+ text = "Nhận Xét"; : nếu không muốn hiện thị số comment của bài viết thì sửa Nhận xét lại thành No
+ showPostDate = true; : nếu không muốn hiện ngày đăng thì sửa true thành false
+ numposts = 6; : số bài viết sẽ được hiển thị
+ summaryPost = 200; : số kí tự sẽ hiển thị ở phần summary post
+ summaryFontsize = 12; : kích thước chữ của phần summary post
+ summaryColor = "#000"; : màu chữ của phần summary post
+ home_page = "http://www.fandung.com/"; : thay bằng địa chỉ URL của blog bạn

Và lưu ý thêm nữa : nếu bạn không muốn hiển thị phần summary post thì sửa link file javascript ở phía trên lại thành link bên dưới :
http://data.fandung.com/js/recentpost-nothumbnail1.js

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

Tạo menu dropdown từ các nhãn

Người đăng: chaobuoisang

[FD's BlOg] - Bài viết hướng dẫn tạo widget Label dạng menu dropdown từ widget Label có sẵn của blogger. Với thủ thuật này sẽ blog bạn sẽ gọn hơn, và sẽ không bị chiếm nhiều chỗ do list Label của bạn quá dài.



Hình minh họa:


Để thực hiện, trước tiên bạn phải tạo cho blog mình một widget Label được tích hợp sẵn trong blogger.
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Thêm tiện ích Label vào blog. (xem hình bên dưới)

và đây là kết quả


Sau khi thêm tiện ích label vào blog các bạn tiếp tục thực hiện các bước bên dưới:
1. Vào bố cục
2. Vào phần chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đọan code bên dưới:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

5. Thay thế tất cả bằng code bên dưới:

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>

<option>Labels</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

6. Save template

Và cuối cùng ta có kết quả như bên dưới:


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

Tạo các tab chuyên mục nổi bật cho blog với việc tích hợp tiện ích "Tự động cập nhật bài viết mới"

Người đăng: chaobuoisang on Thứ Hai, 1 tháng 6, 2009

[FD's BlOg] - Đây lại là 1 thủ thuật mới do mình phát triển lên từ thủ thuật "Recent Posts" của VWG. Thủ thuật sẽ tạo các tab chuyên mục hot nhất trên blog của bạn với việc cập nhật các bài viết mới nhất. Và trong bài viết này mình sẽ chọn vị trí đặt các tab là ở footer.



hoặc có thể xem hình minh họa kết quả bên dưới:

☼ Thủ thuật này sẽ gồm 2 bước:
A. Bước 1: chia footer thành nhiều cột (tương ứng với số tab chuyên mục mà bạn muốn hiển thị)
- Để thực hiện được thủ thuật này bạn hãy tham khảo bài viết này .
- Và nhớ thay đổi độ rộng các cột cho phù hợp với blog của bạn.
- Và đây là hình minh họa kết quả sau khi chia:

B. Bước 2: tạo widget HTML/javascript cho từng cột và dán code của thủ thuật vào. Mỗi cột tương ứng với một chuyên mục (nhãn) mà bạn sẽ lựa chọn để hiển thị.
- Và code của các chuyên mục sẽ tương tự nhau.
- Trước tiên ta sẽ xem hình minh họa bên dưới:


- Để thực hiện, bạn tạo widget HTML/Javascript ở các cột footer mà ta đã chia, rồi dán code bên dưới vào:

<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#695641;">Tiêu đề của tab Label1</div>
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";

showRandomImg = true;
tablewidth = 244;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";

imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";

text = "no";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";

numposts = 5;
label = "Label1";
home_page = "http://www.fandung.com/";

</script>
<script src="http://data.fandung.com/js/recent-post-Jquery/recentposts-label_thumb.js" type="text/javascript"></script>

- Chú ý :

+ Thay đổi code màu xanh theo ý bạn.
+ tablewidth = 244; : đây là code độ rộng của tab các bài được hiển thị. Hãy điều chỉnh nó cho phù hợp với độ rộng của các cột footer mà ta đã chia ở bước 1, tốt nhất là 2 giá trị này ta cho bằng nhau.
+ numposts = 5; : đây là số bài viết sẽ được hiển thị.
+ label = "Label1"; : đây là nhãn mà bạn chọn. lưu ý : đối với các nhãn có kí tự khỏang trắng ta phải thay bằng chuỗi %20.
+ home_page = "http://www.fandung.com/"; : sửa lại thành địa chỉ của blog bạn.
+ Và đối với các cột còn lại ta cũng thực hiện tương tự : là chèn code bên trên vào và thay đổi lại nhãn tương ứng là được.


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