Monday, 8 June 2009

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

[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.

Sunday, 7 June 2009

Tạo tab Cloud (Dạng Flash)

[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.

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

[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.

Saturday, 6 June 2009

Code tạo List Bookmarks cho mỗi bài viết

[FD's BlOg] - Thủ thuật này là mình post theo yêu cầu, nếu ai thấy cần thiết thì có thể tham khảo thủ thuật này cho blog của mình. Thủ thuật tạo 1 bảng list bookmarks các trang xã hội cho mỗi bài viết của blog. Giống như cái mà blog mình đang xài.




Xem hình minh họa:



Thủ thuật này mình sẽ hướng dẫn các bạn chèn nó ở dưới footer của bài viết, nếu bạn nào muốn chèn nó ở đâu thì cứ dán code của thủ thuật vào ở đó.

Bắt đầu:
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 đọan code sau (hoặc tương tự):
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

6. Chèn đọan code của thủ thuật vào bên dưới đọan code vừa tìm được:

<script type='text/javascript'>
var addthis_pub="fandung";
</script>

<a expr:id='data:post.url' expr:name='data:post.title' onclick='return addthis_sendto()' onmouseout='addthis_close()' onmouseover='return addthis_open(this, "", this.id, this.name);'><img alt='Bookmark and Share' height='16' src='http://s7.addthis.com/static/btn/lg-bookmark-en.gif' style='border:0' width='125'/></a>

<script src='http://s7.addthis.com/js/200/addthis_widget.js' type='text/javascript'/>


7. Save template.

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

Thursday, 4 June 2009

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


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.

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

[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.

Monday, 1 June 2009

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"

[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.