Home » All posts

Thành phần hiển thị popup đóng tự động

Người đăng: yeu mai em on Thứ Tư, 12 tháng 1, 2011

Một thông báo dạng popup rất cần thiết trong thiết kế web, đặc biệt ứng dụng cho các hình ảnh quảng cáo động. Bạn có thể điều chỉnh khoảng thời gian hiển thị để thành phần popup tự động đóng.

Thông thường để tạo một kiểu quảng cáo dạng popup như vậy, kỹ thuật webdesign phải dùng đến script có dung lượng khá lớn. Tuy nhiên ở đây, tôi sử dụng chức năng đóng thành phần giúp cho script khá gọn nhẹ.

Bạn hãy đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript'>
function closeelement(){
div = document.getElementById("closeelement");

div.style.display= "none";
}
setTimeout(closeelement, 60000);
</script>

Chú ý trong đoạn code trên, con số 60000 là 60000 mili giây, tức 60 giây, là thời gian hiển thị rồi tự động đóng thành phần.

Trong phần thân trang web, sau thẻ <body>, bạn thiết lập cấu trúc HTML như sau.

<div id='closeelement' style='border: 0 !important; background: transparent; left:15px;bottom:15px;position:fixed;width: 190px;z-index:9999'>
<a href='javascript:closeelement();'>
<img src='http://img405.imageshack.us/img405/1535/closeicon.png' style='float: right;border: 0' title='Đóng'/>
<img src='URL_hình ảnh' style='border: 0'/><br />
Nội dung khác // Nếu bạn chỉ sử dụng hình ảnh thì bỏ phần này
</a>
</div>

Các tham số left, right, top, bottom, z-index dùng để điều chỉnh tọa độ của thành phần hiển thị popup đóng tự động.



More about →
vào lúc 01:11 { Add nhận xét }
Nhãn:

Tạo hiệu ứng gallery ảnh sử dụng Tomorrow again Script

Người đăng: yeu mai em on Thứ Ba, 11 tháng 1, 2011

Tomorrow again là một script do Dhteumeuleu phát triển dùng cho gallary ảnh với một hiệu ứng khá độc đáo. Bạn có thể xem Demo tại trang Dhteumeuleu.

Bạn cũng có thể áp dụng hiệu ứng này cho website hoặc blogspot của bạn theo các bước sau đây theo thứ tự Script >> CSS >> HTML.

Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type='text/javascript' src='http://hacodeproject.googlecode.com/files/tomorrowagain.js' ></script>

Hoặc nếu bạn không muốn sử dụng file nguồn như trên thì sử dụng đoạn code sau đây.

<script type='text/javascript'>
//<![CDATA[
var xm = 0;
var ym = 0;
document.onmousemove = function(e){
if (window.event) e=window.event;
xm = e.clientX;
ym = e.clientY;
}
var panel = {
speed : .006,
t : 0,
O : [],
over : false,

run : function() {
panel.t += panel.speed;
for (var i = 0, o; o = panel.O[i]; i++)
o.anim(i + panel.t);
},
init : function(){
for (var i = 0, o; o = document.images[i]; i++){
if (o.className.indexOf('panel') >= 0) {
var div = document.createElement("div");
div.className = 'panel';
var img = document.createElement("img");
img.src = o.src;
img.className = 'imgPanel';
o.parentNode.replaceChild(div,o);
div.appendChild(img);
div.ims = img.style;
div.iw = img.width;
div.ih = img.height;
div.cx = -div.iw / 2;
div.cy = -div.ih / 2;
div.anim = function(t) {
nw = this.offsetWidth;
nh = this.offsetHeight;
if (panel.over == this){
for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop;
var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw));
var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh));
// if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false;
} else {
var mx = (this.iw - nw) * .5;
var my = (this.ih - nh) * .5;
var x = -mx * (1 + Math.cos(t * 1.2));
var y = -my * (1 + Math.sin(t));
}
this.cx += (x - this.cx) * .1;
this.cy += (y - this.cy) * .1;
this.ims.left = Math.round(this.cx) + 'px';
this.ims.top = Math.round(this.cy) + 'px';
}
div.onmouseover = function() { panel.over = this; }
div.onclick = function() {
document.getElementById('imagenREAL').src=this.children[0].src;
}

this.O.push(div);
}
}
setInterval(panel.run, 32);
}
}
//]]>
</script>

Bước 2. Đặt đoạn CSS sau đây vào trước thẻ </head>.

<style type='text/css'>
#screen { /* the container */
margin: 0 auto;
overflow: hidden;
/* the width and height we will calculate according to the size defined in panel */
height: 500px;
width: 400px;
}

/* the images */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* this is the width and height of each square which have the effect */
height: 150px;
width: 150px;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* the image you see in reality */
#imageREAL {
display:block;
margin:0 auto;
/* if you don’t limit the size of images, remove it */
max-height: 350px;
max-width: 350px;
}
</style>

Bạn có thể điều chỉnh các tham số về chiều rộng (width) và chiều cao (height) tùy theo ý thích.

Bước 3. Thiết lập cấu trúc HTML như sau và đặt tại vị trí cần bố trí gallery ảnh, trong phần thân trang web.

<div id="screen">
<img class="panel" src="URL_hình ảnh 1" />
<img class="panel" src="URL_hình ảnh 2" />
<img class="panel" src="URL_hình ảnh 3" />
<!-- tiếp tục thêm các thẻ img theo cấu trúc tương tự -->
</div>
<img id="imageREAL" src="URL_hình ảnh 1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>

Đây là một ví dụ Demo: 330x490 | 490x320




More about →
vào lúc 08:28 { Add nhận xét }
Nhãn:

Tiện ích Bài viết ngẫu nhiên cho blogspot

Người đăng: yeu mai em

Bài viết ngẫu nhiên cũng là một tiện ích cần thiết cho bất kỳ blogspot nào. Tiện ích này hiển thị danh mục các bài viết trên blog một cách ngẫu nhiên cho toàn blog hoặc cho một nhãn nào đó.

Tôi chưa biết đích xác ai là tác giả viết phần Javascript của tiện ích này, chỉ biết rằng nó được lưu truyền khá lâu rồi. Trước đây Blogger Fan Dung có giới thiệu tiện ích này tại một bài viết trên Mothuthuat.com. Khi tôi giới thiệu lại tiện ích này, tất nhiên ban đầu sẽ không được chú ý bởi các độc giả đã biết qua cách cài đặt tiện ích này. Tuy nhiên, tôi muốn cho tiện ích hoàn thiện hơn và bạn sẽ không phải uổng công khi đọc lại bài viết của tôi.

Bạn có thể xem Demo ở đây.

Bài viết ngẫu nhiên





Để cài đặt tiện ích này cho blogspot của mình, bạn chỉ cần đặt toàn bộ phần code sau đây vào phần nội dung của một tiện ích HTML/JavaScript là được.

<style type="text/css">
#random-posts {
}
#random-posts ul {
list-style-type: none;
margin: 0 10px;
}
#random-posts li {
}
#random-posts a {
background: transparent url(http://img97.imageshack.us/img97/9070/weedbullet.gif) no-repeat 5px 50%;
display: block;
font-weight: normal;
height: 16px;
line-height: 16px;
padding: 3px 5px 2px 20px;
}
#random-posts a:hover {
background-color: #f5f5dc;
}
</style>
<div id="random-posts">
<script type="text/javascript">
function getRandomPosts(json) {
var maxEntries = 10; // Thay số 10 để hiển thị số lượng bài viết
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; }
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) { maxEntries = numPosts; }
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

Tôi đã thêm vào phần CSS để định dạng các thuộc tính CSS cần thiết cho tiện ích này. Nếu muốn hiển thị các bài viết ngẫu nhiên cho một nhãn nào đó thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code sau.

<script src=”/feeds/posts/summary/-/Tên nhãn?alt=json-in-script&callback=getRandomPosts&max-results=999999″ type=”text/javascript”></script>

Bạn cần thay tên nhãn áp dụng tiện ích cho đoạn code trên.
More about →
vào lúc 01:33 { Add nhận xét }
Nhãn:

Kéo và thả hình ảnh và các thành phần khác

Người đăng: yeu mai em on Thứ Hai, 10 tháng 1, 2011

Chúng ta đã biết cách kéo tiện ích qua bài viết này. Áp dụng rộng hơn với sự hỗ trợ của thư viện Scriptaculous, chúng ta có thể tạo thủ thuật kéo và di chuyển hình ảnh và các thành phần khác. Thủ thuật này áp dụng cho cả website thông thường và blogspot.

Bước đầu tiên là đặt đoạn code sau đây vào trước thẻ </head>. (Nếu trong Template của bạn đã có đoạn code này rồi thì không cần thêm vào)

<!-- Prototype and Scriptaculous-->
<script type='text/javascript' src='http://www.google.com/jsapi'/>
<script type='text/javascript' >
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Bước tiếp theo, bạn cần đặt id cho hình ảnh, ví dụ image1, image2, image3, … và sử dụng cấu trúc như sau cho hình ảnh.

<img id="image1" style="cursor:move; border:0px;" src="URL_hình ảnh 1"/><script type="text/javascript">new Draggable('image1');</script>

Nếu bạn áp dụng cho nhiều hình ảnh trong đó có đoạn text chú thích cho hình ảnh thì sử dụng cấu trúc như sau.

<div style="margin: 0px auto; text-align: center;"><img id="image2" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_hình ảnh 2" /> <img id="image3" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_hình ảnh 3" />
Đoạn text chú thích</div>
<script type="text/javascript">new Draggable('image2');new Draggable('image3');</script>


Nếu bạn muốn áp dụng cho một đoạn text thông báo thì bạn cần đặt tên id cho nó là div1 và sử dụng cấu trúc sau.

<div id="div1" style="border: 2px solid rgb(0, 0, 0); margin: 0px 0px 10px; padding: 4px; background: rgb(220, 220, 220) none repeat scroll 0% 0%; float: right; cursor: move; width: 250px; height: 60px; color: rgb(0, 0, 255); text-align: justify;">Đây là nội dung đoạn text thông báo.</div><script type="text/javascript">new Draggable('div1');</script>

Ngoài ra, bạn còn có thể áp dụng cho liên kết bằng hình ảnh và sử dụng cấu trúc sau đây.

<img id="image0" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL_liên kết cho hình ảnh')" src="URL_hình ảnh"/>
<script type="text/javascript">new Draggable('image0');</script>

Chú ý, các id cho hình ảnh cần được đặt kèm theo số thứ tự để tránh sự trùng lắp dẫn đến thủ thuật kéo không hoạt động được.
More about →
vào lúc 19:45 { Add nhận xét }
Nhãn:

Tiện ích Nhận xét mới nhất theo kiểu cơ bản

Người đăng: yeu mai em

Tôi đã giới thiệu kiểu tiện ích Nhận xét mới nhất có ảnh đại diện và tiện ích Nhận xét mới nhất có icon đại diện. Theo yêu cầu của bạn Linkfoci, hôm nay tôi xin giới thiệu kiểu tiện ích Nhận xét mới nhất cơ bản. Tiện ích này hiển thị phần tác giả nhận xét, ngày đăng nhận xét và tiêu đề nhận xét.



Bạn có thể xem Demo dưới đây.

Nhận xét mới nhất




Để cài đặt tiện ích này, bạn chỉ cần đặt đoạn code sau đây vào một tiện ích HTML/JavaScript là được.

<script style="text/javascript">
function showrecentcomments(json) {
var numcomments = 5; // Bạn có thể thay đổi số 5 để hiển thị số nhận xét
var showcommentdate = true; // Đổi true thành false để ẩn ngày đăng nhận xét
var showposttitle = true; // Đổi true thành false để ẩn tiêu đề bài viết
var numchars = 100; // Đổi số 100 để hiển thị số ký tự nhận xét
for (var i = 0; i < numcomments; i++) {
var entry = json.feed.entry[i];
var alturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
alturl = alturl.replace("#", "#comment-");
var postlink = alturl.split("#");
postlink = postlink[0];
var linktext = postlink.split("/");
linktext = linktext[5];
linktext = linktext.split(".html");
linktext = linktext[0];
var posttitle = linktext.replace(/-/g," ");
posttitle = posttitle.link(postlink);
var commentdate = entry.published.$t;
var cdyear = commentdate.substring(0,4);
var cdmonth = commentdate.substring(5,7);
var cdday = commentdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "tháng 01"; // Đổi tháng 01 thành Jan hoặc January nếu blog bạn bằng tiếng Anh
monthnames[2] = "tháng 02"; // Feb hoặc February
monthnames[3] = "tháng 03"; // Mar hoặc March
monthnames[4] = "tháng 04"; // Apr hoặc April
monthnames[5] = "tháng 05"; // May
monthnames[6] = "tháng 06"; // Jun hoặc June
monthnames[7] = "tháng 07"; // Jul hoặc July
monthnames[8] = "tháng 08"; // Aug hoặc August
monthnames[9] = "tháng 09"; // Sept hoặc September
monthnames[10] = "tháng 10"; // Oct hoặc October
monthnames[11] = "tháng 11"; // Nov hoặc November
monthnames[12] = "tháng 12"; // Dec hoặc December
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<br/>');
if (showcommentdate == true) document.write('Vào ngày ' + ' ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' năm ' + ' ' + cdyear + ' ');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> đã bình luận');
if (showposttitle == true) document.write(' về bài viết ' + posttitle);
document.write('<br/>');
if (comment.length < numchars) {
document.write('<i>');
document.write(comment);
document.write('</i>');}
else
{
document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(Xem thêm …)</a>');
document.write('</i>');}
document.write('<br/>');
}
document.write('<br/>');
}
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
<div class='clear'></div>

Bạn có thể thay đổi những phần được đánh dấu màu đỏ và màu xanh ở trên. Thay huynh-nhat-ha thành tên blogspot của bạn.

Kiểu tiện ích này thích hợp cho blogspot bằng tiếng Anh.
More about →
vào lúc 05:10 { Add nhận xét }
Nhãn:

Kéo tiện ích sử dụng Scriptaculous

Người đăng: yeu mai em

Có khi nào bạn nghĩ mình có thể dùng con trỏ kéo một tiện ích nào đó trên blog của mình đến một vị trí khác trên trang? Liệu điều đó có thể thực hiện được hay không? Tại sao không thể tạo ra thủ thuật có tác dụng như thế để nghịch trên blog một chút.

Thủ thuật kéo tiện ích giúp chúng ta nghịch ngợm với blog một chút và khiến cho việc chơi blog trở nên thú vị hơn. Để tạo thủ thuật này, tôi có sử dụng đến thư viện Scriptaculous.

Xem Demo.

Nếu bạn thích nghịch và vọc thủ thuật này thì hãy thực hiện theo các bước sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt trước thẻ </head> với đoạn code sau đây.

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Lưu Template.

Bước 2. Lúc này bạn cần xác định id của một tiện ích HTML/JavaScript nào đó mà bạn muốn áp dụng thủ thuật kéo. Ví dụ nếu bạn áp dụng cho tiện ích có id là HTML1 thì bạn vào Page Elements, chỉnh sửa tiện ích có id HTML1 và đặt vào phần nội dung của tiện ích với cấu trúc như sau.

<div id="HTML1" style="cursor:move; border:0px;">
Nội dung code tiện ích có id là HTML1
</div>
<script type="text/javascript">new Draggable('HTML1');</script>

Tương tự như vậy bạn có thể áp dụng cho các tiện ích khác với id như HTML2, HTML3, …
More about →
vào lúc 01:23 { Add nhận xét }
Nhãn:

GỞI MAIL "VƯỢT THỜI GIAN"

Người đăng: yeu mai em

Sắp đến ngày trọng đại của người thân (ngày cưới, sinh nhật...) những câu chúc may mắn gởi đến ngày đó là việc làm đầy ý nghĩa. Tuy nhiên đến ngày đó bạn có thể quên hoặc một lý do nào đó (đi công tác xa, bận rộn...) bạn không thể gởi mail để chúc mừng được thì sao?
Chính vì thế việc lên lịch sẳn những lời chúc, những mail chúc mừng gởi đến đúng hẹn sẽ rất cần thiết. Bạn có thể gởi mail chúc mừng "vượt thời gian" do bạn thiết lập trước trong tương lai.
Tất cả những gì bạn cần là chương trình Auto Mail Sender Standard Edition. Bạn có thể tải tiện ích này TẠI ĐÂY.
Trong lần khởi động đầu tiên, bạn cần tạo cho mình một tài khoản Email (Gmail, Hotmail). Sau khi nhấn Yes, một hộp thoại thiết lập tài khoản Email sẽ xuất hiện. Trên hộp thoại bạn nhấn Add, một trình đơn ngữ cảnh xuất hiện, sau đó bạn nhấn Gmail Account hoặc Hotmail Account (tùy theo bạn sử dụng).


Bước kế tiếp bạn nhập địa chỉ và Password của mình vào khung yêu cầu. Sau khi nhập đầy đủ thông tin, bạn nhấn Save & Close.


Bây giờ tài khoản của bạn đã được thiết lập. Bây giờ bạn thoát ra và nhấn vào biểu tượng của tiện ích trên desktop, giao diện chính của chương trình xuất hiện để cho bạn soạn thảo những lời chúc cho người thân bạn bè với 2 chế độ Plan Text và Rich Text (chức năng chèn hình, nhạc...).


Sau khi soạn thư xong, bước quan trọng đó là thiết lập thời gian gửi. Bạn vào Schedule để thiết lập thời gian tự gửi đúng hẹn, tại đây bạn có nhiều lựa chọn để gửi tự động như hàng ngày,hàng tuần, hàng tháng, hàng năm, tự xác định (Specific), xong bấm Add > Close để đóng  lại.


Quay lại giao diện chương trình bấm Send để gởi đi.


Đến đây mọi việc xem như hoàn tất, bạn có thể yên tâm việc gửi thư chúc mừng vì chương trình đã gửi hộ bạn đến người thân, bạn bè theo đúng thời gian mà bạn thiết lập.
Ngoài cách trên bạn cũng có thể vào TRANG NÀY để gởi thư "vượt thời gian" trực tuyến (không cần cài đặt phần mềm nào khác, có thể sử dụng cho Yahoo, Gmail)
More about →
vào lúc 00:35 { Add nhận xét }
Nhãn: