Các bạn nghĩ sao về giao diện mới của Blog FD !

Do you think about my new layout?

[FD's BlOG] - Hôm nay ngẫu hứng ngồi mày mò một chút với photoshop, và thế là nảy ý định chỉnh sửa 1 chút để làm mới Layout cho blog. Và rồi kết quả là như bây giờ. ^^, dù sao cũng có 1 chút mãn nguyện và hài lòng với kết quả. Như vậy là vui rồi.

Còn mọi người nghĩ sao về nó...

Mình đã tiếp thu ý kiến mọi người, và có những thay đổi nhất định, mọi người thử cho ý kiến xem sao

More about →

Tạo chữ kí online với Mylivesignature.com và ứng dụng của nó cho blog

Create Signature Online With MyLiveSignature

[FD's BlOg] - Bài viết giới thiệu cho các bạn cách tạo chữ kí (online) độc đáo với MyLiveSignature.Com . Và kèm theo là thủ thuật chèn chữ kí của từng tác giả vào cuối mỗi bài viết. Bài viết này áp dụng thủ thuật tương tự như thủ thuật "chèn ảnh của tác giả trước tiêu đề mỗi bài viết".

1. Tạo chữ kí online với mylivesignature.com:
- Đầu tiên ban truy cập vào trang web mylivesignature.com và thực hiện 5 bước sau để có 1 chữ kí như ý muốn.

Bước 1: điền tên của bạn


Bước 2: Chọn font (có tất cả 120 font cho bạn chọn)


Bước 3: chọn kí thước


Bước 4: CHọn màu


Bước 5: Chọn kiểu hiển thị (nằm ngang, nghiêng...)

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


2. Chèn chữ kí của tác giả vào cuối mỗi bài viết:
- Thủ thuật này thích hợp nhất cho các blog có nhiều thành viên , với thủ thuật này, cuối mỗi bài viết sẽ hiển thị chữ kí của tác giả bài viết đó.
- Để thực hiện thủ thuật này, bạn phải có đủ tất cả các chữ kí của các thành viên. Và sau đó upload lên host nào đó để lấy link.

Hình ảnh minh họa kết quả :

☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Tìm đọan code sau (hoặc tương tự):

<div class='post-body entry-content'>
<data:post.body/>

6. Chèn vào sau nó đọan code sau:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "Author1"'>
<img src='link ảnh chữ kí của tác giả 1 của' style='float:right;'/>
</b:if>

<b:if cond='data:post.author == "Author2"'>
<img src='link ảnh chữ kí của tác giả 2' style='float:right;'/>
</b:if>

</b:if>

- Lưu ý :

+ tên tác giả phải chính xách, nếu trong tên của tác giả có các kí tự đặc biệt như : ' , " , < , > , ... thì phải thay đổi chúng bằng các chuỗi thay thế (mã hóa)
+ Nếu blog bạn có 1 tác giả thì dùng code bên dưới cho gọn:

<b:if cond='data:blog.pageType == "item"'>

<img src='link ảnh chữ kí của bạn' style='float:right;'/>

</b:if>

7. Save template.

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

More about →

Tạo thanh Navbar luôn hiển thị phía trên (dưới) của blog

Fixed Navbar
(fix ngày 29/05/2009 - khắc phục việc không hiển thị trên IE6)

[FD's BlOg] - Một thủ thuật đơn giản cho phép bạn tạo một thanh Navbar hiển thị nội dung cố định trên blog của bạn. Thủ thuật cho phép bạn có thể đặt thanh Navbar này ở bất cứ vị trí nào, ví dụ : trên cùng (top), bên dưới(bottom), trái trên(left-top), phải dưới (right-bottom)...

Với thủ thuật này, bạn có thể tạo nhiều ứng dụng, ví dụ như:

+ Tạo một thanh menu truy cập
+ Tạo một dòng thông báo
+ Tạo một danh sách các bài viết hot (kèm theo hiệu ứng chạy chữ)
+ Hoặc bất cứ thứ gì mà bạn muốn hiển thị (một lời khuyên là : chỉ nên cho phép hiển thị nội dung theo 1 hàng, để không chiếm chỗ trên không gian của blog bạn)

Và đây là hình minh họa 1 ví dụ về cách tạo một danh sách các bài viết hot.

Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS này vào trước dòng code ]]></b:skin>

div.fixed-navbar {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
position: fixed; top: 0; left: 0;
text-align: left;
width: 100%;
border: 2px #00f solid;
}
div.fixed-navbar a:hover {
color: #00f;
}

- đọc hiểu code:

+ background-color: #ccc; : màu nền của thanh navbar, nếu bạn dùng ảnh nền thì đổi code lại thành background: #ccc url(link ảnh) ;
+ position: fixed; top: 0; left: 0; : code xác định vị trí hiển thị của thanh navbar trên blog. Thuộc tính fixed là để cho thanh cố định khi di ta di chuyển chuột. còn thuộc tính left top dùng để xác định vị trí (cái này mình sẽ nói thêm ở bên dưới)
+ width: 100%; : độ rộng của thanh Navbar
+ border: 2px #00f solid; tạo đường bo cho thanh navbar, nếu bạn không thích thì cứ bỏ nó đi.

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

<div class="fixed-navbar">
{nội dung mà bạn muốn hiển thị trên thanh navbar}
</div>

☼ Sau đây là một số ví dụ về các vị trí hiển thị
a. Hiển thị trên cùng với độ rộng là 100% :(hình minh họa như ở phía trên).
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; top: 0; left: 0;
width: 100%;

b. Hiển thị phía bên dưới bên trái với độ rộng là 200px
Thay thế đọan code bên dưới cho dòng code màu xanh ở đọan code trên.

position: fixed; bottom: 0; left: 0;
width: 200px;

Hình minh họa:

Còn các vị trí : bên dưới bên phải, phía trên bên phải thì cũng tương tự, bạn chỉ cần thay vào là bottom:0; right: 0; hoặc top: o; right: 0;

☼ New update (29/05/2009)

Khắc phục lỗi không hiển thị được trên IE6.

- Với code trên, thủ thuật thì thủ thuật không hiển thị tốt trên IE6, và dưới đây là cách khác phục.
- Bạn chỉ thay thế code CSS trên bằng đọan code bên dưới:

div.nicetitle {
background-color: #ccc;
color: #000;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
text-align: left;
width: 200px;
border: 2px #00f solid;
position: fixed;
_position:absolute;
left: 0px;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

- code màu đỏ là code được thêm vào.
- Với code trên thì thanh Navbar sẽ hiển thị ở góc trái bên dưới. Nếu muốn hiển thị bên góc phải bên dưới thì sửa code màu xanh (right) thành left.
- Vớilênh left: 0px; sẽ cho phép thanh Navbar dịch qua phải (tức canh lề trái) 0 pixel.
- Còn 2 vị trí góc trái (phải) phía trên thì mình vẫn chưa fix được.

Hình minh họa

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

More about →

Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive và Nhãn

Show Only Post Title at Label and Archive Pages

[FD's BlOg] - Một ứng dụng khác trong việc sử dụng các cấu trúc lệnh có sẵn trong template. Đó là lệnh "b:/if", với bài viết này mình sẽ hướng dẫn cách chỉ cho phép hiển thị tiêu đề bài viết (nội dung được ẩn) ở các trang Archive và Label.

Thông thường khi bạn truy cập vào các nhãn (Label) hay các mục lưu trữ của blog (archive) thì các bài viết sẽ hiển thị đầy đủ, tiêu đề lẫn nội dung, nếu vì một lý do nào đó, các bài viết quá nặng, nó sẽ làm chậm tốc độ load của các trang Label và Archive này. Vì thế một giải pháp làm tăng tốc độ load đó chính là chỉ cho phép các bài viết hiển thị tiêu đề.

Hình minh họa:

Trước khi thực hiện thủ thuật

sau khi thực hiện thủ thuật với các trang Label và Archive

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào Chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Tìm đọan code bên dưới :

<b:include data='post' name='post'/>

6. Thay thế nó bằng đọan code bên dưới:

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

- Chú ý :

+ Code màu đỏ là code không cho tiện ích chạy trên trang chủ.
+ Code màu xanh là code không cho tiện ích chạy ở bài viết.
+ Muốn tiện ích chạy luôn đối với trang chủ thì bạn bỏ code màu đỏ đi.

7. Save template.

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

More about →

Ẩn/Hiện tab nội dung (Version 2)

[FD's BlOg] - Đây là một thủ thuật cải tiến từ thủ thuật "Tạo tiện ích đóng mở tab nội dung" (thực hiện online trên website flooble.com). Bài viết này sẽ thực hiện lại thủ thuật đó trực tiếp trên blog của bạn mà không cần thông qua web trung gian.

Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/hide-show-tabcontent.html

Hình minh họa

☼ Bắt đầu thực hiện thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chèn đọan code bên dưới vào trước thẻ đóng </head>

<script language="javascript">

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else {
return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d =
getObject(divId);
if (lText == '+') { link.innerHTML = '-'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }


</script>

<style type="text/css">

.expandtitle{
background-color: #999;
color:#000;
padding-left:5px;
width: 300px;
}

.expandcontent{
background-color: #ccc;
color: #000;
width: 300px;
}

</style>

- Thay đổi độ rộng (width: 300px;) cho phù hợp với sidebar của bạn.

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

<div class="expandtitle" >
<table border="0" cellspacing="0" cellpadding="2" width="100%">

<tr>
<td> Title widget (tiêu đề của widget) </td>

<td align="right">
[<a title="show/hide" id="expand_link" href="javascript:
void(0);" onclick="toggle(this, 'expand');">&#8722;</a>]
</td>

</tr>

</table>
</div>


<div id="expand" style="padding: 3px;" class="expandcontent" >

{YOUR WIDGET CONTENT} (nội dung của widget)

</div>

<script language="javascript">toggle(getObject('expand_link'),
'expand');</script>

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

More about →

Chèn file flash vào blog + và một vài dịch vụ cho phép upload file flash

[FD's BlOg] - Đây là một trong những thủ thuật cơ bản để trang trí cho blog của bạn. Ví dụ như chèn banner flash cho header hoặc cho footer, hoặc chèn những quảng cáo dạng flash vào sidebar hay bất kì chỗ nào trong blog của bạn.

Như chúng ta đã biết, file flash có phần mở rộng là ".swf" cũng là một dạng file video, nhưng có kích thước nhỏ hơn nhiều so với các file video thông thường. Và nó là 1 sản phẩm của Macromedia . Và muốn xem nó trên máy tính của bạn thì máy bạn phải cài chương trình flash Player. Nhưng còn muốn nó chạy trên Web (blog) thì sao?

Muốn xem nó chạy trên web(blog) thì bạn phải thông qua 1 plugins của trình Flash Player từ 1 trang web. Và thông dụng nhất là sử dụng plugins của chính là sản xuất, đó là trang http://www.macromedia.com.

Và đây là đọan code cho phép file Flash hiển thị trên blog của bạn (muốn nó hiển thị ở nơi nào trong blog của bạn thì bạn chỉ việc tạo widget HTML/javascript rồi dán code bên dưới vào là xong):

<embed bgcolor="#FFFFFF" height="140" width="700" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://URLsite.com/yourfile.swf" type="application/x-shockwave-flash" >
</embed>

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

+ bgcolor="#FFFFFF" : màu nền nơi mà bạn muốn hiển thị.
+ height="140" width="700" : kích thước của nơi mà bạn muốn hiển thị file flash
+ http://URLsite.com/yourfile.swf : link file flash của bạn

☼ Và một điều nữa là : "làm sao để có link file flash ?", sau đây mình sẽ giới thiệu 8 dịch vụ cho phép bạn upload file flash của mình lên mạng ( Theo Blog proboydx)

1. SwfCabin.com
Đúng với tên gọi của trang web, đây là một "cabin" chuyên lưu trữ các file Flash nhanh gọn và tiện dụng. Trang này được nhiều người dùng trên Internet đánh giá cao.

2. SwfUpload.com
Ngoài SwfCabin, thì SwfUpload cũng là 1 dịch vụ khá tốt , xứng đáng là lựa chọn thứ 2 dành cho bạn.

3. MegaSwf.com
Không nổi trội như 2 dịch vụ trước vì hạn chế chỉ up được file có dung lượng tối đa 10MB , đây là trang web dành cho việc up các file Flash có dung lượng vừa.

4. FhqHosting.com
Tương tự MegaSwf , cho phép dung lượng tối đa 10MB.

5. ImageShack.us
Khá nổi tiếng với chức năng upload ảnh , ImageShack còn cho phép upload flash với dung lượng tối đa 5MB.

6. ImageCabin.com

7. ImageHosting.gr

8. Plunder.com
Plunder cho phép up mọi loại file, với dung lượng cho phép lên đến 100MB (hơn Mediafire ở chỗ hỗ trợ direct link)

More about →

Thông báo : Blog FD có thêm thêm khu vực `Blog tips Tutorials`

[FD's BlOg] - Nhằm giúp cho các bạn tiện theo dõi cũng như tìm kiếm các thủ thuật blog trên Blog FD, mình đã tạo thêm một khu vực "BlOg Tips Tutorials". Khu vực này sẽ chứa tất cả các thủ thuật blog có trong Blog FD, và được sắp xếp theo thứ tự bảng chữ cái, và phân theo từng mục, như thủ thuật cơ bản (Blog Tips), thủ thuật nâng cao (Advanced tips),...

Để vào khu vực này, bạn chỉ cần truy cập vào tab "Tutorials" ở trên menu chính (phía trên cùng của header)

Và sau đây là một số hình ảnh minh họa cho các bạn rõ.

FanDung - BlOg FD thông báo

More about →