[FD's BlOg] - Ở thủ thuật trước, thủ thuật "Tạo chữ kí (ảnh) ứng với từng tác giả ở cuối bài viết" (xem thêm ở đây) bạn Ngân (NganKVN) hỏi mình là "có thể tạo cho chữ kí (ảnh) thành ảnh nền không?" và mình có comment trả lời và có đưa ra code. Nhưng code đó mình chưa test, và bây giờ, sau khi test xong thì mình post bài này lên.

Hình ảnh minh họa:

Ở thủ thuật trước, cơ bản của thủ thuật là thêm 1 hình (chữ kí) vào cuối mỗi bài viết tương ứng với từng tác giả (sử dụng lệnh "b:if"). Nhưng nếu ảnh đó là ảnh nền thì lại là 1 thủ thuật khác.

Với blog có 1 tác giả thì việc biến chữ kí của tác giả thành ảnh nền cho bài viết rất đơn giản, ta chỉ việc thêm code CSS background vào trong code CSS của id post là xong. hoặc có thể thay thế đọan code <data:post.body/> thì đọan code như bên dưới:

<div style='ảnh nền') no-repeat right top;'>
<data:post.body/>
</div>

Tuy nhiên với blog có nhiều thành viên thì ta không thể áp dụng được như vậy.

☼ Có 2 cách để thực hiện:
- 1 là không dùng thêm các id, class
- 2 là tạo thêm các id (như : Author1, Author2)

Và ta bắt đầu với từng cách:

1. Không dùng thêm các id :
- Vào trong code template (nhớ chọn mở rộng mẫu tiện ích)
- Tìm đọan code <data:post.body/> và thay thế nó bằng code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;Author1&quot;'>
<div style='background: url(link ảnh chữ kí của tác giả 1) no-repeat right top;'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:post.author == &quot;Author2&quot;'>
<div style='background: url(link ảnh chữ kí của tác giả 2) no-repeat right top;'>
<data:post.body/>
</div>
</b:if>

<b:else/>
<data:post.body/>
</b:if>

- Save template.

2. Dùng thêm các id, class:
- vào trong code template (nhớ chọn mở rộng mẫu tiện ích)
- Thêm các đọan code CSS bên dưới vào trước dòng ]]></b:skin>

.Author1 {
background: url(link chữ kí của tác giả 1) no-repeat bottom right;
}

.Author2 {
background: url(link chữ kí của tác giả 2) no-repeat bottom right;
}

- Thay đổi code màu xanh tương ứng với vị trí mà bạn muốn hiển thị trong bài viết.

+ bottom right : góc phải bên dưới
+ top right : góc fải phía trên
+ top left : góc trái phía trên
+ bottom left : góc trái bên dưới

- Tiếp tục tìm đọan code <data:post.body/> và thay thế nó bằng code bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;Author1&quot;'>
<div class='Author1'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:post.author == &quot;Author2&quot;'>
<div class='Author2'>
<data:post.body/>
</div>
</b:if>

<b:else/>
<data:post.body/>
</b:if>

- Lưu ý: code màu đỏ là tên của tác giả, các bạn phải điền cho chính xác, và nhớ mã hóa các kí tự đặc biệt có trong tên tác giả, ví dụ : ", ', <, >

- Save template là xong.

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

Read more…

[FD's BlOg] - Bài viết giới thiệu cho các bạn cách tạo tiện ích "bài viết xem nhiều nhất (popular posts) " cho blog của mình. Với các tiện ích được cung cấp bới foxrecord.com và feedjit.com

1. FeedJit.com
- Đầu tiên các bạn truy cập vào trang này : http://feedjit.com/join
- Xuống phía dưới cùng chọn Get a JS widget! như hình bên dưới:


- Sau đó di chuyển tới mục Page Popularity và nhấn First Customize it! để thay đổi style của wiget theo ý mình. (xem hình bên dưới)


- Sau khi thay đổi xong nhấn Add to Blogger blog, rồi nhấn Thêm tiện ích để hòan tất cài đặt.


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


2. FoxRecord.com
- Đăng nhập vào trang chủ http://foxrecord.com
- Chọn phần Top popular pages widget và nhấn Add to Blogger để thêm tiện ích vào blog (xem hình bên dưới)


- Và cuối cùng là nhấn "Thêm tịên ích" để kết thúc cài đặt

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

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

Read more…

[FD's BlOg] - Ở thủ thuật trước, mình có giới thiệu cách để post code vào bài viết, và trang trí cho khung chứa code với CSS (xem thêm ở đây). Bài viết này cũng sẽ hướng dẫn cách chèn code vào bài viết nhưng pro hơn và dễ dàng hơn.

Ở thủ thuật này ta sẽ sử dụng kết hợp giữa javasscript và CSS để post code vào bài viết và trang trí nó. Với CSS là để trang trí, còn Java là để hiển thị code .

Với thủ thuật trước, khi ta muốn post code vào bài viết, ta phải mã hóa những kí tự đặc biệt của code thành những chuỗi thay thế. Nhưng ở thủ thuật này, ta sẽ không phải mã hóa chúng, mà chèn thẳng chúng vào trong bài viết luôn. Và thủ thuật này cũng hỗ trợ hầu hết các ngôn ngữ như : HTML, Java, Javascript, SQL, php...

Do việc hỗ trợ tự động nhận dạng các ngôn ngữ, nên code của bạn khi chèn vào bài viết phải chính xác, nếu không nó sẽ báo lỗi.

Thủ thuật hỗ trợ 2 thẻ là <pre> và thẻ <textarea> để chèn code vào. Sử dụng 2 thẻ đều cho kết quả như nhau.

Hình ảnh minh họa :

Ta thấy trong hình, các class, id, title... đều được làm nổi bật (có màu xanh), và ở các ngôn ngữ khác thì nó sẽ hiển thị khác.

Do có sử dụng javascript, nên khi hiện thị bài viết nó phải load, và lúc load code nó sẽ trông giống như bên dưới:

☼ 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 HMTL)
4. Chèn đọan code Javascript bên dưới vào trước thẻ đóng </head>

<link href='http://data.fandung.com/js/codeview/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://data.fandung.com/js/codeview/shCore.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCpp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCSharp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushCss.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushDelphi.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushJava.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushJScript.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushPhp.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushPython.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushSql.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushVb.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushXml.js' type='text/javascript'/>
<script src='http://data.fandung.com/js/codeview/shBrushRuby.js' type='text/javascript'/>

5. Tiếp tục xuống phía dưới chèn thêm đọan code Javascript bên dưới vào trước thẻ đóng </body>

<script language='javascript'>
function start() {
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false);
}
window.onload = start;
</script>

6. Save template.

7. Để post code vào bài viết, bạn sử dụng 2 cách bên dưới

a. Dùng thẻ <pre>

<pre name="code" class="c-sharp">

Dán code ở đây (code nguyên mẫu)

</pre>

b. Dùng thẻ <textarea>

<textarea name="code" class="c#" cols="60" rows="10">

Dán code ở đây (code nguyên mẫu)

</textarea>

Nguồn internet

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

Read more…