Code đếm số lượt download

[FD's BlOg] - Lang thang trên mạng 1 hồi mình có tìm thấy 1 trang web hỗ trợ việc đếm số lượt download. Nên cũng post lên giới thiệu cho mọi người. Đây cũng là 1 dạng của bộ đếm số đếm số lượt click. Và thủ thuật này bạn sẽ phải thực hiện thủ công cho từng link download mà bạn muốn hiển thị.

Có thể xem demo ở ngay trên blog của mình.

Đây cũng chính là yêu cầu của 1 bạn mà đã nhờ mình từ lâu, nhưng giờ mình mới giải đáp được.

Hình ảnh minh họa:

Ở hình minh họa trên ta thấy có số lượt đếm là -1, đó là do file đó chưa được download lần nào.

☼ Và đây là code của thủ thuật :

<a href="http://dstats.net/download.php?file=http://yourhost.com/yourfile.rar" target="_blank">yourfile.rar</a> ( đã tải : <script src="http://dstats.net/dstatsjs.php?file=http://yourhost.com/yourfile.rar" type="text/javascript"></script><script type="text/javascript">document.write(dsCounter);</script> lần )

- Thay code màu xanh thành link file của bạn, ví dụ http://www.mediafire.com/?jezhyztiawz
- Code màu cam là tên hiển thị của file download.

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

Mẹo nhỏ cho việc loại bỏ khoảng trống khi ẩn phần date-header (ngày đăng)

[FD's BlOg] - Đây là 1 thủ thuật nhỏ thích hợp cho các bạn tự chỉnh sửa template cho blog từ những template mà blogger cung cấp sẵn. date-header là phần hiển thị ngày đăng của bài viết ở ngay trên tiêu đề bài viết, trước kia mình có giới thiệu thủ thuật làm ẩn nó đi, tuy nhiên khi nó ẩn đi vẫn để lại 1 khoảng trống nhỏ ở phía trên tiêu đề bài viết. Ở bài này mình sẽ hướng dẫn các bạn loại bỏ nó đi.

Thông thường, ở trang chủ (homepage) thì phần date-header chỉ hiển thị ở ngay trên bài viết mới nhất trong ngày đó, còn trong trang bài viết thì nó luôn hiển thị ở phía trên tiêu đề bài viết.


Trước kia mình có giới thiệu cách ẩn nó là dùng lệnh display:none; để làm ẩn nó, như code bên dưới :

h2.date-header {
font-weight:bold;
text-transform:uppercase;
letter-spacing:.1em;
font-size:90%;
color:#F00;
display: none;

Và ta có kết quả như bên dưới:


Tuy nhiên dùng cách này để làm ẩn nó đi thì sẽ tạo ra 1 khoảng trống nhỏ, các bạn so sánh hình trên với hình bên dưới này sẽ rõ.

Khoảng trống này sẽ làm cho việc hiển thị bài viết ở trang chủ không được đồng nhất. Ví dụ như thủ thuật "Hiển thị bài viết ngoài trang chủ giống Bo-blog (dạng list)" (các bạn có thể xem thủ thuật này ở đây), thủ thuật này mình giới thiệu cách modify lại việc hiển thị các bài viết ở trang chủ, lần trước khi test ở blogtest của mình, mình không thấy được khoảng trống của phần date-header tạo ra, nên thủ thuật chưa hoàn chỉnh (có các khoảng trống giữa các list), vì thế các bạn có thể sử dụng thủ thuật ở bài viết này để khắc phục cho khuyết điểm đó.

☼ Để thực hiện điều này, các bạn chỉ cần thực hiện vài thao tác đơn giản bên dưới:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code của phần date-header , nó sẽ tương tự như bên dưới :

<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>

5. Để loại bỏ khoảng trống do nó gây ra, cách đơn giản là loại bỏ nó đi, có 2 cách loại bỏ, 1 là bạn thêm đoạn code để biến nó thành đoạn text chú thích, 2 là xóa hẳn code của nó đi, ở đây mình sẽ dùng cách 1, cách này an toàn hơn (có thể khôi phục lại được). Để thực hiện các bạn chỉ việc thêm đoạn code màu đỏ vào code của phần date-header như bên dưới:

<!--
<b:if cond='data:post.dateHeader'>
<span style='padding: 0 40px 0 0; text-align: right;'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</span>
</b:if>
-->

6. Save template.

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

Pro TabNews mang phong cách của VnExpress

[FDs BlOg] - Bài viết này mình lại giới thiệu cho các bạn 1 TabNews hiển thị các bài viết mới nhất theo từng nhãn theo phong cách của VnExpress. Điểm nổi bật của thủ thuật này là việc hiển thị random các bài viết theo nhãn mỗi khi reload trang hoặc chuyển trang, thêm vào đó thành Header của TabNews sẽ thay đổi tương ứng với Nhãn được hiển thị bài viết, như vậy sẽ dễ dàng hơn cho người đọc nhận biết được nhãn (chuyện mục)mình đang xem.

Xem demo: LIVE DEMO

Ở TabNews sẽ gồm có các nhãn khác nhau có chung điểm nào đó, ví dụ như ta có các nhãn như :"Ảnh vui, Xe độ, Nghe nhạc,..." có chung 1 điểm là Thư Giãn chẳng hạn. Ngòai ra TabNews còn có phần SumPost là title cho các link liên kết

Hình ảnh minh họa:

- Ngoài ra ở phần Header của TabNews sẽ thay đổi theo đúng với nhãn được hiển thị bài viết (xem hình minh họa bên dưới)

Đối với nhãn "Chuyện Lạ"

Đối với nhãn "Thư Giãn"

☼ Các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.fl {float:left;}
.fr {float:right;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:500px;}
.folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}

.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px -23px;}


.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:160px;}
.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}

.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}

.folder-content li {
padding-left:6px;
background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;
background-position: 0 7px;
}

.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

&lt;script type='text/javascript'&gt;
rdlabels = new Array(3);

//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\&lt;script\&gt;label = 'Chuyen%20La'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\&lt;script\&gt;label = 'Xe'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\&lt;script\&gt;label = 'Film'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;";

//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\&lt;script\&gt;label = 'Relax'\;\&lt;/script\&gt;\&lt;div class='folder-activeleft fl'\&gt;\&lt;/div\&gt;\&lt;div class='folder-active fl'\&gt;\&lt;a class='link-folder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\&gt;Thư Giãn\&lt;/a\&gt;\&lt;/div\&gt;\&lt;div class='folder-activeright fl'\&gt;\&lt;/div\&gt;\&lt;div class='subfolder fl'\&gt;\&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\&gt;Chuyện Lạ\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\&gt;Điện Ảnh\&lt;/a\&gt; | \&lt;a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\&gt;Xe Độ\&lt;/a\&gt;\&lt;/div\&gt;";

index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

- Thay đổi tên nhãn và link liên kết của nhãn lại cho phù hợp với blog của bạn.

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

<div class="folder">

<div class="folder-title">

<script type='text/javascript'>
document.write(rdlabels[index]);
</script>

<div class="folder-titleright fr"></div>

</div>


<div class="folder-content" id="tdHomeFolder2">

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

☼ Cập nhật yêu cầu của bạn 9xhot:

- Thay vì Header của TabNews sẽ thay đổi mỗi khi Load trang theo đúng như bài viết hiển thị thì ở yêu cầu này phần Header sẽ ko thay đổi, và thay vào đó ta sẽ thêm 1 phần gọi là chuyên mục chính (parentMenu), với các Nhãn được hiển thị sẽ là các chuyên mục phụ (subMenu). Với yêu cầu này thì thủ thuật ở trên sẽ trở nên đơn giản hơn 1 chút.

- Xem demo : LIVE DEMO

Hình minh họa:

☼ Các bước thực hiện cũng tương tự như trên:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
.fl {float:left;}
.fr {float:right;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}
.folder-content {background-color:#ffffff;}
.other-folder {width:100%;}
.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}
.folder, .folder-title, .folder-bottom {width:500px;}
.folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}

.folder {margin-bottom:5px;}
.folder-title {height: 21px;}
.folder-active, .subfolder {height: 17px;}
.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px -23px;}


.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.folder-bottom {height:5px;}
.folder-topnews {width:298px; padding-right:20px;}
.folder-othernews {width:160px;}
.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}
.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}
.subfolder {padding: 3px 5px 1px;}

.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}
.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}
.link-title:visited {color:#004080;}
.link-othernews {text-decoration:none; color:#000000;font:12px arial;}
.link-othernews:visited {color:#004080;}
.link-othernews:hover {text-decoration:underline;}
.folder-content p{margin-top:0px;margin-bottom:4px;}
.folder-content ul {list-style:none;margin:0;padding:0;}

.folder-content li {
padding-left:6px;
background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;
background-position: 0 7px;
}

.other-folder {margin-bottom:5px;}
.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}
.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}
.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

&lt;script type='text/javascript'&gt;
rdlabels = new Array(3);

//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\&lt;script\&gt;label = 'Chuyen%20La'\;\&lt;/script\&gt;";

//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\&lt;script\&gt;label = 'Xe'\;\&lt;/script\&gt;";

//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\&lt;script\&gt;label = 'Film'\;\&lt;/script\&gt;";

//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\&lt;script\&gt;label = 'Relax'\;\&lt;/script\&gt;";

index = Math.floor(Math.random() * rdlabels.length);
&lt;/script&gt;

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

<div class="folder">

<div class="folder-title">

<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="#">Giải Trí</a></div>

<div class="folder-activeright fl"></div>

<div class="subfolder fl">
<a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Relax?max-results=10">Thư Giãn</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10">Chuyện Lạ</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Film?max-results=10">Điện Ảnh</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Xe?max-results=10">Xe Độ</a>
</div>

<div class="folder-titleright fr"></div>

</div>

<div class="folder-content" id="tdHomeFolder2">

<script type="text/javascript">
document.write(rdlabels[index]);
</script>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;
summaryPost = 247;
sumPost = 147;
numposts = 6;
home_page = "http://fandung.com/";

</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>

</div>

<div class="folder-bottom"></div>

</div>

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

Modify Form Comment : Bài 12 - Một cách đơn giản để trang trí cho khung comment

[FD's BlOg] - Trước kia mình có hướng dẫn các bạn 1 thủ thuật trang trí khung comment với việc sử dụng CSS là chủ yếu, và thủ thuật có vẻ hơi phức tạp, và phục thuộc nhiều vào code của template. Hôm nay mình sẽ hướng dẫn 1 cách đơn giản hơn nhiều, đó là chèn thêm 1 thẻ div lên trên phần nội dung bài viết. Đây là thủ thuật mà mình đang dùng để trang trí cho nội dung các bài comment.

Bài viết này sẽ thiêng về phần hướng dẫn hơn là 1 bài thủ thuật hoàn chỉnh, tức là không chỉ với thao tác "copy paste" code là bạn có thể thực hiện thủ thuật. Để hoàn thiện và phù hợp với blog của bạn thì bạn cần phải bỏ 1 chút thời gian.

Ví dụ hình ảnh minh họa ở blog của mình :

Thủ thuật chính ở đây là ghép nối các hình nền của các thẻ div để tạo nên 1 hình nền hoàn chỉnh. Ví dụ như ở blog của mình, phần thẻ div chèn thêm lên trên phần nội dung comment (comment-body) sẽ có hình nền ko hoàn chỉnh, và ở phần nội dung bài viết thì dùng hình nền và các đường border, nhưng sẽ ko có đường border-top, sự thiếu hụt này sẽ được thẻ div mà ta thêm vào khắc phục.

Xem hình minh họa:

Ở hình minh họa các bạn sẽ thấy khi ra phần ráp lại ta sẽ được 1 khung hình trang trí hoàn chỉnh.

☼ Các bước thực hiện: (mình sẽ hướng dẫn như hình demo)
1. Đầu tiên ta sẽ tạo các đường viền & màu nề cho nội dung comment.

- Hình minh họa:

Khi chưa thực hiện:

Sau khu thực hiện :

Ở hình 2, nếu để ý các bạn sẽ thấy ko có đường border-top.

- Để thực hiện các bạn vào trong code template, tìm đoạn code CSS như bên dưới, lưu ý, (đối với 1 số template được convert lại thì code có thể khác)

.comment-body {
margin:0;
padding:5px;
}

Và thêm code được đánh dấu highlight như bên dưới:

.comment-body {
margin:0;
padding:5px;
background:#eee;
border-left:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

- Sau khi hoàn tất hãy nhớ save template lại.
2. Tạo 1 thẻ div rỗng với hình nền tương ứng với nền của nội dung comment.
- ví dụ như trong hình demo mình sử dụng hình bên dưới :


- Để dễ hình dung các bạn có thể hiểu là hình nền của thẻ div sẽ được thêm vào là đường border-top mà khung chứa nội dung comment còn thiếu, chỉ có khác là đường border-top là 1 đường thẳng đơn thuần, còn hình nền của thẻ div này có hơi cầu kì một chút.
- Cái chính ở bước này là bạn hãy tạo cho mình một hình nền thật phù hợp với khung của comment. Lưu ý tới độ rộng của khung comment để thiết kế hình nền cho khớp và hợp lý nhất.
- Để thực hiện bước 2 này, các bạn làm theo các bước như bên dưới:
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. tìm đoạn code như bên dưới :

<dd class='comment-body'>

e. thêm vào trước nó đoạn code bên dưới:

<div style='height:8px; background:url(link ảnh nền) no-repeat;'/>

- với 8px là chiều cao của hình nền mà bạn đã thiết kế.
f. save template.

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

Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn

[FD's BlOg] - Với tiêu chí tổng hợp thật nhiều style khác nhau cho tiện ích "Recent posts" hôm nay mình sẽ lại giới thiệu cho các bạn 1 style khác theo phong cách giống trang news.zing.vn . Style này giống với style giống trang vnExpress mà mình đã từng giới thiệu. Trong bài viết này mình có convert lại độ rộng để có thể hiển thị được trên blogspot.

Xem demo : LIVE DEMO

Hình ảnh minh họa :

- Ở style này có thêm 1 điểm khác với các style cũ, là mình có chèn phần "Mô tả bài viết (summaryPost)" vào các link ở cột topo_news dưới dạng title. Các bạn có thể xem hình bên dưới :

☼ Các bước thực hiện thủ thuật :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code CSS bên dưới vào trước thẻ đóng </head> (hoặc có thể chèn thẳng vào widget HTML/javascript chung với code chính của thủ thuật)

<style type="text/css">
*
{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news
{
width: 525px;
margin: 5px;
}

#main_content
{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news
{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news
{
width: 234px;
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img
{
border: 1px solid #CCC;
padding: 1px;
width:230px;
height:165px;
}
#main_content .top1_news .top1_news_title
{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a
{
font-size: 16px;
color: #002392;
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover
{
text-decoration: underline;
}
#main_content .top1_news p
{
text-align: justify;
}
#main_content .top1_news p a
{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img
{
vertical-align: bottom;
}
#main_content .top2_news
{
width: 95px;
float: left;
margin-left: 8px;
margin-top: 14px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image
{
background: url(http://farm3.static.flickr.com/2509/3847739522_6980c393a3_o.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}


#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(http://farm4.static.flickr.com/3574/3847739556_d334d7aa61_o.gif) repeat-x center

center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(http://farm4.static.flickr.com/3508/3846949497_b0f76c94df_o.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title
{
background: url(http://farm3.static.flickr.com/2598/3846949449_4c4b03d2fa_o.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(http://farm3.static.flickr.com/2532/3847739582_8f41366c2f_o.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a
{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>

- Code màu cam : là độ rộng của ảnh lớn nhất
- Code màu đỏ : là độ rộng của 2 ảnh nhỏ hơn
- Code màu xanh : là độ rộng của các cột của tiện ích (gồm 3 cột : top1_news, top2_news, topo_news)
- Xem hình minh họa bên dưới :

- Lưu ý : thay đổi lại độ rộng của các cột để hiển thị tốt nhất trên blog của mình (kể cả các ảnh nền). Code trên chỉ là code mẫu để các bạn tham khảo. Ở code mẫu này mình cũng đã resize lại tương đối phù hợp rồi (độ rộng 525px;)

4. Save template.

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

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgnew = "http://farm4.static.flickr.com/3438/3847739416_077831a5c5_o.gif";

showRandomImg = true;

aBold = false;
summaryPost = 147; // Phần summary post sẽ hiển thị
numposts = 12; // số bài viết sẽ hiển thị
topoTitle = "Bài viết khác";
label = "Love"; // Nhãn cần hiển thị bài viết (nếu muốn hiển thị bài viết của cả blog thì không cần quan tâm dòng này)
home_page = "http://fandung.blogspot.com/"; //thay đổi thành địa chỉ URL blog của bạn

</script>
<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

- 2 dòng code màu đỏ bạn có thể thay đổi tùy thích (xem hình minh họa bên dưới)

☼ Để hiển thị các bài viết mới cho cả blog thì các bạn thay code bên dưới :

<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-label.js" type="text/javascript"></script>

thành code bên dưới:

<script src="http://data.fandung.com/blog/demo/Z-homepgae/z-recent-post.js" type="text/javascript"></script>

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

Tiện ích Recent Comments cho cho 1 bài viết cụ thể

[FD BlOg] - Chúng ta đã từng làm quen với tiện ích Recent Posts with icon của Anhvo (vietwebguide.com), hôm nay mình sẽ giới thiệu lại cho các bạn thủ thuật này, nhưng không phải áp dụng để hiển thị các comments mới của blog mà là các comments mới nhất của 1 bài viết cụ thể nào đó.

Thủ thuật này thích hợp cho việc theo dõi comment của 1 bài viết đặc biệt nào đó trong blog, ví dụ như blog của mình, khu vực "Yêu Cầu thủ thuật" thường xuyên có comment mới, vì thế để dễ dàng theo dõi, mình có thể tạo 1 widget recent comments riêng cho bài viết này.

Đây là hình minh họa mình đã thực hiện cho vài viết "Yêu cầu thủ thuật" :
Như đã nói ở trên, thủ thuật này mình sẽ dùng lại tiện ích "Recent comments with icon" của Anhvo , tuy nhiên mình có vài chỉnh sửa nhỏ.

☼ Để thực hiện thủ thuật này, trước hết bạn phải biết ID của 1 bài viết, để làm điều này, bạn thực hiện các bước như bên dưới :

1. Vào chỉnh sửa bài đăng
2. Nhấp chọn chỉnh sửa bài viết (bài viết mà bạn muốn hiển thị comment)

3. Và bạn có thể thấy ngay ID của bài viết ở ngay trên thanh Address

Trước khi đi vào thủ thuật mình cũng giới thiệu sơ cho các bạn về link RSS comment từng bài viết. Như ta đã biết, link RSS của comment cả blog sẽ có dạng như bên dưới :

http://fandung.blogspot.com/feeds/comments/default

và link RSS comment của 1 bài viết cụ thể sẽ là:

http://fandung.blogspot.com/feeds/1262266524725959138/comments/default

- Code màu đỏ chính là ID của viết (postID)
và đây là ảnh minh họa 1 trang RSS comment của 1 bài viết:

☼ Và cuối cùng là code của thủ thuật :
- Bạn chỉ việc tạo 1 widget HTML/javascript và dán code bên dưới vào là xong :

<script type="text/javascript">
var cm_mode = "icon";
var cm_num = 5; // số comment sẽ hiển thị
var cm_desc = 50; // số kí tự hiển thị của nội comment
var postID = "1262266524725959138"; // posID của bài viết
var homepage = "http://fandung.blogspot.com"; // địa chỉ URL blog của bạn

var cm_icon = new Array();
cm_icon['blogger'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/blogger.gif";
cm_icon['openid'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/openid.gif";
cm_icon['livej'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/lj.gif";
cm_icon['wp'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/wp.gif";
cm_icon['typekey'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/typkey.gif";
cm_icon['aim'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/aim.gif";
cm_icon['anon'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/anon.gif";
</script>
<script src="http://data.fandung.com/js/recentcomment-4post.js" type="text/javascript"></script>

- Thay đổi các code màu xanh lại cho thích hợp.

☼ Nếu muốn hiển thị các comment mới nhất cho cả blog thì chỉ cần thay code màu đỏ (link file recentcomment-4post.js) thành link bên dưới :

http://data.fandung.com/js/recentcomment-4allpost.js

Mở rộng từ tiện ích "Recent comments with icon" của Anhvo

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

Cách post code HTML, XML, Javascript ... vào bài viết với Greasemonkey

[FD's BlOg] - Mình đã từng giới thiệu với các bạn 2 cách khác nhau để chèn code vào bài viết (cách mã hóa (xem thêm) và cách dùng Javascript (xem thêm)), và bài viết này mình sẽ hướng dẫn thêm 1 cách khác để chèn code vào bài viết, đó là dùng tiện ích từ Greasemonkey. Với thủ thuật này ta sẽ thực hiện trực tiếp trên khung soạn thảo bài viết, và chỉ việc khối code cần post lại rồi click vào button là code được mã hóa. Thủ thuật này rất thích hợp cho các blog thủ thuật như mình.

Sau khi thực hiện, ở khung soạn thảo bài viết của trình duyệt Fire Fox trên máy tính của bạn sẽ có thêm 1 button như hình bên dưới:

Button này sẽ cho phép bạn mã hóa code ngay trong khung soạn thảo bài viết, lưu ý để chế độ soạn thảo là "Chỉnh sửa Html" để mã hóa code.
Khi bạn muốn mã hóa đoạn code nào đó, bạn chỉ việc khối chúng lại rồi click vào button "HTML ENCODE SELECTION" là được, ví dụ như hình minh họa bên dưới:

Trước khi thực hiện thủ thuật, mình xin lưu ý lại là : Muốn thực hiện thủ thuật này, bạn phải dùng trình duyệt web là Firefox. Do vậy, bạn cũng sẽ phải dùngFirefox để sọan thảo bài viết. Và 1 điều nữa là thủ thuật này chỉ hiển thị vớifirefox đã cài đặt tiện ích này.

Nếu bạn nào chưa có cài đặt Firefox thì có thể download ở đây về để cài vào máy của mình.

Bây giờ ta bắt đầu với các bước sau::
☼ Bước 1: Mở trình duyệt Firefox
☼ Bước 2 : Cài đặt Greasemonkey
- Các bạn nhấp vào link bên dưới :
https://addons.mozilla.org/en-US/firefox/addon/748
- Sau đó nhấn vào nút Add to Firefox để cài đặt Greasemonkey cho FireFox. Nếu bạn nào đã cài đặt Greasemonkey thì có thể bỏ qua bước này.(xem hình bên dưới)


- Sau khi cài đặt xong nó sẽ đòi bạn phải restart firefox, nhấn vào nút restart firefox để restart (như hình bên dưới)


Sau khi restart Firefox, một cửa sổ popup hiện lên thông báo "Đã cài đặt Greasemonkey" vào firefox , và bên dưới góc phải của Firefox sẽ có 1 biểu tượng nho nhỏ (như hình bên dưới)


☼ Bước 3 : Cài đặt thủ thuật
- Click vào link bên dưới :
http://userscripts.org/scripts/source/42696.user.js
- Sau khi click vào link của file JS trên, 1 cửa sổ Popup sẽ xuất hiện, và bạn chỉ việc click vào button "Install" để cài đặt (như hình bên dưới)



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