How to add code in your post + modify code field

[FD's BlOg] - Đây là một trong những thủ thật cơ bản mà các trang thủ thuật khác ở việt nam đều đã có đăng, tuy nhiên ở blog của mình thì chưa có bài hướng dẫn thủ thuật này. Nhân đây có người hỏi về thủ thuật này, mình cũng xin post lại.

Ở bài viết mình sẽ nói về 2 vấn đề : 1 là làm thế nào để chèn code vào bài viết, thứ 2 là trang trí cho khung hiển thị.

A. Chèn code vào bài viết:
- Như chúng ta đã biết, khung sọan thảo của blogspot cho phép hiển thị hầu hết code HTML, vì thế khi bạn chèn code vào bài viết thì code đó cũng sẽ được hiển thị.
- Để có thể hiển thị được chúng ngòai layout, bạn phải chuyển 1 vài kí tự đặc biệt trong mã code HTML thành các kí tự khác.
- Về cơ bản, ta chỉ cần thay đổi 2 kí tự đặc biệt là < và > , xem bên dưới:

- Kí tự : < sẽ chuyển thành &lt;
- Kí tự : > sẽ chuyển thành &gt;

- Đó là cách thực hiện bằng tay khi code của bạn chỉ có vài dòng, nhưng đối với những đọan code dài thì sao, ta không thể ngồi đó mày thay thế tất cả chúng, rất tốn thời gian.
- Để khắc phục điều này, đã có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.
- Các bạn vào địa chỉ này : http://blogcrowds.com/resources/parse_html.php, giao diện sẽ trông như bên dưới:


- dán code mà bạn cần chuyển đổi vào khung rồi nhấn Parse sau đó ta sẽ được code đã được mã hóa ở khung 1, nếu muốn mã hóa tiếp code khác, bạn chèn code vào khung thứ 2 (lưu ý: fải là khung thứ 2) (xem hình minh họa)


B. Trang trí cho khung hiển thị code :
- Để làm điều này, bạn chỉ cần tạo 1 class riêng cho code, ví dụ ta sẽ tạo class "codeview" và đặt code vào trong thẻ div, như bên dưới:

<div class="codeview">
{dán code đã mã hóa vào đây}
</div>

- Tất nhiên để làm được bạn phải chèn code CSS của class "codeview" vào trong code của template. Các bạn vào bố cục » vào chỉnh sửa code HTML » và chèn code của các style bên dưới lên trên dòng code ]]></b:skin>

- Sau đây mình sẽ giới thiệu các kiểu khác nhau cho các bạn:
1. Style 1:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3415/3555944482_d0433d99fe_o.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Hình minh họa:

2. Style 2:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 20px solid #CECECE;
}

Hình minh họa:

3. Style 3:

Code CSS:

.codeviews {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3575/3555191103_7ce001f502_o.gif) no-repeat right top;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}

Hình minh họa:

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

Read more…

Pageviews counter for Blogspot to count how many times any post has been read

[FD's BlOg] - Như ta đã biết, blogger không hỗ trợ php, vì thế việc đếm lượt truy cập phải thực hiện gián tiếp từ 1 sever khác, và cũng áp dụng thủ thuật này, bài viết này mình sẽ giới thiệu cho các bạn bộ đếm "số lượt xem bài viết" dùng php qua 1 web trung gian.

Xem bản cập nhật mới nhất của thủ thuật ở đây

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

Để thực hiện thủ thuật này, bạn chỉ việc copy đọan code của nó và dán vào nơi mà muốn hiển thị.

☼ Bắt đầu:
1. Đăng nhập blog
2. Vào ố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HMTL)
4. Chọn mở rộng mẫu tiện ích (expand widget template)
5. Xác định nơi bạn muốn hiển thị bộ đếm, ở đây mình sẽ giới thiệu cho các bạn 3 vị trí:

a. Bên dưới tiêu đề bài viết:
- các bạn tìm đọan code sau :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<div id='title_post'> <a expr:href='data:post.url'><data:post.title/></a></div>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

{CODE Của thủ thuật dán ở đây}

b. Bên dưới bài viết:
- các bạn tìm đọan code sau :

<data:post.body/>
{CODE Của thủ thuật dán ở đây}

c. Bên dưới footer của bài viết:
- các bạn tìm đọan code sau :

<div class='post-footer-line post-footer-line-1'>
{CODE Của thủ thuật dán ở đây}

6. Sau khi xác định được nơi muốn đặt code, ta dán code bên dưới vào :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='hit-counter'>
&lt;a href=&#39;http://YOURBLOG.blogspot.com&#39; rel=&#39;follow&#39;&gt;
<script src='http://blogspot.100webspace.net/pageviews.php' type='text/javascript'/> &lt;/a&gt;
</div></b:if>

- Lưu ý: chỉ nên sửa code màu xanh, không nên sửa code để cho tiện ích hiện thị ở trang chủ, (đã test - thủ thuật hiển thị không chính xác trên trang chủ)

7. Save template.

Nguồn csharpdotnetfreak

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

Read more…

Rating Widget by Outbrain

[FD's BlOg] - Đây là tiện ích được cung cấp bởi website www.outbrain.com tiện ích cho phép người xem đánh giá bài viết của bạn qua 5 mức : Bad, Boring, Ok, Good, Exellent tương ứng với 5 sao. Một tiện ích "đánh giá bài viết" sẽ giúp cho người đọc dễ dàng tìm được những bài viết hay trên blog của bạn.

Hình ảnh minh họa:

Đầu tiên bạn truy cập vào đây: http://www.outbrain.com/get/ratings và sẽ trông như hình bên dưới:

Và nhấn vào biểu tượng blogger để tiếp tục: sẽ xuất qua trang mới như bên dưới

Nhấp vào "Get Widget Now!" để tiếp tục. sau đó nhấn "Thêm tiện ích" để kết thúc việc cài đặt (như hình bên dưới)


Như vậy đã hòan thành, chúc các bạn thành công.

Read more…