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.

More about →

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.

More about →

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

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

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.

More about →

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.

More about →

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.

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"

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