tháng 6 2011 ~ khoa học TV

Thứ Năm, 23 tháng 6, 2011

[fandung.com] - Thông báo ngày 20/06/2011

Hiện tại BlOg FD đang có 1 số việc, nó cũng không quan trọng lắm, nhưng hôm nay tự nhiên các sự việc này nó dồn lại 1 ngày nên mình cũng nhân tiện gộp chung chúng lại thông báo cho mọi người biết. Cụ thể gồm 3 việc cần thông báo như sau:

1. Host data.fandung.com hiện tại đã hết bandwidth (10GB), vì thế mà tất cả các dữ liệu trên host tạm thời không còn sử dụng được. Mình sẽ khắc phục trong vòng 1 hoặc 2 ngày tới. Do chỉ để lưu trữ file js và các demo nên host mình phải nói là host củ chuối, sắp tới mình sẽ nâng cấp băng thông lên thành 20G, hy vọng đủ. Việc hết băng thông như thế này mình cũng thường hay lưu ý các bạn khi chia sẻ file js hoặc các hình ảnh. Vì thế nếu ai kĩ tính (lưu file js và hình ảnh qua host khác) sẽ không gặp sự cố với host của mình.

2. Sắp tới mình sẽ cho ra mắt các bạn thủ thuật mới chưa từng được xuất hiện, đó là thủ thuật "Recent comment với ảnh đại điện (profile Photo)" giống như của wordpress. Hiện tại mình đã test gần xong, bữa nay tính test tiếp cho hoàn thiện nhưng ngặt nỗi là host của mình hết băng thông, nên bữa nay được "giải lao" 1 đêm. Mình sẽ nói sơ về thủ thuật này, chủ yếu ảnh hiển thị sẽ là của Blogger, các tác giả thuộc các nhóm khác sẽ có ảnh đại diện chung. Giống như trong phần comment của 1 bài viết vậy.

3. Cái cuối cùng mình muốn thông báo là về việc liên kết link. Do được 1 số bạn nhắc nhở nên mình đã del 1 số liên kết bị die. Và mình muốn nói thêm nữa là : Blog của mình chỉ liên kết với các blog có đặt liên kết ở trang chủ. Nếu đột xuất mình ghé thăm 1 liên kết nào đó mà không có liên kết của mình ở trang chủ, mình sẽ remove ra khỏi list của mình ngay mà không cần báo trước.

Fandung - BlOg FD

[Chia sẻ] - Tạo hộp thoại thông báo cho blog

22:50 B-basic, Thu Thuat Blog No comments

Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.
Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó.

Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.

Hình ảnh minh họa từ blog của mình:

- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widget HTML/Javascript và dán code bên dưới vào :

- Đầu tiên là việc chỉnh sửa lại code CSS:
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.

- Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :

thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';

Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :

thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';

Như vậy đã hoàn thành. Chúc các bạn thành công.

Mega Dropdown Menu CSS

08:20 B-menu, Thu Thuat Blog No comments

Có 1 số bạn yêu cầu muốn mình share cái menu hiện tại mình đang dùng (mang phong cách của trang Zing), nhưng bây giờ mình mới chia sẻ được. Nói thật, nếu chia sẻ thì mình chỉ cần đưa ngay đoạn code cho các bạn là xong, chứ không phải đợi tới bây giờ mình mới chia sẻ, nhưng có 1 điều là khi chia sẻ rồi thì hướng dẫn các bạn sao đây, thực sự menu mình đang dùng là lấy source gần như từ của trang news.zing.vn, vì thế mà nó hơi rắc rối, ngay chính mình khi lấy về dùng cũng phải nhọc nhằn chỉnh sửa lại để dùng.

Để đơn giản cho các bạn sử dụng cũng như cho mình viết bài hướng dẫn, nên mình đã quyết định ngồi code lại cái menu này. Vẫn lấy phong cách của Zing, nhưng code thì mình viết lại hoàn toàn.

Ưu điểm của Mega Dropdown này là nó chỉ dùng CSS, nên khá nhẹ, và 1 cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. Bởi thế nó mới được gọi là Mega Menu. Và nhược điểm của menu này là không hiển thị được submenu trên IE6. Thật ra nhược điểm này không phải là nhược điểm của thủ thuật mà là của chính blogger, hình như blogger nó không hỗ trợ file htc. Ngay cả host demo của mình cũng không chạy được, nhưng mình test offline trên máy tính thì rất ok.

Vì thế nếu bạn nào muốn dùng cái menu này thì sẽ phải chấp nhận việc nó không sổ submenu trên IE6. Còn từ IE7 trở nên thì vẫn chạy bình thường.

Các bạn có thể xem DEMO ở đây.

Hình ảnh minh họa

A. Sau đây là code của thủ thuật:
- Có 2 cách để thêm vào blog, 1 là các bạn chèn tất cả code của nó vào 1 widget HTML/javascript, 2 là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn có thể add vào template, ngay trước dòng code </head>
- và đây là code của thủ thuật:

Code CSS:

- Lưu ý: các file hình ảnh có trong code CSS các bạn nên download về và up lên host lưu trữ ảnh nào đó để sử dụng, tránh trường hợp host của mình gặp sự cố.

Code HTML:

<div id="fdmega-menu">
<ul id="topnav">
<li class="mg-home"><a href="#"></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
<li><a href="#">Menu 3</a>
<div class="sub ms3">
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
</div>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<div class="sub ms5">
<b>James Gallagher</b><br/>
<span style="font-size:90%"><i>Health reporter, BBC News</i></span>
<p>Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p>
<p>The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p>
<p>They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p>
<span style="font-size:90%"><i>Trich BBC</i></span>
</div>
</li>
</ul>
</div>

B. Sau đây là 1 vài hướng dẫn chỉnh sửa code HTML cũng như CSS
- Sau khi chèn code vào, các bạn sẽ gặp trường hợp như thế này:

- Việc bị lệch này là do vị trí của menu chính và menu phụ không khớp với nhau. Không khớp với nhau có nhiều lý do, ví dụ bạn thay đổi tên menu, độ rộng của menu chính sẽ thay đổi, dẫn tới menu phụ bị lệch.
- Để chỉnh vị trí của menu phụ với menu chính các bạn xem code CSS bên dưới:

...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...

- ở code trên ta có 5 class là ms1, ms2,... ms5 tương ứng với các chính menu1, menu2,... menu5 (như trong demo)
- Các class này để tùy chỉnh vị trí, độ rộng , màu nền ... của các vùng hiển thị của submenu.
- Lệnh left:118px; (của class ms2) chính là lệnh để tùy chỉnh vị trí của submenu so với biên ngang bên trái của menu chính. Ví dụ như hình bên dưới :

- Sau khi điều chỉnh vị trí các submenu xong, ta sẽ đi vào phần tùy chỉnh nội dung bên trong của các submenu. Ở đây ta sẽ lấy ví dụ submenu 2.
- Đây là code HTML của nó :

...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ta thấy thẻ <div class="sub ms2"> chính là khu vực hiển thị của submenu, trong thẻ div này sẽ có tiếp 3 thẻ <div class="cont cs21"> , 3 thẻ div này chính là 3 cột nhỏ trong submenu2. Như hình bên dưới:

- ta thấy trong code CSS có đoạn như thế này :

...
...
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
...
...

- ul#topnav li div.sub div.cs21 chính là class để tùy chỉnh độ rộng của các cột trong submenu2. Ở trên mình chỉ thêm class cho 2 submenu2 và submenu3, nếu muốn các bạn có thể thêm tương tự như :

...
...
ul#topnav li div.sub div.cs11 {width:135px;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
ul#topnav li div.sub div.cs41 {width:80px;}
ul#topnav li div.sub div.cs51 {width:190px;}
...
...

- Ở trong demo, mình cho các cột trong submenu2 và submenu3 bằng nhau, nêu chỉ có class là cs21 và cs31, nếu muốn các cột có độ rộng khác nhau thì các bạn có thể tùy chỉnh lại code code. Ví dụ như mình sẽ tùy chỉnh lại của submenu2, mỗi cột có độ rộng khác nhau, như bên dưới:

...
...
ul#topnav li div.sub div.cs21 {width:135px;}
ul#topnav li div.sub div.cs22 {width:90px;}
ul#topnav li div.sub div.cs23 {width:120px;}
...
...

- tức là từ việc chỉ sử dụng chung 1 class cs21 cho tất cả các cột thì mình sẽ tùy chỉnh lại, mỗi cột có 1 class riêng (cs21, cs22, cs23). Và code HTML của nó sẽ là như thế này :

...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs22">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs23">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...

- Ngoài ra nếu các bạn muốn thêm hình nền riêng cho mỗi sub thì cũng có thể thêm vào, ví dụ như trong demo ta có hình nền của submenu5, và bên dưới là code CSS mà các bạn có thể tùy chỉnh để thêm hình nền vào:

- các bạn thêm hình nền tương tự như class ms5 (của submenu5).
- Ở trên các class ms1 và ms4 mình để trống do các menu4 và menu1 trong demo không có submenu, khi có submenu thì các bạn thêm vào giá trị độ rộng và vị trí cách biên ngang cho các submenu này.

Hy vọng các bạn có thể thực hiện nó với các hướng dẫn cơ bản trên.
Menu mega dropdown này trước khi còn test offline, mình cảm thấy rất tâm đắc với nó, nhưng khi add vô rồi thì lại gặp sự cố là blogger không support file htc, nên cũng hơi nản. Thậm chí mình còn có ý định sẽ không post bài này. Nhưng rồi nghĩ lại cũng sẽ có 1 số người cần nó, và rồi cũng cố ngồi trước máy tính để soạn bài hướng dẫn này.

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

[Update] - Tạo số đếm cho các comment của blogspot

08:56 B-basic, Thu Thuat Blog No comments

Hôm nay đang ngồi chỉnh sửa lại template, đột nhiên mình nhớ đến thủ thuật tạo số đếm cho các comment của blogspot. Trước kia, khi thủ thuật này xuất hiện, nó khá đơn giản, chỉ là 1 lệnh đếm. Vì thế mà nó có lỗi là khi sang trang khác (nếu số comment nhiều hơn 200) thì nó không đếm tiếp, mà bắt đầu lại bằng 0. Lúc đó cũng có người hỏi mình vấn đề này, và khi đó còn gà nên chưa khắc phục được. Hôm nay có 1 chút kiến thức sơ sơ nên mình sẽ khắc phục nó.

Như thường lệ khi làm các bài viết về comment của blogspot, mình luôn vào blog của bạn Ngân (blogtruyen.com) để xem, do blog của bạn Ngân theo hiện tại mình biết thì là blogspot ở Việt Nam có số lượng đọc giả nhiều nhất và comment nhiệt tình nhất. Chính vì thế mà việc tìm bài viết có số comment trên 200 là điều khá dễ dàng. Và khá bất ngờ là bạn Ngân đã khắc phục thủ thuật này rồi. Và mình có viewsource của blogtruyen để xem cách làm như thế nào. Rất may là khác với cách mình sắp giới thiệu cho mọi người, vì thế mà mình có thể an tâm giữ "bản quyền" code cho bạn Ngân.

Mình cũng ít lang thang các blog, nên không biết có ai post bài này chưa, nếu có thì cũng xem như là lưu trữ trên BlOg FD thôi. Còn chưa thì coi như có thêm 1 bài nữa cho các bạn tham khảo. Còn việc update và sử dụng thủ thuật này mình nghĩ cũng sẽ có ít bạn dùng, do số blog có comment trên 200cm/bài viết cũng không nhiều (ngay cả blog của mình, hình như cũng chỉ có 2 bài). Nhưng mà thôi, ta cứ update lên, biết đâu nhỡ có bài hơn 200 comment thì sao :D.

Để khắc phục, các bạn nên xem lại bài viết này : Tạo số đếm cho các comment của blogspot

Xem demo trực tiếp : DEMO

Hình ảnh minh họa:

A. Để update thủ thuật, đầu tiên các bạn chèn đoạn code javascript bên dưới vào trước thẻ đóng </head> trong code template.

- Thực ra đoạn code này có thể chèn trong vị trí ở comment, nhưng mình đưa nó vô phần head cũng có lý do. Code này là để lấy giá trị của 1 biến nào đó trong link liên kết, do có thể dùng chung nên mình để nó ở head, sau này có get giá trị nào đó từ link không cần phải chèn lại.
- Ví dụ link :
http://www.fandung.com/?v=full&page=2
ở đây ta có 2 biến là v có giá trị full và page có giá trị là 2

B. Sau khi thực hiện xong bước A, ta save template lại và chọn "mở rộng mẫu tiện ích" để update thủ thuật.
- Trong bài trước (xem ở đây) ta sẽ update code ở bước 7.
- Ở bước 7 có 2 đoạn code javascript, và ta sẽ thay đổi đoạn code đầu tiên.

Code cũ :

Thay mới:

C. Save template lại.

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

[Update] - Modify Form comment : Bài 13 - Thiết kế lại giao diện của comment

10:07 B-advance, Thu Thuat Blog No comments

Thủ thuật này mình thực hiện theo yêu cầu của bạn Yolks.
Đây là thủ thuật thứ 13 về comment cho blogspot. Thủ thuật này sẽ giúp các bạn tạo mới lại giao diện cho khu vực hiển thị comment của blogspot.
Một lưu ý nhỏ khi thực hiện thủ thuật : do thủ thuật can thiệp khá nhiều vào code của template, nên tránh gặp sự cố đáng tiếc, các bạn nên download template của blog về máy trước khi thực hiện thủ thuật.

Sau đây là 1 số hình mình họa cho thủ thuật:

Hình minh họa cho yêu cầu

Hình mình đã test trên blog

A. Đầu tiên đê thực hiện thủ thuật, bạn phải thay đổi 1 số cài đặt như bên dưới
- Vào phần cài đặt
- Chọn mục nhận xét
- Kéo xuống dưới phần "Định dấu thời gian của các nhận xét" và chọn như hình bên dưới

- Lưu lại giá trị cài đặt.

B. Sau đây là 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 mở rộng mẫu tiện ích
4. Tìm đến đoạn code CSS như bên dưới :

#comments dl dt {
...
...
}

5. Thay thế và thêm mới bằng đoạn code CSS bên dưới:

#comments dl dt {
font-weight: bold;
margin-top: 0;
padding-left: 4px;
}
#comments dl dt span.cmlink {font-weight:normal!important;}
#comments dl dt p
{font-size:85%;font-weight:normal!important;padding: 0; margin: 0;}

/* Modify Comment layout */

#comments-block.avatar-comment-indent {margin-left:0px!important;}
.comment-items {
background:#efefef;
border:1px solid #c3c3c3;
margin-bottom:5px;
padding:5px;
}
.comment-items-info {padding-left: 45px;}
.avatar-image-container {
position:none!important;
left:12px!important;
}
.comment-items-body {
margin-top: 20px;
position: relative;
background: white;
border: 1px solid #C3C3C3;
padding:3px 7px;
}
.comment-items-body .triangle {
width: 19px;
height: 18px;
display: block;
position: absolute;
left: 50px;
top: -18px;
background: url(http://data.fandung.com/img/fd-cm_triangle.gif);
}

.avatar-image-container img{width:40px;height:40px;padding:1px;}

/* END Modify Comment Layout */

- Chú ý : nếu blog của bạn nào ko có đoạn code ở bước 4 thì vẫn thêm đoạn code ở bước 5 như bình thường, vị trí thêm bạn có thể đặt nó trước đoạn code bên dưới :

.deleted-comment {
font-style:italic;
color:gray;
}

6. Tiếp tục tìm trong code template đoạn code như bên dưới :

7. Thay tất cả chúng bằng code bên dưới :

8. Save Template.

Update : Tạo ảnh nền riêng biệt cho comment của ADMIN

Hình ảnh minh họa:

Để update, các bạn thực hiện các bước như bên dưới:
1. Thêm code CSS vào code ở bước 5:

.comment-items-body-admin{
margin-top: 20px;
position: relative;
padding:3px 7px;
background: #d3f0f8;
border: 1px solid #98ccda!important;
}

.comment-items-body-admin .triangle {
width: 19px;
height: 18px;
display: block;
position: absolute;
left: 50px;
top: -18px;
background: url(http://data.fandung.com/img/fd-cm_triangle-admin.gif);
}

2. Tìm code như bên dưới ở bước 7:

3. Thay nó bằng code bên dưới:

<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/04749296400753058357"'>
<div class='comment-items-body-admin'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</div>

<b:else/>

<div class='comment-items-body'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</div>

</b:if>

- Ở code này, ta sẽ thấy 1 dãy số 04749296400753058357 , đây là số ID Profile của các bạn, thay nó bằng mã ID của bạn.

4. Save template.

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

Modify Form Comment : Bài 14 - Media Comment cho blogspot

09:17 B-advance, Thu Thuat Blog No comments

Mấy bữa nay do bận làm web cho người quen (làm bằng joomla thôi :D) nên mình OFF blog vài bữa, nay xả hởi xíu, dành chút thời gian cho blog. Hôm nay mình sẽ giới thiệu với các bạn cách nâng cấp comment cho blog. Hay nói các khác, giúp cho mình có thể post các dữ liệu media lên blog, ví dụ như : hình ảnh, film, nhạc ...

Thủ thuật này thực ra cũng đã được biết từ lâu với việc chèn bộ ảnh vui nhộn của yahoo vào comment. Do blogspot hạn chế dùng các thẻ HTML trong phần comment, nên chúng ta phải dùng các kí tự cho phép để thay thế các thẻ HTML. Ở bài này ta dùng nhiều đến các kí tự [ và ] để thay thế. Nó gần giống như các thẻ BBcode trong forum.

Thủ thuật này còn có 1 hạn chế (cũng có thể đây là lý do mà ít người dùng nó) đó là khi ta dùng các thẻ thay thế này, trong comment của các bài viết thì sẽ hiển thị được, nhưng ở các tiện ích Recent comment thì nó sẽ hiện ra 1 mớ code lộn xộn, đọc vô sẽ rất khó hiểu. Khắc phục vấn đề này cũng không quá khó, ta có thể loại bỏ các thẻ thay thế này để trả về nội dung dễ hiểu nhất. Mình sẽ hướng dẫn thủ thuật này sau.

Hình ảnh minh họa:

TEST trực tiếp tại đây : http://demo.fandung.com/2011/06/media-comment-for-blogspot.html

A. Sau đây là 1 số tính năng được thêm vào:

1. Cỡ chữ (size) [si]:
- cấu trúc thẻ như bên dưới:

[si="{kích thước chữ}"]{TEXT}[/si]

- Kích thước chữ : ví dụ như 12px, hay 3em ...

2. Màu chữ (color) [co]:
- cấu trúc thẻ như bên dưới:

[co="{mã màu}"]{TEXT}[/co]

- Mã màu : ví dụ như màu đỏ là #f00 hay red ...

3. Canh giữa văn bản (center) [ce]:
- cấu trúc thẻ như bên dưới:

[ce]{TEXT}[/ce]

4. Chạy chữ - mặc đinh là qua trái (marquee) [mar]:
- cấu trúc thẻ như bên dưới:

[mar]{TEXT}[/mar]

5. Chạy chữ - qua phải [mar+]:
- cấu trúc thẻ như bên dưới:

[mar+]{TEXT}[/mar+]

6. Chèn ảnh vào comment [img]:
- cấu trúc thẻ như bên dưới:

[img]{link ảnh}[/img]

7. Chèn video YouTube vào comment [youtube]:
- cấu trúc thẻ như bên dưới:

[youtube]{mã video}[/youtube]

- Ở đây mình đã mặc định kích thước của video là width='350' và height='229', để thay đổi nó bạn có thể tùy chỉnh kích thước của nó ở trong đoạn code javascript mà mình sẽ giới thiệu ở bên dưới.
- Mã video là gì??? ví dụ ta có link youtube như sau : http://www.youtube.com/watch?v=7IM5x3bD5Vg thì giá trị 7IM5x3bD5Vg chính là mã video.
- và như thế ta sẽ có thẻ youtube như sau :

[youtube]7IM5x3bD5Vg[/youtube]

8. Nhúng nhạc từ trang mp3.zing.vn [zmp3]
- cấu trúc thẻ như bên dưới:

[zmp3]{Mã nhúng vào forum được cung cấp từ trang mp3.zing.vn}[/zmp3]

- Ví dụ ta có 1 đoạn mã nhúng vào forum từ trang mp3.zing.vn như bên dưới:

[FLASH]http://static.mp3.zing.vn/skins/mp3_main/flash/player/mp3Player_skin1.swf?xmlurl=http://mp3.zing.vn/blog?MjAxMS8wNS8zMC81LzMvInagaMENTNhMTI1Y2VmMjMzYjQyY2IyODkwY2RkMjU4OTMwNTMdUngWeBXAzfFThdUng4ldUngaCBN4WeBdUngZWeBmd8RMawxqFdUngZyBUmUsICmnhdUng4d1IFWeBFqXx8Mg[/FLASH]

- các bạn chỉ cần thay thẻ [FLASH] thành [zmp3] là có thể hiển thị được trong nội dung comment.

9. Nhúng video từ trang clip.vn [clipvn]
- cấu trúc thẻ như bên dưới:

[clipvn]{Mã nhúng vào forum được cung cấp từ trang clip.vn}[/clipvn]

- Ví dụ ta có 1 đoạn mã nhúng vào forum từ trang clip.vn như bên dưới:

[Flash]http://clip.vn/w/DxnK[/Flash]

- các bạn chỉ cần thay thẻ [FLASH] thành [clipvn] là có thể hiển thị được trong nội dung comment.

10. Nhúng các file flash vào comment [flash]
- cấu trúc thẻ như bên dưới:

[flash]{link file flash}[/flash]

- ở đây mình đã mặc định kích thước cho vùng hiển thi flash (width='400' và height='350') các bạn có thể tùy chỉnh lại trong code javascript.
- ví dụ ta code 1 file flash như sau : http://imgfree.21cn.com/free/flash/61.swf và chèn vào comment sẽ như sau:

[flash]http://imgfree.21cn.com/free/flash/61.swf[/flash]

11. Như vậy mình đã giới thiệu 1 số thẻ thông dụng để chèn vào blog, tuy nhiên sẽ xuất hiện 1 số trường hợp như : nếu ta chèn ảnh vào comment, ví dụ như thẻ [img] ở trên. Nếu ảnh có kích thước lớn hơn vùng hiển thị nội dung comment thì sao? hay muốn chèn 1 số thẻ HTML khác thì sao? sau đây mình sẽ hướng dẫn tiếp dùng cách chèn 1 đoạn HTML vào comment để cho nó hiển thị.
- Ví dụ ta có đoạn code HTML:

Khi muốn chèn vào comment, bạn chỉ việc thay thế các kí tự < và > thành [[ và ]]. Ví dụ như :

[[img src="link ảnh" width="400" height="300" /]]

- Nếu như bạn ko thích dùng chuỗi [[ để thay thế thì có thể đổi lại trong code javascript.
- Cách này xem ra có vẻ hơi lâu, nhưng sẽ rất cơ động. Nếu các bạn không muốn thay thế các kí tự trên bằng tay thì có thể copy code vào NotePad rồi dùng lệnh thay thế đồng loạt (Ctrl+H) thì sẽ nhanh hơn nhiều.

B. Sau đây là code của thủ thuật:

- Các bạn chèn đoạn code javascript bên dưới (code 1 hay 2 đều được) vào trong code template (trước thẻ đóng </body>).

Code 1:

Code 2:

- Save template lại.

Như vậy đã hoàn thành. Chúc các bạn thành công.

khoa học TV

Blog Archive

Categories

Giới thiệu về tôi

Labels

Blog Archive

Business

website uy tín

Thứ Năm, 23 tháng 6, 2011

Recent comments với ảnh đại diện

Thứ Hai, 20 tháng 6, 2011

[fandung.com] - Thông báo ngày 20/06/2011

Thứ Sáu, 17 tháng 6, 2011

[Chia sẻ] - Tạo hộp thoại thông báo cho blog

Thứ Hai, 13 tháng 6, 2011

Mega Dropdown Menu CSS

Thứ Bảy, 11 tháng 6, 2011

[Update] - Tạo số đếm cho các comment của blogspot

Thứ Sáu, 10 tháng 6, 2011

[Update] - Modify Form comment : Bài 13 - Thiết kế lại giao diện của comment

Chủ Nhật, 5 tháng 6, 2011

Modify Form Comment : Bài 14 - Media Comment cho blogspot

web mua nước hoa tốt

Web rèm đẳng cấp

About

Social Profiles

Blog Archive

Categories

Giới thiệu về tôi

Labels

Blog Archive

Business

website uy tín

Thứ Năm, 23 tháng 6, 2011

Thứ Hai, 20 tháng 6, 2011

Thứ Sáu, 17 tháng 6, 2011

Thứ Hai, 13 tháng 6, 2011

Thứ Bảy, 11 tháng 6, 2011

Thứ Sáu, 10 tháng 6, 2011

Chủ Nhật, 5 tháng 6, 2011

web mua nước hoa tốt

Web rèm đẳng cấp

About