Xem Tivi Online: Style cho Blog

Showing posts with label Style cho Blog. Show all posts

Friday, June 5, 2009

Fix lỗi “Read more – Đọc tiếp” cho Blogspot

Mặc Dù Vnpreessnet đã làm bản fix lỗi này cho anh em blogspot nhưng vẫn còn rất nhìu người chưa sửa,hôm nay tui lấy bên @PTS về cho anh em,ai chưa sửa thì sửa nhanh nhanh nhé

Một số các weblog sử dụng tính năng Đọc tiếp – Readmore của AnhVo (vietwebguide) một cách tự động hỗ trợ tạo thumbnail từ ngày 31.5 đã không sử dụng được do host mà vietwebguide sử dụng đã thông báo không tiếp tục cung cấp dịch vụ host free do gặp khó khăn trong kinh doanh.

Thông báo được chính thức từ chiều 31.5 như sau:

Để tiếp tục sử dụng tiện ích Readmore các bạn hãy thực hiện theo các bước theo hướng dẫn của phattrien@so như sau:

1. Với người chưa thực hiện tiện ích tính năng Read more của AnhVo (vietwebguide):

Vào Template - Edit HTML, Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template:




<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

2. Với các bạn đang sử dụng tiện ích tính năng Read more của AnhVo (vietwebguide):

Thay thế đoạn mã

<script type='text/javascript'> summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://www33.websamba.com/anhvosite/blogger/js/summary-post-v20-test.js' type='text/javascript'/>

Bằng đoạn mã dưới:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Friday, May 29, 2009

Làm khung Đặt code trong khung trên bài viết của Blogger

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng </pre> trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền … bằng cách thêm code CSS vào thẻ mở, ví dụ: <pre style=”color: #333333; background: #999999; width: 100%; height: 50px; overflow: auto; padding: 10px;”>.

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin><![CDATA[/* và ]]></b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:


.pre-formatting{  color: #333333;  background: #999999;  border: 2px solid #999999;  overflow: auto;  font-family: "Tahoma", Tahoma;  padding: 10px;}

Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:


.pre-formatting{  color: $textcolor;  background: $bgcolor;  border: 2px solid $bordercolor;  overflow: auto;  font: $headerfont;  padding: 10px;}

Cách sử dụng:

Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

<pre style="height: 100px;" class="pre-formatting">Code</pre>

Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!

Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành &#38lt; và > thành &#38gt;) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.

CẬP NHẬT:

Tôi vừa biết thêm một cách chuyên nghiệp hơn và đơn giản hơn vì không phải ước lượng height cho đoạn code bạn dùng.

Bạn cũng thêm một đoạn CSS điều khiển hiển thị code như trên nhưng để chúng đi kèm thẻ pre hoặc code:


pre, code{  color: $textcolor;  background: $bgcolor;  border: 2px solid $bordercolor;  overflow: auto;  font: $headerfont;  padding: 10px;}

Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:

<pre>... code ...</pre>

Hoặc:

<code>... code ...</code>

Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.

Game cho blog

Một trong những cổ điển mọi thời đại đó là trò chơi xếp gạch được Alexey Pajitnow sáng tạo cho Electronica 60 trong khi làm việc tại Viện khoa học Mát-cơ-va. Trò chơi này được du nhập vào Mỹ năm 1986 và một trong những trò chơi phổ biến trên các máy chơi game sử dụng màn hình TV thời trước, trên các máy chơi game nhỏ thường được sản xuất tại Trung Quốc và ngày nay trên điện thoại di động.

Người chơi dùng các phím di chuyển để điều khiển: Phím mũi tên hướng lên để xoay chữ, phím mũi tên hướng xuống để hình rơi nhanh hơn, "P" để ngưng/tiếp tục chơi, "Q" để thoát, "M" để tắt/mở âm thanh. "Z" và "X" cũng có thể dùng để xoay chữ.

Để đưa trò chơi này vào blog bạn click vào đây chỉnh sửa lại các thông tin trên Widget Settings:

Name: Tên cho trò chơi
Width: Kích thước rộng (đơn vị pixels)
Height: Kích thước ngang (đơn vị pixels)

Sau khi đã thay đổi xong, hãy click Get Widget để lấy mã và chèn vào blog như hướng dẫn chèn con mèo ảo. Ngoài ra còn rất nhiều game khác trong đó có Pac-Man, Boom Online được hướng dẫn ở bài viết này.

Làm Logo online cho blogs , website

Có nhiều cách thu hút lưu lượng truy cập vào blog, một trong những cách đó là trao đổi link, button, logo hay banner của bạn với một người khác cùng làm blog. Một nút bấm được thiết kế đẹp sẽ "ăn điểm" trước nhiều nút bấm khác. Nếu bạn là dân đồ họa, sẽ chẳng khó. Còn như tôi và nhiều người khác cũng chẳng cần phải gác tay lên trán suy nghĩ làm việc đó như thế nào mà chỉ cần biết các trang web hỗ trợ.

ích thước các button cho blog thông thường là 80x15 pixels. Ngoài ra bạn có thể thiết kế các banner hoặc logo dạng chuẩn khác tùy theo nhu cầu của mình.
Dưới đây là danh sách các site cho phép bạn thiết kế logo cho blog của bạn.

http://www.bloggertalk.net/button_generator.html

http://tools.blogflux.com/buttonmaker/

http://kalsey.com/tools/buttonmaker/

http://tools.dynamicdrive.com/button/

http://www.tomaweb.com/buttons.asp

http://www.coolarchive.com/buttonmaker.php

http://www.graphicsguru.com/button.php

http://creatr.cc/blogbutton/

Thursday, May 28, 2009

Widget thám tử – Ai đang online và làm gì trong weblog.

Hôm nay ghé thăm vnpressnet.com thấy có bài rất hay,mà vnpressnet.com cũng sưu tầm từ thugian360 thì phải,hi.
Nhân tiện copy về cho anh em tham khảo:

Hiện tại để trả lời câu hỏi: Ai đang làm gì? và Ai đang online? trên blog của bạn bạn có thể dùng rất nhiều các công cụ miễn phí được cung cấp đầy rẫy trên mạng.

Tuy nhiên, có một THủ thuật rất hay và miễn phí của who.amung.us được phát triển bởi thugian360.com với sự giúp đỡ của Get-Game.Net rất hay nên phattrien▲so xin được giới thiệu phổ biến cho mọi người.

Bạn có thể biết:

1. Ai đang online ???

Widget này tích hợp với hình online của Whos.amung.us, bạn phải có code đếm số người online (loại javascript) của Amungs tại blog của mình.

<script>idkey = 'hg6344d0ashc';</script><script src="http://wp.thugian360.com/online/widget.js"></script>

Thay hg6344d0ashc bằng Amungs key id của bạn.

2. Mọi người đang đọc gì ???

Widget này tích hợp với hình online của Whos.amung.us, bạn phải có code đếm số người online (loại javascript) của Amungs tại blog của mình.

<script>idkey = 'hg6344d0ashc';</script><script src="http://wp.thugian360.com/pages/widget.js"></script>

Thursday, May 21, 2009

Default Hình nền cho từng thành phần của blog

Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).

Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).

Hình 2. Layout

Hình 1. Mô hình hiển thị

Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.

A. Thành phần Header

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

B. Thành phần Main

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

C. Thành phần Sidebar

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

D. Thành phần Footer

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:

background-image:url(http://www.vidu.com/hinh.jpg);

Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:

#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Cách chèn tương tự cho các thành phần khác.

Kích thước hình nền cho từng thành phần

Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.

Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:

background-repeat: repeat-y;

Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:

background-position: center center;

Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.

Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background

Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:

background:#ffffff;

Tự thiết kế Web Flash dễ dàng với Wix.Com

Tự thiết kế cho mình một Website Flash để dùng cho mục đích cá nhân hoặc thương mại đôi khi chỉ là giấc mơ đối với nhiều người trong chúng ta. Tuy nhiên, nếu bạn thật sự muốn và nhờ tới sự trợ giúp của dịch vụ trực tuyến Wix thì nó lại trở nên dễ dàng hơn bao giờ hết. Chỉ với vài thao tác đơn giản là bạn có ngay một Website được “Flash hóa” hoàn toàn để “khoe” với bạn bè. Việc đầu tiên bạn phải làm là đăng ký một tài khoản miễn phí tại http://www.wix.com và bấm vào Menu Create để bắt đầu.

Trong Menu Create, bạn sẽ thấy cột bên trái là danh sách các sản phẩm mà dịch vụ này hỗ trợ được chia thành nhiều chủ đề khác nhau như Website, Art, Music, E -Card…còn bên phải là các mẫu có sẵn tương ứng với các chủ đề đó.

Trong phạm vi bài viết này chúng ta chỉ đề cập tới việc thiết kế một Website Flash nên các bạn hãy chú ý tới chủ đề: Website và Music.

- Với Website bạn sẽ có 3 lựa chọn: Business - thiết kế một Website thương mại, Photographer - thiết kế một Website chia sẻ hình ảnh và Personal - thiết kế một Website cá nhân tương tự như Blog.

- Với Music bạn sẽ thấy mục Website với các mẫu về Website nghe nhạc.

Tất nhiên những lựa chọn này chỉ đem lại cho bạn các mẫu có sẵn mà thôi còn nếu bạn dự định tự tay thiết kế thì chỉ việc chọn vào ô Blank ngay bên tay phải mà không phải suy nghĩ về bất cứ vấn đề gì.

Giao diện soạn thảo trên Wix

Cửa sổ Editor của Wix cũng tương tự như một phần mềm thiết kế thông thường, bên tay trái bạn là Menu chứa các công cụ cấu thành Website, bên tay phải là khung chứa các kiểu mẫu tương ứng với các công cụ bạn chọn bên tay trái. Khi bạn chọn được một kiểu mẫu chỉ cần bấm chuột vào là nó sẽ được đưa ra phần thiết kế để bạn tinh chỉnh. Phía trên cùng là thanh công cụ cơ bản và phía cuối là thanh thuộc tính tương ứng với từng đối tượng.

* Các thao tác nên biết trước khi thiết kế:

- Hãy tiến hành cấu hình kích thước cho Website của bạn, việc này rất quan trọng bởi nếu kích thước quá lớn sẽ hiển thị không đẹp mắt. Tất nhiên bạn vẫn có thể thay đổi về sau nhưng lúc đó bạn sẽ phải thay đổi cả kích thước các đối tượng bạn đã thêm vào trước đó.

- Trong quá trình thiết kế bạn nên Save phòng trường hợp mất điện hay treo máy.

- Menu Edit của Wix cũng giống như trong Microsoft Word với các chức năng cắt, dán, quay lại tác vụ trước đó, xóa ….

- Sử dụng nút Preview sẽ giúp bạn quan sát tổng quan hơn các đối tượng bạn đưa vào cũng như các hiệu ứng bạn tinh chình.

* Xây dựng bố cục ban đầu cho Website:

Việc xây dựng bố cục cho Website là rất quan trọng, từ bố cục đó bạn có thể nhanh chóng tùy biến bằng cách thêm vào các thành phần khác để Website phong phú và bắt mắt. Để bắt đầu xây dựng bố cục bạn hãy chọn vào mục Page Parts ở cột phía tay trái và lần lượt lựa chọn:

- Backgroup: Hình nền cho Website của bạn.

- Page Frame: Khung viền cho Website

- Page Center: Đối tượng nền ở trung tâm Website

Cùng nó là 3 tùy chọn theo từng mục đích xây dựng Website của bạn

- Mini Page: Tạo các trang nhỏ lồng vào phía trong trang chính.

- Option và Button: Giúp bạn xây dựng hệ thống Menu lựa chọn nếu bạn có ý định xây dựng nhiều trang cho Website của mình.

Bạn có thể sắp xếp các đối tượng này bằng cách bấm chuột vào đối tượng đó và kéo nó tới vị trí phù hợp. Khi bấm vào mỗi đối tượng bạn cũng sẽ thấy xuất hiện các nút bao quanh để thay đổi kích cỡ và dấu hiệu mũi tên để bạn xoay đối tượng.

Đây là một ví dụ điển hình cho bạn tham khảo:

Giao diện bố cục ban đầu của một Website

Chú ý: Bạn có thể xây dựng nhiều trang với các nội dung khác nhau cho Website của bạn. Chính vì thế bạn hãy sắp xếp nội dung cho Website của bạn một cách thật hợp lý nhé. Để thêm một trang bạn hãy bấm vào Add Page ở góc trên bên tay phải.

* Tinh chỉnh từng đối tượng:

Để tinh chỉnh cho từng đối tượng bạn bấm vào đối tượng đó, lúc này thanh thuộc tính ở cuối trang sẽ hiển thị các lựa chọn cho bạn tinh chỉnh. Xin đưa ra một số thuộc tính cơ bản để bạn dễ dàng tham khảo.

- Replace : Thay đối tượng hiện hành bằng đối tượng có sẵn khác.

- Settings: Cài đặt thêm cho từng đối tượng, tùy từng đối tượng mà có các lựa chọn khác nhau.

- Color: Màu sắc của từng đối tượng nhất định

- Effect: Chứa các hiệu ứng đơn giản dành cho các đối tượng mà bạn chọn như: Shadow (đổ bóng), Transparent (độ trong suốt), Blur (độ mờ đục) …

- Behavior: Phần này giúp bạn tạo các tác vụ khi bấm chuột vào đối tượng bạn chọn. Ví dụ:

+) Link to Next page và Link to Prev Pag sẽ đưa bạn tới trang tiếp theo hoặc trở lại trang trước đó với điều kiện bạn thiết kế nhiều trang Web.

+) Go to Page: Đưa bạn tới một trang nhất định do bạn lựa chọn.

+) Go to URL: Kết nối với các liên kết bên ngoài.

Và rất nhiều nữa đang chờ bạn khám phá

- Skin: Thay đổi giao diện bên ngoài cho đối tượng

- Animations: Tạo hiệu ứng chuyển động cho đối tượng đó

- Manage: Quản lý các thành phần liên quan.

Chú ý: Không phải đối tượng nào cũng có tất cả các thuộc tính trên và tùy vào từng đối tượng sẽ còn rất nhiều các thuộc tính khác nữa.

* Các đối tượng được Wix cung cấp:

Ngay phía dưới mục Page Parts sẽ là các phần chứa các đối tượng mà Wix cung cấp cho bạn, tương ứng với từng nội dung là :

- Media:

+) Photos: Chèn hình ảnh vào Website, có thể Up lên từ máy của bạn hoặc qua các đường link khác.

+) Video: Giúp bạn đưaVideo từ các Website chia sẻ vào trang của mình.

+) Music: Tương tự như với hình ảnh, bạn có thể đưa file nhạc MP3 vào làm nhạc nền cho Website qua lựa chọn này.

+) My Media: Chính là nơi lưa trữ các đối tượng bạn đưa vào Wix trong phần Media

- Clipart:

+) Shapes: Chứa các hình khối đơn giản

+) Clipart: Các hình khối 3D phức tạp và bắt mắt hơn.

+) Line: Cung cấp các đường thẳng và mũi tên

+) Video Effect: Đây là các đoạn Video được thiết kế với rất nhiều hiệu ứng ánh sáng đẹp mắt.

+) Animations: Bạn có thể dễ dàng tìm thấy vô khối những hình động cực “kool” ở lựa chọn này.

+) Icon: Chứa các Icon tối cần thiết cho một Website.

- Text:

+) Titles: Bạn có thể dùng chức năng này để tạo ra Tiêu đề cho Website của mình.

+) Text Box và Browser Text: Là các đối tượng để bạn nhập văn bản vào, nếu bạn muốn nhập tiếng Việt thì nên sử dụng Browser Text. Lưu ý: Đối với tiếng Việt bạn nên gõ trên Notepad rồi copy và past vào đây, nếu gõ trực tiếp có một số từ sẽ bị lỗi khi bỏ dấu.

+) Notes: Ở đây chứa các khung chú thích tương tự như các khung đối thoại trên truyện tranh.

- Galleries:‘

+) Photo Album: Tạo một Album ảnh đơn giản để bạn chia sẻ với bạn bè.

+) Slideshow: Khác với Photo Album, SlideShow có khả năng trình diễn ảnh chuyên nghiệp hơn với rất nhiều hiệu ứng chuyển cảnh và skin đẹp mắt. Sau khi thêm vào Website bạn bấm chọn Manage để đưa hình vào và chuyển sang mục Transition để tạo hiệu ứng chuyển cảnh.

+) Slider, Carousel và Cover flow có chức năng tương tự như Slideshow

- Widget: Các Widget luôn được xem là các thành phần không thể thiếu được của thế hệ Web 2.0

+) Players: Cung cấp cho bạn một trình nghe nhạc giúp biến Website thành một Site nghe nhạc trực tuyến.

+) RSS: Giúp mọi người dễ dàng theo dõi tình trạng Website của bạn một cách thường xuyên.

+) Contact Forms: Giúp mọi người dễ dàng liên hệ tới bạn qua hệ thống Email, nhớ bấm chọn Email ở phía dưới và điền địa chỉ email của bạn vào nhé.

Sẽ thú vị hơn rất nhiều nếu bạn tự tay khám phá các chức năng khác.

* Đưa Website vừa tạo đến với cộng đồng:

Sau khi thiết kế xong thì chắc chắn rằng điều đầu tiên chúng ta muốn làm sẽ là đưa sản phẩm của mình đi vào hoạt động. Để làm điều này bạn hãy chọn Publish, Wix sẽ cung cấp cho bạn 3 lựa chọn:

- WixSite: Wix sẽ cung cấp cho bạn một đường link dẫn tới trang bạn vừa tạo và tất nhiên là theo tên miền của Wix.

- Email: Giúp bạn gửi đường link tới Website của bạn trên Wix cho bạn bè

- Embed: Lựa chọn này giúp bạn đưa phần vừa thiết kế lên các mạng xã hội thông dụng hiện nay như Facebook, MySpace, Blogger…

Lưu ý: Nếu bạn muốn đưa trang Web lên một host có tên miền riêng thì bạn làm như sau:

- Mở Notepad, nhập vào đoạn Code sau:

<head> <title>Tiêu đề trang Web</title> </head> <center><iframe height="chiều dài" scrolling="no" width="chiều rộng" frameBorder="0" src="http://www.wix.com/x1/x2"></iframe></center></p>

Với x1 là tên tài khoản của bạn trên Wix và x2 chính là tên mà bạn lưu project này. Thực chất bạn cũng không cần phải quá quan tâm đến nó vì chỉ cần Publish với lựa chọn WixSite là bạn sẽ có ngay liên kết này.

- Cuối cùng bạn lưu tệp tin này lại với các tùy chọn: File name: “index.php” và Encoding là UTF-8. Sau đó chỉ cần đưa lên host là bạn có ngay một

Bạn có thể xem Website mẫu do tôi tạo và Video hướng dẫn của Wix tại địa chỉ: http://vnnewbies.com/wix/

Video hướng dẫn tạo Flash Website đơn giản trên Wix

Kết luận: Trên Internet rất nhiều các Website có tiếng đã đánh giá Wix là một dịch vụ Premium miễn phí. Nhưng nó cũng có những điểm yếu riêng như việc các Website tạo ra bởi dịch vụ này có khả năng cập nhật dữ liệu không cao hay việc người sử dụng buộc phải phụ thuộc vào server của Wix. Hy vọng nó sẽ là lựa chọn hợp lý dành cho các bạn không có quá nhiều nhu cầu.

Monday, May 18, 2009

Tạo widget các bài đăng gần đây

Các bài đăng gần đây giúp người đọc blog của bạn có thể tìm thấy những post cũ hơn một cách nhanh chóng. Nếu bạn sử dụng Blog Archive, bạn có thể cấu hình lại cách hiển thị của nó bằng cách vào Add Element, tìm và chỉnh lại Blog Archive. Xem ảnh.

Tuy nhiên nếu bạn không muốn sử dụng nhưng vẫn muốn hiển thị danh sách post đã đăng của mình. Vậy làm thế nào? Bạn có thể thực hiện bằng cách vào Template ->Add a Page Element, chọn Link List (xem hình dưới). Rồi vào Edit Posts ( Posting | Edit Posts), click trên View của mỗi post để lấy link.

Tuy nhiên cách làm thủ công này rất bất tiện, mỗi lần bạn cập nhật bài mới bắt buộc bạn phải sửa lại, vậy bạn đâu cần chi xem bài viết này và blog này cũng bằng thừa!

Có một cách rất hay là bạn dùng một chương trình convert Feed đến JavaScript. Click vào http://itde.vccs.edu/rss2js/build.php hoặc http://www.bucks.edu/feed/build.php bạn làm theo hướng dẫn của tôi bên dưới.

Bạn cần biết link Feed đến blog của bạn. Nó như sau:

http://TÊNBLOGCỦABẠN.blogspot.com/feeds/posts/default

Bây giờ hãy copy và sửa lại phù hợp với blog của bạn và paste vào URL Enter the web address of the RSS Feed

Show Channel: Chọn No.

Number of items to display: Đây là số post gần nhất mà bạn chọn, hãy gõ vào 5 chẳng hạn.

Show item descriptions? How much?: Bạn chọn 0, nếu bạn muốn một đoạn mô tả ngắn chọn 1, và muốn bao nhiêu ký tự thì gõ số ký tự.

Show item posting date?: Chọn Yes nếu bạn muốn hiển thị ngày.

Open links in a new window?: Chọn Yes nếu bạn muốn khi click vào liên kết này hiển thị ở cửa sổ mới.

Bấm Generate JavaScript để kết thúc. Sau đó bạn copy code sinh ra và paste vào HTML/JavaScript (Template | Add a Page Element | HTML/JavaScript), đặt tiêu đề cho cho widget này là Các bài gần đây chẳng hạn, lưu lại và di chuyển đến vị trí thích hợp trên Layout và click Save để hoàn tất.

Cũng cách làm tương tự như vậy ở Number of items to display: thay vì bạn gõ vào 5 thì hãy để 0, đoạn mã bạn nhận được sẽ liệt kê tất cả post có trên blog của bạn. Làm nhưng vậy bạn có Danh sách các bài đăng theo thứ tự mới cập nhật sẽ được đưa lên đầu.

Cập nhật thêm:

Bạn có thể dùng element feed trên blog của bạn để thực hiện việc này.

Link đến feed trên trang của bạn sẽ có dạng:

http://TÊNBLOGCỦABẠN.blogspot.com/feeds/posts/default

Ví dụ bạn sửa lại phần Title: CÁC BÀI ĐĂNG GẦN ĐÂY. Xong!

Chúc thành công!

Tạo con trỏ chuột ngộ nghỉnh trên blog

Noi Dung O Day

Theo mặc định con trỏ chuột của máy tính chỉ là một mủi tên không hơn không kém. Bạn có thể tạo ra một con trỏ ngộ nghĩnh cho blog của mình. Khi một ai đó kéo chuột trên blog của bạn, con trỏ này sẽ hiện ra.

Để làm việc này bạn cần truy cập vào trang http://www.myspacecursor.net, bạn click chọn một trong những menu bên phải. Có rất nhiều kiểu con trỏ nên bạn cứ lựa chọn thoải mái.

Bạn click chọn một loại nào đó, trang bạn chọn hiện ra. Hãy copy một trong những đoạn mã mà bạn thấy trên giữa trang (xem hình dưới) vào Notepad (Start -> All Programs -> Accessories -> Notepad, Windows XP).

Đoạn mã bạn copy được sẽ như bên dưới (đây chỉ là ví dụ).

<style type="text/css">body {cursor: url(http://www.myspacecursor.net/angel/angel.ani); }</style><br />
<a href="http://www.myspacecursor.net" title="Free Cursors">Free Cursors</a><a href="http://www.freelayoutsnow.com" title="Myspace Layouts">Myspace Layouts</a><a href="http://www.getmyspacecomments.com" title="Myspace Comments">Myspace Comments</a><br />

Cách chèn thứ 1:

Bây giờ hãy bỏ đoạn mã tính từ <br /> đầu trở xuống. Còn lại:

<style type="text/css">body {cursor: url(http://www.myspacecursor.net/angel/angel.ani); }</style>

Bạn chép đoạn mã này vào Template (Mẫu) -> Edit HTML (Chỉnh sửa HTML), kéo thanh trượt xuống và paste phía trên </head> (dùng Ctrl + F để tìm ) như hình minh họa.

Cách chèn thứ 2:

Bạn chỉ cần copy đoạn mã như thế này (nhớ phải chép chính xác nhé!)

cursor: url(http://www.myspacecursor.net/angel/angel.ani);

Sau đó cũng vào Edit HTML, kéo thanh trượt tìm body { và paste như hình.

Trong cả hai cách, sau khi dán xong thì click Save Template để lưu lại. Hãy click View Blog (Xem Blog) để biết kết quả. Chỉ hiển thị trên Internet Explorer!

Nếu bạn muốn dùng lâu dài, hãy lấy luôn biểu tượng con trỏ này bằng cách tải nó về theo link: http://www.myspacecursor.net/angel/angel.ani

Sau đó upload file cursor này lên GooglePages bằng tài khoản Google (cùng với blog của bạn hoặc kích hoạt được dùng nếu chưa làm việc đó) và lấy liên kết để thay cho liên kết http://www.myspacecursor.net/angel/angel.ani trong đoạn mã trên.

Chúc thành công!
Theo Thuthuatblog

Tạo Bài Liên Quan Cùng chủ đề

Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn ở cuối mỗi bài viết) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn.

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

Hình minh họa thủ thuật:

☼ 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. Nhấn chọn "Mở rộng mẫu tiện ích" (Expand widget template)
5. Chèn đọan code bên dưới ngay trên dòng code </head>



<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://fandung.110mb.com/JS-files/fd-Related_posts.js' type='text/javascript'/>

- Nên download file java Related_posts.js về và up lên host của bạn, để tránh hết bandwidth

6. Tiếp tục tìm đến dòng <data:post.body/> và chèn đọan code bên dưới ngay sau nó:

(Lưu ý nhỏ : đối với những blog có hack tiện ích đọc thêm (Read more...) thì việc bạn đặt code bên dưới trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>)

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><font color='#FF0000'><b:loop
values='data:post.labels'
var='label'><data:label.name/><b:if
cond='data:label.isLast !=
&quot;true&quot;'>,</b:if><b:if
cond='data:blog.pageType == &quot;item&quot;'>

<script
expr:src='&quot;/feeds/posts/default/-/&quot; +
data:label.name +
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;'
type='text/javascript'/></b:if></b:loop>
</font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

- Bạn có thể sửa các code màu xanh theo ý bạn.
- <font color='#FF0000'> : đây là code mã màu của nhãn (Label)

7. Save template lại là xong.
Theo FD blog

Sunday, May 17, 2009

Tạo các Tab nội dung

Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.

Ở đây mình giới thiệu 3 lọai tab:
A. Lọai 1:
Hình minh họa:

Code:




<style type="text/css">
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{
position: relative;
top: 1px;
}

.shadetabs li a.selected{
background-image: url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>      // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000)    // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>

B. Lọai 2:
Hình minh họa:

Code:

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul div id="flowertabs" class="modernbricksmenu2">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>      // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("flowertabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000)    // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>

C. Loại 3:
Hình minh họa:

Code:

<style type="text/css">
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/indentbg2.gif) center center repeat-x;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}
</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>
<script type="text/javascript" src="http://www.hotlinkfiles.com/files/2580842_1o4e8/jp.js">
</script>
<div id="pettabs" class="indentmenu">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>      // lệnh class="selected" để thiết lập Tab nào đuợc chọn mặc định hiển thị khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</div>

<div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>

<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("pettabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000)    // định thời gian tự chuyển sang tab (ms), ở đây là 2s, nếu không muốn thì để trống

</script>

Saturday, May 16, 2009

Bỏ gạch Chân Link Trong Blog

Một số Template thì link trong blog bị gạch chân làm mất tính thẩm mĩ của blog.
Để bỏ gạch chân này bạn vào Bố Cục--->Chỉnh sửa HTML.
Tìm a{color:$linkcolor; text-decoration:underline}
Và Thay underline Bằng none

Tạo các Bài Cùng Chủ đề

rước đây tôi có viết 1 số bài hướng dẫn về cách làm "các bài liên quan", tuy nhiên, với những bài này thi blog chỉ hiện được các bài "mới nhất" của cùng nhãn và không gì khác hơn. Khi sử dụng gặp ít nhiều hạn chế, tức là số bài hiện sẽ chỉ quanh quẩn mấy bài mới nhất của nhãn.
Thấy được nhược điểm đó, tôi cố gắng khắc phục tối đa nó, làm sao để các bài liên quan hiển thị một cách pro. Bây giờ các bài liên quan sẽ không như trước nữa: nó sẽ hiện bài mới nhất và bài cũ hơn so với bài đang được mở (giống các trang báo chí, nó sẽ hiện không khác gì các trang như Dân Trí, Tuổi Trẻ,... VN Expess vì đã đổi giao diện chứ không thì cũng giống nốt :D). Nói khó hiểu, bạn hãy xem hình minh họa sau đây:

Thực ra hack này tôi đã viết từ lâu, nhưng vì mới chỉ áp dụng trên blogg classic nên tôi ngại viết lại cho Layout, đến hôm nay mới hoàn thành xong.
Tiến hành cài đặt:
* Lưu ý quan trọng: bạn phải chỉnh ngôn ngữ cho blog của mình thành tiếng Anh trước khi thực hiện các bước bên dưới.
Trước khi đặt code vào, bạn phải điều chỉnh một số chỗ sau:
- Vào Page Elements -> Blog ->, tiến hành:
+ Bật chế độ hiện Nhãn,
+ Bật chế độ Posted by, at và chọn dạng thời gian như hình đã chỉ (dạng 6/20/2008 05:30:21 PM).

- Vào Setting -> Formatting ->, chọn dạng như trên.

- Hãy chắc chắn rằng blog của bạn đã được Burn Feed (tức link feed đã được kích hoạt).
Bây giờ đến phần chèn code:
- Nhớ sao lưu 1 bản trước khi chỉnh sửa.
- Vào Edit HTML -> Expand Widget Manager,
Tìm đến dòng

<p class='post-footer-line post-footer-line-3'/>

và chèn code sau ngay bên dưới nó (hoặc có thể dưới 1 thẻ /DIV đóng cũng được).

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<b:if cond='data:post.labels'>   
<div id='bailienquan'>Loading related posts...</div>   
<span id='label_list_display_none' style='display:none; visibility:hidden'><b:loop   
values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast   
!= &quot;true&quot;'>,</b:if></b:loop></span>   
<span id='post_time_stamp' style='display:none; visibility:hidden'><data:post.timestamp/></span>
<br/>   
</b:if>   
</b:if>   

Xem hình ví dụ của tôi :

Tiếp tục, bạn chèn đoạn code dưới đây vào ngay trên thẻ đóng </body>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<script type='text/javascript'>   
blogID = '1193242412365517650';   
maxPosts = 12;   
feed2js = &quot;http://feed2js.org//feed2js.php&quot;;   
</script>   
<script src='http://www33.websamba.com/anhvosite/blogger/js/related_posts_01_fix.js'   
type='text/javascript'/>   
<div id='cacbailq1' style='display:none; visibility:hidden; height:0px'>   
<script type='text/javascript'>creattaga(&quot;min&quot;);</script>   
</div>   
<div id='cacbailq2' style='display:none; visibility:hidden; height:0px'>   
<script type='text/javascript'>creattaga(&quot;max&quot;);</script>   
</div>   
<div class='cacbailienquan' id='cacbailienquan' style="display:none;">   
<script src='http://www33.websamba.com/anhvosite/blogger/js/related_posts_02.js'   
type='text/javascript'/>   
<script type='text/javascript'>   
displayCBLQ(&quot;cacbailq1&quot;,&quot;Các bài mới nhất cùng chủ đề:&quot;);   
displayCBLQ(&quot;cacbailq2&quot;,&quot;Các bài cũ hơn cùng chủ đề:&quot;);   
</script>   
</div>   
</b:if>      

Những chỗ cần thay:
blogID = '1193242412365517650' bạn cần thay 1193242412365517650 thành blogID của bạn.

maxPosts = 12; Số Bài tối đa

* Code chạy rất đẹp với các nhãn tiếng Anh hoặc tiếng Việt không dấu. Với các nhãn tiếng Việt, có một số từ code không hiểu được nó, do đó không lấy được các bài liên quan. Vì thế, các bạn nên sử dụng ít nhãn tiếng Việt trong blog thôi, hoặc chỉ nên dùng nhãn tiếng Việt không dấu là tốt nhất.
Hy vọng bạn sẽ thích bài hack này!

Thay đổi tốc độ chạy chữ (ảnh) bằng cách rê chuột (Javascript)

Hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật của lệnh marquee. Với thủ thuật này, ảnh (chữ) sẽ di chuyển 1 cách liên tục, không bị ngắt quảng giữa ảnh cuối cũng và ảnh đầu tiên. Và thứ 2 nữa là ta có thể thay đổi chiều dịch chuyển cũng như tốc độ dịch chuyển của ảnh (chữ) bằng cách rê chuột.

Đây là một ứng dụng thiêng về java nhiều hơn. Và với thủ thuật rất thích hợp cho việc trình diễn ảnh, hoặc 1 list bài viết nổi bật.

Với việc di chuyển chuột sang trái, ảnh sẽ chuyển động sang phải & ngược lại. Khi chuột đi vào giữa vùng hiển thị nội dung thì sự di chuyển ngừng lại.

Có thể xem demo ở đây: http://fandung-test.blogspot.com

☼Sau đây là cách thực hiện:

1. Tạo 1 widget HTML/javacrip
2. Sau đó dán code này vào:

///////// Code của javascript - DO NOT EDIT///////////////////
<script type="text/javascript">

function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}

(function(){

if(!document.createElement) return;

marqueeInit.ar = [];

document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}</style>');
var c = 0, tTRE = [new RegExp('^\s*$'), new RegExp('^\s*'), new RegExp('\s*$')],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;

/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (d+.d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = new RegExp('(-(.))');
String.prototype.encamel = function(s, m){
s = this;
while((m = s.match(dash)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/

if(!ie5){
dash = new RegExp('-(.)', 'g');
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}

if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}

function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};

marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}

function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType == 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType == 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}

function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height
= !this.mq.style.height || isNaN(parseInt(this.mq.style.height))?
tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse == 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete == 'boolean' && ims[i].complete && !window.opera)
ic++;
else {
ims[i].onload = function(){
if(++ic == ims.length)
 cObj.setup();
};
}
if(ic == ims.length)
this.setup();
}
}
else this.setup()
}

Marq.prototype.setup = function(){
if(this.mq.setup) return;
this.mq.setup = this;
var s, cObj = this;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse == 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection == 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction == 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s)
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
this.c.style.visibility = 'visible';
this.runit();
}

Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}

Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction == 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}

Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX == 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}

Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c == this.c) return true;
while ((c = c.parentNode)) if(c == this.c) return true;}
return false;
}

function resize(){
for(var s, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s)
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}

if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);

})();
</script>

///////// Nội dung hiển thị ///////////////////

<div class="marquee" id="fd-test1">

ĐOẠN TEXT MUỐN HIỂN THỊ

</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'fd-test1',
style: {
'padding': '5px',
  'width': '450px',
  'background': 'lightyellow',
  'border': '1px solid #CC3300'
},
inc: 8,  //tốc độ mặc đinh khi không có rê chuột lên
mouse: 'cursor driven', //cho phép tác động chuột lên
moveatleast: 4,
neutral: 150,
savedirection: true
});
</script>

<div class="marquee" id="fd-test2">
<img src="LINK ẢNH 1" />
<img src="LINK ẢNH 2" />
<img src="LINK ẢNH 3" />
<img src="LINK ẢNH 4" />
<img src="LINK ẢNH 5" />
</div>

<script type="text/javascript">
marqueeInit({
uniqueid: 'fd-test2',
style: {
'padding': '2px',
  'width': '600px',
  'height': '180px'
},
inc: 5, //tốc độ mặc đinh khi không có rê chuột lên
mouse: 'cursor driven', //cho phép tác động chuột lên
moveatleast: 2,
neutral: 150,
savedirection: true
});
</script>

Thay đổi code màu xanh theo yêu cầu hiển thị của bạn, thay code link ảnh bằng ảnh của bạn.

3. Save lại là xong.
Theo FD'Blog
Chúc các bạn thành công.