Tuesday, November 30, 2010

Cài đặt tiện ích Nhận xét mới nhất từ Disqus

(Huynh Nhat Ha's Blog) -- Nếu bạn sử dụng Hệ thống nhận xét Disqus cho blogspot của mình thì các tiện ích Nhận xét mới nhất dành cho Blogger không còn tương thích nữa. Vì thế bạn cần sử dụng tiện ích Nhận xét mới nhất (Recent Comments) của Disqus.

Tiện ích Recent Comments của Disqus có điểm ưu việt là nhận xét có ảnh đại diện. Để cài đặt tiện ích này cho blog của mình, bạn cần đăng nhập Disqus. Sau đó vào Admin >> Tools >> Recent Comments. Ở khung lấy code bạn copy toàn bộ đoạn code trong đó rồi đưa vào một tiện ích HTML/JavaScript trên Blogger là OK.

Hoặc đơn giản hơn, nếu bạn nhớ shortname khi đăng ký tài khoản Disqus thì chỉ cần thay shortname (shortname của tôi là huynh-nhat-ha) vào đoạn code sau đây rồi đặt vào một tiện ích HTML/JavaScript trên Blogger là OK.

<div id="recentcomments" class="dsq-widget"><h2 class="dsq-widget-title">Nhận xét mới nhất</h2><script type="text/javascript" src="http://huynh-nhat-ha.disqus.com/recent_comments_widget.js?num_items=7&hide_avatars=0&avatar_size=32&excerpt_length=200"></script></div

Hiệu ứng đàn xếp trượt ngang sử dụng Javascript

Tại trang Leigerber có giới thiệu Slidemenu là một script nhỏ với hiệu ứng đàn xếp theo chiều ngang có thể được sử dụng cho việc tạo menu, trình chiếu hình ảnh hoặc nội dung. Script này tự động điều chỉnh số thành phần trong hiệu ứng đàn xếp. Nó đã được thử nghiệm trong tất cả các công cụ trình duyệt và hoạt động tốt.

Xem Demo.

Nếu bạn thích hiệu ứng này cho trang web của mình thì thực hiện theo các bước sau đây.

1. Đặt toàn bộ đoạn code dưới đây vào trước thẻ </head>.

<style type='text/css'>
.sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
</style>
<script src='http://sandbox.leigeber.com/slidemenu/slidemenu.js' type='text/javascript'></script>

2. Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>).

<ul id="sm" class="sm">
<li>Nội dung 1</li>
<li>Nội dung 2</li>
<li>Nội dung 3</li>
</ul>

3. Gọi chức năng onload bằng cách thay thẻ <body> bằng <body onload="slideMenu.build('sm',200,10,10,1)"> hoặc có thể đặt đoạn code sau đây vào trước thẻ </body>.

<script type='text/javascript'>slideMenu.build('sm',200,10,10,1);</script>

Chú ý thông số đầu tiên (sm) là id cho danh mục bạn muốn tạo hiệu ứng đàn xếp. Thông số thứ 2 (200) là bề rộng bạn muốn phần xếp mở rộng ra. Thông số thứ 3 (10) là biến thời gian gọi chức năng trượt. Thông số thứ 4 (10) là tốc độ hiệu ứng với số 1 là nhanh nhất. Thông số cuối cùng tùy chọn và là số ám chỉ phần được mở rộng khi hiệu ứng được load xong.

Tiện ích Bài viết mới nhất chạy marquee

Tiện ích Bài viết mới nhất là một trong những tiện ích cần thiết nhất cho blog của bạn. Có nhiều kiểu tiện ích Bài viết mới nhất và mỗi tiện ích đều có những tính năng riêng. Trước khi quyết định cài đặt lâu dài vào blog của bạn thì bạn nên xem xét tiện ích nào phù hợp với blog của bạn và đặc biệt là tiện ích đó phải thu hút sự chú ý của người đọc.

Tham khảo từ tiện ích Bài viết mới nhất dạng cơ bản (không có hình đại diện), thêm mắm thêm muối :35) rồi gọt đẽo, mài giũa tôi đã cho ra đời một tiện ích mới có tên Tiện ích Bài viết mới nhất chạy marquee (Marquee Recent Posts Widget).

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


Bài viết mới nhất


Cài đặt tiện ích này quả thật rất đơn giản. Bạn chỉ việc đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript trên sidebar blogspot của bạn là OK.

<style type='text/css'>
#marqueeposts {width:300px;margin:0;}
.marqueetitle {margin:5px 0 0 0px; background-color:#dcdcdc; padding:0 0 0 0px; text-align:justify;}
.marqueetitle a {color: #5f9ea0; font-weight:bold;font-family:Arial !important;font-size:12px !important;}
.marqueetitle a:hover {color:#FF9933 !important;text-decoration:none !important;}
.marqueetext {margin:2px 0 10px 0; border-bottom:1px solid #2F363E; padding:0px 0 8px 0; font-size:12px; text-align:justify}
.marqueemore a {color: #a52a2a; font-weight:normal !important;font-family:Arial !important;}
.marqueemore a:hover {text-decoration:none !important;}
.marqueedate {color:#008000}
</style>

<script type="text/javascript">
function showrecentposts(json) {
document.write('<marquee id="marqueeposts" direction="up" width="100%" scrollamount="' + postspeed + '" height="' + postheight + 'px" align="top" onMouseOver="stop()" onMouseOut="start()">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(Đọc thêm …)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "01";
monthnames[2] = "02";
monthnames[3] = "03";
monthnames[4] = "04";
monthnames[5] = "05";
monthnames[6] = "06";
monthnames[7] = "07";
monthnames[8] = "08";
monthnames[9] = "09";
monthnames[10] = "10";
monthnames[11] = "11";
monthnames[12] = "12";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write('<div class="marqueetitle">');
document.write('');
document.write(posttitle);
if (showpostdate == true) {
document.write(' <span class="marqueedate">[' + cdday + '/' + monthnames[parseInt(cdmonth,10)] + '/' + cdyear + ']</span>');
}
document.write('</div><div class="marqueetext">');
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent);
document.write(' <span class="marqueemore">... ' + readmorelink + '</span>');
}
}
document.write('</div>');
}
document.write('</marquee>');
}
</script>

<script type="text/javascript">
var numposts = 7; // số bài viết hiển thị
var showpostdate = true; // ngày đăng, đặt false để ẩn đi
var showpostsummary = true; // phần tóm tắt bài viết
var numchars = 100; // số ký tự phần tóm tắt
var postspeed = 2; // tốc độ chạy marquee
var postheight = 250; // chiều cao bài viết
</script>

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

<div style="text-align:center;">
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='down';">
<img src="https://sites.google.com/site/ngonngulaptrinhvn/files/marqueedown.gif"/>
</a>
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='up';">
<img src="https://sites.google.com/site/ngonngulaptrinhvn/files/marqueeup.gif"/>
</a>
</div>

Chú ý ở dòng #marqueeposts {width:300px;margin:0;}, bạn cần đặt width cho marqueeposts bằng hoặc nhỏ hơn width của sidebar; thay huynh-nhat-ha bằng tên blogspot của bạn.

Nếu bạn muốn hiển thị tiện ích này cho một Nhãn (Label) thì cần thay đoạn code

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

thành:

<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

Và đừng quên sửa huynh-nhat-ha thành tên blogspot của bạn nhé.

Tạo thanh menu sổ dọc sử dụng Scriptaculous

Thư viện Scriptaculous có thể được sử dụng để tạo hiệu ứng động trong việc tạo thanh menu sổ dọc. Ở đây xin giới thiệu kiểu menu sổ dọc do Sven Wappler phát triển có sử dụng Prototype + Scriptaculous.

Xem Demo 1.

Nếu bạn muốn tạo một thanh menu đẹp như vậy thì có thể thực hiện theo các bước sau đây.

1. Đặt toàn bộ đoạn code dưới đây vào trước thẻ </head>

<script src="http://www.wappler.eu/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="http://www.wappler.eu/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="http://www.wappler.eu/scriptaculous/swdropdownmenu/menu.js" type="text/javascript"></script>

<style type="text/css">
#menu{ background:#678;border-bottom:1px solid #ABC;border-top:1px solid #ABC;padding-left:10px;height:32px;width:100%}
#menu ul{ display:block;line-height:1em;list-style:none;margin:0 !important;padding:0 !important;z-index:90}
#menu ul li{ float:left;font-size:12px;line-height:1,5em;list-style-type:none;margin:0;padding:0}
#menu ul li a{ background:transparent;color:GreenYellow;display:block;font-weight:bold;line-height:32px;text-decoration:none;margin:0;padding:0 1em;width:auto}
#menu ul li a:hover{ color:#FFF;text-decoration:none}
#menu ul.level2,#menu ul.level3{ background:#678;border-top:1px solid #ABC;left:0;position:absolute;top:0;visibility:hidden}
#menu ul.level2 li,#menu ul.level3 li{ border-bottom:1px solid #ABC;float:none;margin:0;padding:0;width:150px}
#menu ul.level2 li a,#menu ul.level3 li a{ padding:0 1em}
#menu ul.level2 li a:hover,#menu ul.level3 li a:hover{ background-color:#456}
</style>

2. Thiết lập cấu trúc HTML như sau và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>.

<div id="menu">
<ul class="level1" id="root">
<li>
<a href="#">Menu 1 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 1.1.</a></li>
<li><a href="#">Submenu 1.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.2.1.</a></li>
<li><a href="#">Submenu 1.2.2.</a></li>
<li><a href="#">Submenu 1.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 1.3.</a></li>
<li>
<a href="#">Submenu 1.4. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 1.4.1.</a></li>
<li><a href="#">Submenu 1.4.2.</a></li>
<li><a href="#">Submenu 1.4.3.</a></li>
<li><a href="#">Submenu 1.4.4.</a></li>
</ul>
</li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 2</a></li>
<li class="sep">|</li>
<li><a href="#">Menu 3</a></li>
<li class="sep">|</li>
<li>
<a href="#">Menu 4 (+)</a>
<ul class="level2">
<li><a href="#">Submenu 4.1.</a></li>
<li>
<a href="#">Submenu 4.2. (+)</a>
<ul class="level3">
<li><a href="#">Submenu 4.2.1.</a></li>
<li><a href="#">Submenu 4.2.2.</a></li>
<li><a href="#">Submenu 4.2.3.</a></li>
</ul>
</li>
<li><a href="#">Submenu 4.3.</a></li>
</ul>
</li>
<li class="sep">|</li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>

Việc bạn cần làm là đặt tên các Menu và Submenu đồng thời đặt đường link tương ứng vào đoạn code ở trên.

Monday, November 29, 2010

Tạo sidebar menu trượt độc đáo sử dụng Scriptaculous

Scriptaculous là một thư viện JavaScript được xây dựng trên Prototype JavaScript Framework, cung cấp các hiệu ứng động trực quan và các thành phần giao diện người dùng thông qua Document Object Model (DOM).

Scriptaculous có thể được sử dụng để tạo hiệu ứng trượt độc đáo cho thanh menu. Hôm nay xin giới thiệu cách thực hiện kiểu menu trượt của tác giả Andrew Sellick. Tôi đã có điều chỉnh đôi chút so với bản gốc của tác giả. :47)

Xem Demo.

Bạn có thể tạo một kiểu menu như vậy cho website/webblog của mình theo các bước sau đây.

1. Đặt toàn bộ phần code dưới đây vào trước thẻ </head>.

<script type='text/javascript' src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="http://hacodeproject.googlecode.com/files/side-bar.js"></script>
<style type='text/css'>
#menuBar a{outline:none}
#menuBar a:active{outline:none}
#menuBar{text-align:left}
#menuBar h2{color:#FFF;font-size:110%;font-family:arial;margin:10px;font-weight:bold !important}
#menuBar h2 span{font-size:125%;font-weight:normal !important}
#menuBar ul{margin:0;padding:0}
#menuBar li{margin:0 10px 3px;padding:2px;list-style-type:none;display:block;background-color:#DA1074;width:147px;color:#FFF}
#menuBar li a{width:100%}
#menuBar li a:link,#menuBar li a:visited{color:#FFF;font-family:verdana;font-size:100%;text-decoration:none;display:block;margin:0;padding:0;width:100%}
#menuBar li a:hover{color:#FFF;text-decoration:none;background-color:#000}
#menuBar{position:fixed;width:auto;height:auto;top:170px;right:-5px;background-image:url(http://bit.ly/gLVyXX);background-position:top left;background-repeat:repeat-y}
#menuBarTab{float:left;height:137px;width:28px}
#menuBarTab img{border:0 solid #FFF}
#menuBarContents{float:left;overflow:hidden !important;width:175px;height:170px}
#menuBarContentsInner{width:200px}
</style>

Bạn có thể tùy ý điều chỉnh thuộc tính CSS.

2. Thiết lập cấu trúc HTML như sau và đặt vào phần thân trang web (giữa 2 thẻ <body>, </body>.

<div id="menuBar">
<a href="#" id="menuBarTab"><img src="http://bit.ly/eA8PG7" alt="menuBar" title="menuBar" /></a>
<div id="menuBarContents" style="display:none;">
<div id="menuBarContentsInner">
<h2>Menu<span>bar</span></h2>
<ul>
<li><a href='http://huynh-nhat-ha.blogspot.com/' title='Home'>Home</a></li>
<li><a href='http:// huynh-nhat-ha.blogspot.com/feeds/posts/default' title='Suscribe Post Feed'>RSS</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/feeds/comments/default' title='Suscribe Comment Feed'>Comment RSS</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/contact.html' title='Contact'>Contact</a></li>
</ul>
</div>
</div>
</div>
Lúc này bạn chỉ việc thay đổi các tên menu và liên kết tương ứng trong cấu trúc HTML ở trên là bạn sẽ có một kiểu menu trượt độc đáo rồi đấy. Kiểu menu này có thể được cài đặt dễ dàng cho Blogger.

Hệ thống nhận xét Disqus trên các trang tĩnh (static page)

Về mặc định sau khi cài đặt Hệ thống nhận xét Disqus cho Blogger thì hệ thống này chỉ xuất hiện trên các trang bài viết (item) và không xuất hiện trên các trang tĩnh (static page). Và khi đó thì các trang tĩnh vẫn giữ nguyên hệ thống nhận xét mặc định của Blogger. Như vậy blog của bạn sẽ tồn tại 2 hệ thống nhận xét, làm cho blog thiếu đi sự đồng nhất.

Lúc này bạn sẽ nghĩ ngay đến việc làm cách nào để hiển thị Hệ thống nhận xét Disqus trên các trang tĩnh. Muốn làm được điều này bạn chỉ cần thực hiện theo hướng dẫn sau đây.

Đăng nhập Blogger vào chỉnh sửa Template, chọn Expand Widget Templates. Tìm đến những dòng mã có dạng tương tự như sau:

<b:includable id='main'>
<script type='text/javascript'>
var disqus_shortname = &#39;huynh-nhat-ha&#39;;
var disqus_blogger_current_url = &#39;<data:blog.url/>&#39;;
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#comments {display:none;}
</style>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.post-comment-link { visibility: hidden; }
</style>
</b:if>
<script type='text/javascript'>
(function() {
var bloggerjs = document.createElement(&#39;script&#39;);
bloggerjs.type = &#39;text/javascript&#39;;
bloggerjs.async = true;
bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
})();
</script>
</b:includable>

Bạn chỉ việc xóa những dòng mã được đánh dấu màu đỏ rồi lưu Template là OK. Hy vọng bạn sẽ giải tỏa phiền muộn nếu gặp tình huống này :27).

Sunday, November 28, 2010

Tùy biến CSS cho Hệ thống nhận xét Disqus

Tôi đã sử dụng Hệ thống nhận xét Disqus cho blog của mình đã được một tuần lễ và tôi cảm thấy rất hài lòng :6). Có một điều tôi mới phát hiện là chúng ta có thể điều chỉnh phần Comment trên Hệ thống nhận xét Disqus như chúng ta từng có thể làm điều đó dễ dàng trên hệ thống nhận xét mặc định của Blogger.

Bạn có thể điều chỉnh màu nền, font chữ… cho phần nhận xét một cách dễ dàng bằng những thuộc tính CSS đơn giản. Nếu background Template của bạn có màu sáng thì có thể không cần phải chỉnh Disqus Comment làm gì, tuy nhiên nếu background Template của bạn có màu tối thì cũng nên điều chỉnh background cho Disqus Comment.

Để làm được điều này, trước tiên bạn cần đăng nhập tài khoản Disqus trên trang Disqus.com, sau đó vào Admin >> Settings >> Appearance kéo xuống dưới cùng ở phần Custom CSS rồi dán đoạn mã dưới đây vào phần khung chỉnh sửa CSS. Sau đó nhấn Save Changes để lưu.

/* Everything Disqus on your page is contained within this. */
#disqus_thread {
background-color: #000000;
color: #ffffff;
border-style: solid;
border-color: #cccccc;
padding: 5px;
}

Nếu bạn rành về CSS thì bạn có thể tha hồ khám phá và thêm những thuộc tính theo ý thích của bạn vào đoạn mã CSS dưới đây.

/*The header at the top of posts.*/
.dsq-comment-header {
background-color: #ffffff;
font-family:"verdana",sans-serif;
font-size: 12px;
height: 50px;
}

/*The comments.*/
.dsq-comment-message {
font-family:"verdana",sans-serif;
font-size: 11px;
color: #cccccc;
}

/*The box where a post is typed into.*/
textarea {
background-image: none;
background-repeat: repeat;
border: #00A8D6 2px solid; /* light blue border */
}

texarea:after {
}

/*"Add New Comment" and "# Comments" are enclosed in h3 tags.*/
h3 {}

/*The entire comment thread list.*/
#dsq-comments {}

/*A single comment in the thread.*/
.dsq-comment {
border: #00A8D6 2px solid; /* light blue border */
margin-botom: 15px;
}

/*The avatar image for the registered.*/
.dsq-header-avatar img {}

/*The message body of a single comment post.*/
#dsq-content #dsq-comments .dsq-comment-body { }

/*The footer contains the link to "reply."*/
.dsq-comment-footer {}

/* The form elements (Name, Email, Website). */
input.form-text {
font-size: 100%;
}

/* The submit button "Post". */
input.submit {
background-color: #ffffff;
}

/* The main wrapper for the comment system. */
#dsq-content {
}

/* The toggle button for the thread options. */
#dsq-options-toggle {
/* display: none; */
}

/* The links within the thread Options */
#dsq-extra-links {
/* display: none; */
}

/* The comment rating arrows for posts. */
.dsq-comment-rate {
}

/* This is the meta information about the post (time stamp and points). */
.dsq-header-meta {
}

/* The message body of a single comment post.
.dsq-comment-body {
}

/* This contains and determines the style for the pagination links. */
#dsq-pagination {
}

Giới thiệu một kiểu phân trang đẹp cho Blogger

Có nhiều kiểu phân trang đẹp :7) cho Blogger. Hôm nay xin giới thiệu một kiểu phân trang về cơ bản cũng khá giống với nhiều kiểu khác song hơi khác một chút về cách cài đặt.

Trước khi cài đặt, bạn nên xem trang Demo.

Bước 1. Đăng nhập Blogger, vào chỉnh sửa Template. Đặt đoạn code css dưới đây vào trước dòng ]]></b:skin>.

.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;
font-size:11px;
font-weight:bold;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #9aafe5;
margin:0 1px;
padding:3px 4px;
}
.showpageNum a:hover {
border: 1px solid #9aafe5;
background-color:#33CCFF;
color:#fff;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #2e6ab1;
background: #2e6ab1;
margin:0 1px;
padding:3px 4px;
font-size:11px;
font-weight:bold;
}
.showpageOf {
text-decoration:none;
padding:3px 4px;
margin: 0 1px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #9aafe5;
padding:3px 4px;
}
.showpage a:hover {
text-decoration:none;
color: #33CCFF;
}

Bước 2. Đặt đoạn code dưới đây vào trước thẻ </body>.

<script type='text/javascript'>
var pageCount=10;
var displayPageNum=4;
var upPageWord ='&#171; Prev';
var downPageWord ='Next &#187;';
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #2e6ab1;" class="showpageOf"> Total: ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>

Tiếp theo bạn cần định cấu hình bài đăng trên trang chính là 10 bài đăng. Vào Phần tử trang (Page Elements) >> Chỉnh sửa Bài đăng trên Blog (Edit Blog Posts) chọn Số bài đăng trên trang chính là 10.

Tất nhiên bạn có thể thay đổi những con số theo ý thích của bạn. Ví dụ nếu bạn đặt số bài đăng trên trang chính là 7 thì dòng var pageCount=5; phải được đổi thành var pageCount=7;.

Cách hiển thị số lượng nhận xét Disqus trên Blogger

Những ai thích sử dụng Hệ thống nhận xét Disqus cho Blogger, ban đầu sử dụng sẽ gặp một số vấn đề nhỏ cảm thấy không hài lòng, tuy nhiên sau khi tìm cách giải quyết được thì kết quả sẽ thật tuyệt vời. Một trong những vấn đề đó là link báo số lượng nhận xét Disqus không còn tương thích với Template, tức là sẽ không hiển thị số nhận xét chính xác cho mỗi bài viết sau khi cài đặt Hệ thống nhận xét Disqus.

Đoạn mã thông báo số lượng nhận xét trên các trang Label và trang chủ thường có dạng như sau:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>

Đoạn mã này nằm trước dòng <div style='clear: both;'/> <!-- clear for photos floats --> trong Template ở chế độ Mở rộng mẫu tiện ích.

Để hiển thị chính xác số lượng nhận xét, bạn chỉ cần thay đoạn mã nêu trên bằng đoạn mã bên dưới.

<b:if cond='data:post.allowComments'>
<!-- +disqus -->
<a class='dsq-comment-count comment-link commentslink' expr:href='data:post.url + "#disqus_thread"' rel='nofollow' />
<!-- -disqus -->
</b:if>

Hy vọng các bạn sử dụng Disqus sẽ hài lòng với thủ thuật đơn giản này. Tôi sẽ không ngừng nghiên cứu và ứng dụng những cái mới cho Hệ thống nhận xét Disqus bởi vì tôi là một trong những người thích dùng Disqus. :18)

Saturday, November 27, 2010

Tự động ẩn hiện thanh Navbar của Blogger

Blogger mặc định một thanh Navbar trên cùng của blog bao gồm các menu như Tìm kiếm, Chia sẻ, Báo cáo lạm dụng, Blog tiếp theo … Đa số blogger không thích hiển thị thanh Navbar này. Để dấu nó đi bạn chỉ cần đặt đoạn code dưới đây vào trước thẻ </head>.

<style type="text/css">
#navbar-iframe {height:0px; visibility:hidden; display:none; }
</style>

Tuy nhiên bạn có thể làm cho thanh Navbar ẩn hiện bằng một nút Ẩn/Hiện Navbar bởi vì về một phương diện nào đó, thanh Navbar của Blogger cũng có ích đấy.

Để làm được điều này, trước tiên bạn cần đặt đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{nav.style.visibility="visible";
nav.style.display="block";}
else
{nav.style.visibility="hidden";
nav.style.display="none";}
}
</script>

<style type="text/css">
#navbar-iframe {visibility: hidden; display: none;}
</style>

Tiếp theo bạn đặt đoạn code dưới đây vào vị trí cần hiển thị nút Ẩn/Hiện Navbar, có thể đặt trong một tiện ích HTML/JavaScript hoặc ở thanh Menu trên cùng của Blog.

<span style="cursor:pointer;" onclick="ShowHideNav();">
Ẩn / Hiện Navbar
<a style="visibility:hidden;">
</a></span>

Bạn có thể thay dòng Ẩn / Hiện Navbar bằng một liên kết hình ảnh <img src="URL_hình ảnh"/>.

Bạn hãy thử click vào icon Blogger ở góc trái trên cùng trên thanh Menu của Blog này, bạn sẽ thấy kết quả của thủ thuật này. Và tôi e rằng bạn sẽ ngay lập tức thử nghiệm cho blog của mình rồi đấy :29).

Friday, November 26, 2010

Biểu tượng cảm xúc kiểu Nhật cho Hệ thống nhận xét Disqus

Hiện nay có 3 plugin Hệ thống nhận xét :5) cho Blogger tiêu biểu là Disqus, Intensedebate và JS-Kit Echo. Riêng JS-Kit Echo yêu cầu phí dịch vụ thì hai plugin miễn phí còn lại có tính năng rất tốt. Tôi nhận thấy Hệ thống nhận xét Disqus có nhiều điểm ưu việt :17) hơn, và đặc biệt là rất dễ sử dụng. Bạn có thể tham khảo cách cài đặt mà một số Blog khác đã giới thiệu. Ví dụ ở trang Tôi yêu Google.

Một khuyết điểm ở Disqus là không có tiện ích chèn biểu tượng cảm xúc vào nhận xét. Hy vọng sau này Disqus sẽ phát triển tính năng này. Trong khi chờ đợi những sáng kiến mới từ Disqus, tôi tình cờ nghĩ ra một cách là dùng biểu tượng cảm xúc kiểu Nhật cho nhận xét trên hệ thống Disqus. Biểu tượng cảm xúc kiểu Nhật có tên là Emoji, hay Kaomoji rất khác biệt so với các biểu tượng cảm xúc kiểu phương Tây. Chúng được đọc theo chiều ngang.

Sử dụng chúng như thế nào đây? Rất đơn giản, chỉ cần lướt qua danh mục biểu tượng cảm xúc ở đây, tìm biểu tượng mà bạn thích, đánh dấu nó bằng cách kéo con trỏ bôi đen nó, copy rồi dán vào khung nhận xét Disqus. Sử dụng biểu tượng cảm xúc kiểu Nhật cũng khá thú vị đấy bạn ạ.

Thursday, November 25, 2010

Đưa biểu tượng cảm xúc vào nhận xét trên Blogger

Đối với blog trên Wordpress, việc đưa biểu tượng cảm xúc (emoticons) vào các nhận xét thật dễ dàng vì Wordpress có tính năng tự động chuyển các nhóm ký tự định sẵn thành các biểu tượng cảm xúc, mặt cười. Tuy nhiên đối với Blogger thì phải dùng đến thủ thuật.

Cộng đồng Blogger cũng đã giới thiệu nhiều cách đưa biểu tượng cảm xúc Yahoo Messenger vào nhận xét, có thủ thuật hoạt động tốt, có thủ thuật không thể hoạt động được, có thủ thuật hoạt động được trên Template này nhưng lại không hoạt động được dối với Template khác vì nhiều lý do khác nhau. Hôm nay tôi xin giới thiệu một cách, khác với những cách mà bạn tìm thấy được trên Internet.

1. Sau khi đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dán đoạn mã dưới đây vào sau dòng ]]></b:skin> hoặc vào trước thẻ </head>.

<!-- Emoticons -->
<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>
<script type='text/javascript'>
//<![CDATA[
function emoticonComentario(cual) {
if(!document.getElementById) {return;}
bodyText = document.getElementById(cual);
cualTexto = bodyText.innerHTML;
// :-A
cualTexto = cualTexto.replace(/:-\A/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons387.gif" />');
// :-Z
cualTexto = cualTexto.replace(/:-\Z/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons505.gif" />');
// :-C
cualTexto = cualTexto.replace(/:-\C/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons358.gif" />');
// :-X
cualTexto = cualTexto.replace(/:-\X/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons390.gif" />');
// :-E
cualTexto = cualTexto.replace(/:-\E/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons305.gif" />');
// :-F
cualTexto = cualTexto.replace(/:-\F/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons290.gif" />');
// :-G
cualTexto = cualTexto.replace(/:-\G/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons504.gif" />');
// :-H
cualTexto = cualTexto.replace(/:-\H/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons340.gif" />');
// :-I
cualTexto = cualTexto.replace(/:-\I/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons374.gif" />');
// :-J
cualTexto = cualTexto.replace(/:-\J/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons281.gif" />');
// :-K
cualTexto = cualTexto.replace(/:-\K/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons325.gif" />');
// :-L
cualTexto = cualTexto.replace(/:-\L/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons253.gif" />');
// :-M
cualTexto = cualTexto.replace(/:-\M/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons180.gif" />');
// :-N
cualTexto = cualTexto.replace(/:-\N/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons303.gif" />');
// :-O
cualTexto = cualTexto.replace(/:-\O/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons336.gif" />');
// :-P
cualTexto = cualTexto.replace(/:-\P/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons393.gif" />');
// :-Q
cualTexto = cualTexto.replace(/:-\Q/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons451.gif" />');
// :-R
cualTexto = cualTexto.replace(/:-\R/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons292.gif" />');
// :-(
cualTexto = cualTexto.replace(/:-\(/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons415.gif" />');
// :-T
cualTexto = cualTexto.replace(/:-\T/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons413.gif" />');
// :-a
cualTexto = cualTexto.replace(/:-\a/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons324.gif" />');
// :-e
cualTexto = cualTexto.replace(/:-\e/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons403.gif" />');
// :-i
cualTexto = cualTexto.replace(/:-\i/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons294.gif" />');
// :-o
cualTexto = cualTexto.replace(/:-\o/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons419.gif" />');
// :-w
cualTexto = cualTexto.replace(/:-\w/g,'<img src="http://www.mundodosgifs.com/emoticons/emoticons285.gif" />');
bodyText.innerHTML = cualTexto;
}
//]]>
</script>

2. Dùng tổ hợp phím Ctrl + F tìm đến đoạn mã như bên dưới.

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>

</b:if>
</dd>

Thay dòng <p><data:comment.body/></p> bằng đoạn mã như bên dưới.

<p expr:id='&quot;combody-&quot; + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
cual = &quot;combody-&quot; + &quot;<data:comment.anchorName/>&quot;;
emoticonComentario(cual);
</script>

3. Tiếp tục tìm đến dòng mã:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Rồi dán vào trước nó bằng đoạn mã bên dưới.

<center>
<table bgcolor='white' border='1'>
<tbody>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons387.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons505.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons358.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons390.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons305.gif'/></td>
</tr>
<tr>
<td>:-A</td>
<td>:-Z</td>
<td>:-C</td>
<td>:-X</td>
<td>:-E</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons290.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons504.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons340.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons374.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons281.gif'/></td>
</tr>
<tr>
<td>:-F</td>
<td>:-G</td>
<td>:-H</td>
<td>:-I</td>
<td>:-J</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons325.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons253.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons180.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons303.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons336.gif'/></td>
</tr>
<tr>
<td>:-K</td>
<td>:-L</td>
<td>:-M</td>
<td>:-N</td>
<td>:-O</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons393.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons451.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons292.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons415.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons413.gif'/></td>
</tr>
<tr>
<td>:-P</td>
<td>:-Q</td>
<td>:-R</td>
<td>:-(</td>
<td>:-T</td>
</tr>
<tr>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons324.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons403.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons294.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons419.gif'/></td>
<td><img src='http://www.mundodosgifs.com/emoticons/emoticons285.gif'/></td>
</tr>
<tr>
<td>:-a</td>
<td>:-e</td>
<td>:-i</td>
<td>:-o</td>
<td>:-w</td>
</tr>
</tbody>
</table>
</center>

4. Lưu Template.

Tiếp tục vào Settings (Cài đặt) >> Comments (Nhận xét). Ở mục Comment Form Placement, chọn Embedded below post.

:ha Chuẩn bị sắp ra lò thủ thuật :29) Đưa biểu tượng cảm xúc vào bài viết và nhận xét Blogger (Emoticons for Blogger Posts and Comments). :27)

Wednesday, November 24, 2010

Công cụ viết chữ ngược

Chắc hẳn bạn từng nghe đến nghệ thuật viết chữ ngược. Chữ ngược thường được sử dụng trên MySpace, FaceBook, Hi5, MSN, Blogger … vì mục đích giải trí và gây sự hiếu kỳ cho mọi người. Thời học sinh tôi có một người bạn thích luyện viết chữ ngược và về sau nó trở thành một kiểu thư pháp rất độc đáo.

Ιooʇ sıɥʇ ʎq sʇxǝʇ pǝʇɹǝʌuı Ιɐıɔǝds ǝɥʇ ǝʇɐǝɹɔ uɐɔ noʎ

Dưới đây là công cụ viết chữ ngược tự động. Bạn chỉ cần đánh bất kỳ đoạn văn bản nào (tiếng Anh, tiếng Việt không dấu) vào khung dưới đây, sẽ thấy chữ ngược được tạo ra một cách tự động.


Văn bản gốc:



Chữ ngược :






Hiệu ứng tuyết rơi cho con trỏ trên Blog

Có nhiều kiểu hiệu ứng cho con trỏ trên trang web. Ở đây xin giới thiệu hiệu ứng tuyết rơi khi rê con trỏ trên khắp các vị trí của trang web.

Bạn chỉ cần đặt đoạn javascript dưới đây vào trước thẻ </head>. Đối với Blogger có thể đặt trong một tiện ích HTML/JavaScript.

<script type='text/javascript'>
// <![CDATA[
var colour="blue";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Bạn có thể thay đổi màu sắc (white, green, yellow, red, brown...) cho tuyết rơi trong dòng var colour="blue". Chú ý đoạn javascript này có dùng trục tọa độ ox, oy nên sẽ gây xung đột code CSS đối với một số Blogger Template. Ví dụ điển hình là ở trang sachtroi.blogspot.com có sử dụng hiệu ứng này dẫn đến hậu quả là một khoảng trống dài thăm thẳm phía sau phần Footer và xuất hiện thanh cuộn nằm ngang trên công cụ trình duyệt Internet Explorer 8, như hình minh họa bên dưới.

Cách khắc phục lỗi như vậy đối với trang này chỉ có một cách đơn giản là loại bỏ đoạn javascript ở trên ra khỏi Template.

Cách loại bỏ xung đột giữa hai javascript

Nếu bạn chỉ có một đoạn javascript trên trang web thì trang web của bạn hoạt động tốt. Đôi khi bạn thêm vào một đoạn javascipt khác thì một trong hai đoạn sẽ không hoạt động hoặc cả hai cùng không hoạt động. Nguyên nhân là do sự xung đột giữa 2 đoạn javascript này mà căn nguyên nằm ở sự trùng lặp về xử lý sự kiện (event-handler), đặc biệt là chức năng onload cho thẻ <body>.

Cách xử lý xung đột là kết hợp 2 chức năng onload lại với nhau.

Lấy ví dụ Script #1 có chức năng onload đưa trực tiếp vào thẻ <body> như thế này:

<body onload="dothis()">

Script #2 có chức năng onload nằm ngay trong chính script như thế này:

window.onload=dothat();

Bạn có thể thấy hai script trên đều sử dụng chức năng onload. Vậy cái nào hoạt động được, thường thì cái nằm trong thẻ <body>.

Nếu bạn kết hợp 2 chức năng vào trong thẻ <body> thì bạn sẽ loại bỏ được xung đột. Sau đây là sự kết hợp 2 script nêu trên.

<body onload="dothis();dothat()">

Nếu bạn có nhiều hơn 2 javascript thì cách xử lý tương tự.

Ví dụ 2.

Script 1: <body onload="dothis()">
Script 2: <body onload="dothat()">

Xử lý: <body onload="dothis();dothat()">

Ví dụ 3:

Script 1: window.onload=dothis
Script 2: window.onload=dothat

Xử lý: <body onload="dothis();dothat()">

Tạo Contact Form cho blog với Foxyform

Trên Blogger, bạn không thể tạo một Contact Form một cách độc lập mà phải nhờ đến các website chuyên cung cấp dịch vụ tạo Contact Form miễn phí. Ở đây tôi xin giới thiệu trang FoxyForm.

Vào trang http://www.foxyform.com/. Chọn các option như hình bên dưới.

Điền địa chỉ email của bạn để dùng cho việc nhận email liên hệ. Sau đó nhấn nút Create Formular. Bạn sẽ được chuyển đến trang lấy code cho Contact Form. Đoạn code đó thường có dạng như sau:
<!-- Do not change code! -->
<table cellspacing="0" cellpadding="0" border="0"><tr><td><iframe width="400" height="490" frameborder="0" src="http://www.foxyform.com/form.php?id=XXXXX&sec_hash=XXXXXXXXXXX"></iframe></td></tr><tr><td align="center"><a style="font:8px Arial;color:#5C5C5C;" href="http://www.foxyform.com">foxyform.com</a></td></tr></table>
<!-- Do not change code! -->
Bạn có thể xóa đi đoạn code được đánh dấu màu đỏ. Sau đó đặt toàn bộ phần code còn lại vào một trang tĩnh (static page) để tạo trang Liên hệ cho blog của bạn.

Tuesday, November 23, 2010

Tiện ích Nhận xét mới nhất có ảnh đại diện

Có một blogger hỏi tôi rằng, cộng đồng Blogger đã có nhiều thủ thuật tạo tiện ích Bài viết mới nhất có ảnh đại diện (Recent Posts with Thumbnai Widget) và từ đó cũng xuất hiện tiện ích Nhận xét mới nhất (Recent Comments Widget). Tuy nhiên vẫn chưa thấy có bài viết nào nói về tiện ích Nhận xét mới nhất có ảnh đại diện (Recent Comments with Thumbnail Widget).

Tôi không phải là chuyên gia về webdesign hoặc lập trình viên gì cả. Tôi nghiên cứu về webdesign chỉ bằng con đường tự học vì thế kiến thức vẫn còn hạn chế lắm. Tuy nhiên sau một thời gian trăn trở, mày mò, loay hoay với một mớ hỗn độn về code, chỉnh đi chỉnh lại từ tiện ích Recent Comments Widget và cuối cùng tôi đã thử nghiệm thành công trên Blog của mình với tiện ích Recent Comments width Thumbnail Widget.

Tiện ích Nhận xét mới nhất có ảnh đại diện hiển thị những nhận xét mới nhất kèm theo ảnh đại diện của người nhận xét, bao gồm Admin, Blogger user và nặc danh (Anonymous).

Để cài đặt tiện ích này vào Blog của bạn, chỉ cần đặt toàn bộ phần code dưới đây vào một tiện ích HTML/Javascript là xong.
<style type="text/css">
.halink li{
padding:5px;
margin:0 0 0px 0px;
border-bottom:1px dotted #234;
min-height:70px;
}
.halink li:hover{
background: #F3F7FA;
}
.halink li img {
height:50px;
width:50px;
list-style:none;
float:left;
margin-right:10px;
margin-top:10px;
}
.halink li a {
list-style:none;
color:#2266AA;
font-size:11px;
}
</style>
<script type="text/javascript">
function showrecentcomments(json) {
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;
}
}
var photoslink=new Array()
photoslink[0]='<img src="http://bit.ly/hqSVKw"/>';
admin='<img src="URL_ảnh đại diện của bạn là Admin"/>';
anonymous='<img src="URL_ảnh đại diện Nặc danh"/>';

document.write('<div class="halink">','<li>');

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";
monthnames[2] = "tháng 02";
monthnames[3] = "tháng 03";
monthnames[4] = "tháng 04";
monthnames[5] = "tháng 05";
monthnames[6] = "tháng 06";
monthnames[7] = "tháng 07";
monthnames[8] = "tháng 08";
monthnames[9] = "tháng 09";
monthnames[10] = "tháng 10";
monthnames[11] = "tháng 11";
monthnames[12] = "tháng 12";
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, "");

if (!standardstyling) document.write('<div class="bbrecpost">');


if (showcommentdate == true) document.write(' ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' năm ' + cdyear + ' ');

if( entry.author[0].name.$t == 'Tên bạn'){ document.write(admin)}
else{
if( entry.author[0].name.$t == 'Anonymous'){ document.write(anonymous)}
else{document.write(photoslink)}
}
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '' +'</a> ');
if (showposttitle == true) document.write(' nhận xét về: ' + posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<div class="txtmsg"></div>');
if (comment.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(comment);
if (standardstyling) document.write('</i>');}

else
{
if (standardstyling) document.write('<i>');
comment = comment.substring(0, numchars);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + alturl + '">(Đọc tiếp ...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');

document.write('</div>','</li>');

}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
if (!standardstyling) document.write('</div>');

}
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = true;
var showposttitle = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments"></script>
Bạn cần điều chỉnh những chỗ được đánh dấu màu đỏ. Bạn cần thay URL cho ảnh đại diện của bạn là Admin và ảnh đại diện Nặc danh; có thể thay đổi số nhận xét được hiển thị (numcomments).

Tiện ích thống kê blog bản hoàn thiện

Tiện ích thống kê blog giúp người đọc và admin nắm được thông tin cơ bản về blog như tổng số bài viết, nhận xét, người đăng ký nhận bài viết qua email, hay thậm chí cả người theo dõi trên Twitter.

Để cài đặt tiện ích này, bạn chỉ cần dán toàn bộ phần mã dưới đây vào một tiện ích HTML/Javascript.

<script language='javascript' type='text/javascript'>
function snfbc(json){
document.write(parseInt(json.value.items[0].feed.entry.circulation));
}
function xfeedburner(uri){
if(uri){
document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>');
} else{
return false;
}
}

function sntwitter(json){
document.write(parseInt(json.followers_count));
}
function xtwitter(user){
if(user){
document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>');
} else{
return false;
}
}

</script>
<div style='float:left;padding:8px;'>
<img src="http://img72.imageshack.us/img72/5376/twittery.png" style="margin-right: 8px; float:left;" />
<a href="http://twitter.com/huynhatha" target="_blank" ><span style="float: left; margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xtwitter("huynhatha") </script> Người theo dõi</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial,Helvetica,sans-serif;">Theo dõi trên Twitter</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img638.imageshack.us/img638/3243/rsss.png" style="margin-right:8px;float:left;" />
<a href="http://feeds.feedburner.com/huynh-nhat-ha" target="_blank" ><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xfeedburner("huynh-nhat-ha") </script> Người đăng ký</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;">Đăng ký!</span></a>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img684.imageshack.us/img684/6793/usersh.png" style="margin-right:8px;float:left;" />
<span style="float:left;margin-top:2px;padding:0;font-size:18px;color:#000;font-family:Arial,Helvetica,sans-serif;">
<script style="text/javascript">
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Nhận xét</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#000;font-family:Arial, Helvetica, sans-serif;"></span>
</div><div style='clear:both;'/>

<div style='float:left;padding:8px;'>
<img src="http://img707.imageshack.us/img707/3875/bloggerf.png" style="margin-right:8px;float:left;" />
<a href="http://huynh-nhat-ha.blogspot.com/search/label/?max-results=999" target="_blank"><span style="float:left;margin-top:2px;padding:0;font-size: 18px; color:#000;font-family:Arial,Helvetica,sans-serif;">
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Bài viết</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size:12px; color:#000;font-family:Arial,Helvetica,sans-serif;">Xem tất cả!</span></a>
</div><div style='clear:both;'/>
Bạn cần thay đổi những phần được đánh dấu mảu đỏ lần lượt thành username trên Twitter, tên tài khoản Feedburner và tên địa chỉ blogspot của bạn.

Monday, November 22, 2010

Làm biến hình biểu tượng cảm xúc sử dụng CSS3

Trong một văn bản web, đôi khi người viết dùng một nhóm ký tự để tạo biểu tượng cảm xúc và ít nhiều biểu tượng đó nói lên được cảm xúc mà tác giả muốn bày tỏ.

Ví dụ (:   :-O

Sử dụng CSS3 có thể làm biến hình các biểu tượng cảm xúc này một cách độc đáo. Trước tiên, bạn hãy tạo phần CSS như dưới đây.
span.smile {
color: Cyan;
display: inline-block;
font-family: Tahoma;
font-size: 20px;
padding: 0 5px;
}
span.smile.left {
-webkit-transform: rotate(-90deg); /* Chrome y Safari */
-moz-transform: rotate(-90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
-o-transform: rotate(-90deg); /* Opera */
}
span.smile.right {
-webkit-transform: rotate(90deg); /* Chrome y Safari */
-moz-transform: rotate(90deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Internet Explorer */
-o-transform: rotate(90deg); /* Opera */
}
Tiếp đến là tạo cấu trúc HTML đơn giản như thế này.

<span class="smile right">:-)</span>

Bên dưới là kết quả một số biểu tượng cảm xúc sau khi sử dụng thủ thuật này.

Cách tạo favicon cho blog

Favicon là gì vậy? Favicon là từ viết tắt cho cụm từ tiếng Anh “favorite icon” có nghĩa là “biểu tượng ưa thích nhất”. Nó thường là biểu tượng hình vuông có kích cỡ 16×16, 32×32 hoặc 64×64 pixel có liên quan đến một website nào đó mà chúng ta sử dụng trên thanh địa chỉ của công cụ trình duyệt, trên các thanh Favorites hoặc Bookmarks của công cụ trình duyệt.

Favicon của Blogger là một chữ B màu trắng nằm trong hộp màu cam. Bạn cũng có thể tạo Favicon cho website hoặc blog của bạn một cách dễ dàng. Bạn cần tạo một hình favicon rồi upload nó lên một webhost hình ảnh, sau đó copy code liên kết trực tiếp của favicon rồi đưa vào một đoạn code HTML rồi dán vào Template.

Nếu không có thời gian nhiều thì bạn cũng có thể theo một cách dễ hơn và nhanh chóng chỉ trong vài phút thì có thể có được favicon.

Bước 1: Tìm một hình ảnh định dạng .jpg, .gif hoặc .png format mà bạn muốn làm favicon. Chỉnh kích cỡ hình thành dạng vuông ví dụ 250x250, 125x125 pixel hoặc nhỏ hơn. Bạn không cần lo ngại rằng hình của bạn quá lớn nhé. Công cụ dưới đây sẽ làm nhỏ hình của bạn lại cho thích hợp.Bạn cũng có thể tự tạo favicon tại địa chỉ favicon.cc.

Bước 2: Đến trang web Favicon Generator.

Chọn Browse hình mà bạn muốn làm favicon. Chọn “Upload it”. Sau đó bạn chỉ việc copy dòng code của favicon.

Bước 3: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML). Dán đoạn code vừa copy vào sau thẻ mở <head> như thế này.

<head>
<b:include data='blog' name='all-head-content'/>

<!--[if IE]>
<link href='URL_favicon' rel='shortcut icon' type='image/x-icon'/>
<![endif]-->
<link href='URL_favicon' rel='icon' type='image/x-icon'/>

<title><data:blog.pageTitle/></title>

Lưu Template là xong.

Mở blog của bạn và bạn sẽ thấy favicon sẽ hiện ra chỉ trong vài phút sau đó. Lưu ý favicon hiển thị tốt trên các công cụ trình duyệt như Firefox, Safari, Opera. Đối với IE có lúc hiển thị có lúc không hiển thị.

Tạo thanh menu động sử dụng jQuery

Thư viện jQuery có thể giúp ích nhiều trong việc tạo ra các thanh menu cho trang web. Dưới đây là một kiểu menubar có sử dụng thư viện jQuery.

Xem Demo.

Để tạo được thanh menu như thế này, bạn thực hiện theo các bước sau đây.

1. Đặt phần code CSS và Javascript sau đây vào trước thẻ </head>
<style type='text/css'>
ul#topnav {
margin: 0px 0px;
padding: 0px;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 620px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 28px;
float: left;
text-decoration: none;
color: green;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: green; }
ul#topnav span { display: none;}
ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2MH7OTqYTKh28edPQVIcXV-w_FlNt04jwFTTbEkZOumm_6zdWW54mlmJqm3q_7jgqzGU_SIH3Dl3Kz_GF4UU69KiB4sqoqiHFDCnVLt4FTxjvkDgV-goHUQe9562tZH0a5DffkhkF7NA/s1600/vivaverdemenu.png) repeat-x left top;}
ul#topnav.v2 a{ color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2MH7OTqYTKh28edPQVIcXV-w_FlNt04jwFTTbEkZOumm_6zdWW54mlmJqm3q_7jgqzGU_SIH3Dl3Kz_GF4UU69KiB4sqoqiHFDCnVLt4FTxjvkDgV-goHUQe9562tZH0a5DffkhkF7NA/s1600/vivaverdemenu.png) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});

});
</script>
Những phần được đánh dấu màu đỏ là chỗ bạn có thể điều chỉnh cho phù hợp với ý thích của mình.

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào giữa 2 thẻ <body>, </body>.
<ul class='v2' id='topnav'>
<li><a href='http://yourblog.blogspot.com'>Home</a></li>
<li><a href='/gioi-thieu.html'>Giới thiệu</a></li>
<li><a href='/quy-dinh.html'>Quy định</a></li>
<li><a href='/lien-he.html'>Liên hệ</a></li>
<li><a href='/dien-dan.html'>Diễn đàn</a></li>
<li><a href='/lien-ket.html'>Liên kết</a></li>
</ul>
Bạn cần thay đổi những phần được đánh dấu màu xanh theo các liên kết tương ứng.

Sunday, November 21, 2010

Tạo nút theo dõi Twitter kiểu chim bay

Trong một lần lướt web và nghiên cứu về Twitter, tôi phát hiện một tiện ích gọi là TripleFlap với chức năng tạo biểu tượng con chim Twitter đang bay trong trang web, mà khi bạn di chuyển con trỏ chuột lên con chim thì xuất hiện liên kết Theo dõi bạn trên Twitter và cả trang “Retweet”.

Xem demo.

Thật thú vị là tiện ích này có thể ứng dụng cho Blogger và bạn có thể hiển thị nó trong các trang bài viết.

Để làm được điều này, bạn thực hiện theo các bước sau đây:

Vào Design >> Edit HTML chọn Expand Widget Templates.

Dùng tổ hợp phím Ctrl + F tìm dòng mã <div class='post-body'> và chèn sau nó với dòng mã bên dưới (chú ý chèn sau dòng <div class='post-body'>, với một số Template là dòng <div class='post-body entry-content'>).
<b:if cond='data:blog.pageType == "item"'><script src='http://hacodeproject.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
<script type='text/javascript'>
var birdSprite="http://hacodeproject.googlecode.com/files/birdspritealpha.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/huynhatha"; //Thay tên user trên Twitter của bạn
var tweetThisText = "Huynhatha: <data:post.url/>";
tripleflapInit();
</script>
</b:if>
Bạn có thể tải về file tripleflap.js để upload lên host và sử dụng cho blog của bạn; nhớ thay tên username trên Twitter nữa nhé.

Hy vọng thủ thuật này có ích đối với Blog của bạn.

Tạo chú thích (footnote) trong bài viết

Footnote là một chú thích nằm ở cuối một trang sách liên hệ đến một vấn đề trong đoạn văn mà thông thường sử dụng số thứ tự hoặc dấu * để đánh dấu chú thích. Khi đọc trang sách nếu bạn đến chỗ một ký hiệu chú thích thì bạn sẽ dò tìm đến phần giải thích nằm ở cuối của trang sách đó.

Trên một trang web, đặc biệt khi trình bày một bài thơ chứa nhiều điển tích, điển cố thì người ta thường dùng đến chú thích. Thật tuyệt vời khi trên Blogger cũng có thể thực hiện được điều này.

Bạn thử click chuột vào các số chú thích 1, 2 trong bài thơ dưới đây và sẽ thấy được điều đó.

Hoàng Hạc Lâu

Tích nhân[1] dĩ thừa hoàng hạc khứ,
Thử địa không dư Hoàng Hạc Lâu.
Hoàng hạc nhất khứ bất phục phản,
Bạch vân thiên tải không du du.
Tình xuyên lịch lịch Hán Dương thụ,
Phương thảo thê thê Anh Vũ[2] châu.
Nhật mộ hương quan hà xứ thị,
Yên ba giang thượng sử nhân sầu.

Để thực hiện được thủ thuật này, bạn thực hiện như sau:

Trong một bài viết, bạn cần xác định nơi đặt số chú thích và tạo mã HTML như sau:
<a href="#X1" id="refX1"><sup>[1]</sup></a>

<a href="#X2" id="refX2"><sup>[2]</sup></a>

<a href="#X3" id="refX3"><sup>[3]</sup></a>

...
Ở cuối bài viết bạn đặt phần giải thích theo thứ tự lần lượt chỉ đến các số chú thích và tạo mã HTML như sau:
1. <a href="#refX1" id="X1">Nội dung giải thích 1</a>

2. <a href="#refX2" id="X2">Nội dung giải thích 2</a>

3. <a href="#refX3" id="X3">Nội dung giải thích 3</a>

...
Tôi nghĩ rằng thủ thuật này rất hữu ích cho các blog chuyên về văn thơ. Ngoài cách trên, bạn có thể tham khảo một cách khác theo thủ thuật Liên kết đến một vị trí đặc biệt trong một trang web.

-----------------------
Chú thích
1. Tục truyền Phí Văn Vi thành tiên, thường cưỡi hạc về nghỉ ở Hoàng Hạc lâu.
2. Khu bãi bến khúc sông thuộc Vũ Xương tỉnh Hồ Bắc.

Friday, November 19, 2010

Hiệu ứng trượt hình ảnh xoay vòng sử dụng jQuery

Tiny Circleslider là một plugin jQuery tạo ra hiệu ứng xoay tròn hình ảnh.


Hãy ghé qua trang nhà của tác giả hiệu ứng này để tìm hiểu thêm. Ở đây tôi xin giới thiệu cách thực hiện một trong những ví dụ minh họa cho hiệu ứng này.

Xem Demo.

1. Trước tiên, đặt phần css và js dưới đây vào trước thẻ </head>.
<style type='text/css'>
#rotatescroll{height:300px;position:relative;width:300px}
#rotatescroll .viewport{height:300px;position:relative;margin:0 auto;overflow:hidden;width:300px}
#rotatescroll .overview{ left:0;list-style:none;margin:0;padding:0;position:absolute;top:0}
#rotatescroll .overview li{ float:left;height:300px;position:relative;width:300px}
#rotatescroll .overlay{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7eX_AA-srWjtcfEDUWibojFtmzxxvb7UIshX5fifTido_kBQxLvF1SFqnLSYPfCzFwBvKG8TYZM6B0Oog9-U_rpiD_Y6SsmW_vq_w5xw1pXKh9nGSh4ADa-3cA8Dx9c4RAabDwqonDCA/s0/bg-rotatescroll.png) no-repeat 0 0;height:300px;left:0;position:absolute;top:0;width:300px}
#rotatescroll .thumb{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7x9qQyt5IxZz_M_G73Xo93JLVPT8MCzpp_SrCuLq__1cvJsXHb-F8OdBeKwVL8OpMZ8361Hh1qiM3kvfx1vPk9nTaSMN1NzBJmqBbCafrblrO8NZKk8QG-01SfbuzyfWn7l-3dHo9fQk/s0/bg-thumb.png) no-repeat 0 0;cursor:pointer;height:26px;left:137px;position:absolute;top:-3px;width:26px;z-index:200}
#rotatescroll .dot{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvMXNxdADVTn6PwLnJ3y5l-di6LU5qRsdES8M33SPfxuHsaEiaHtyQ9W7D2-l4OU8Pny1H0zA7UhiUJM-b3ioYp9xBuPxBe-Qjgd7VzbprfZAyNZ1vj2o0qDds1z1DAHy7naZK49NNuM/s0/bg-dot.png) no-repeat 0 0;display:none;height:12px;left:155px;position:absolute;top:3px;width:12px;z-index:100}
#rotatescroll .dot span{ display:none}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

<script scr='http://baijs.nl/tinycircleslider/js/jquery.tinycircleslider.min.js' type='text/javascript'/>
2. Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân trang web/blogspot.
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="URL_hinh 1" /></li>
<li><img src="URL_hinh 2" /></li>
<li><img src="URL_hinh 3" /></li>
<li><img src="URL_hinh4" /></li>
<li><img src="URL_hinh5" /></li>
</ul>
</div>
<div class="dot"></div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
Bạn cần đưa liên kết các hình ảnh vào cấu trúc nêu trên.

Để hiệu ứng hoạt động thì cần đặt đoạn js bên dưới vào phía sau phần HTML.

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>

Nếu muốn hiệu ứng trượt tự động thì điều chỉnh js lại như sau:

$(document).ready(function(){ $('#rotatescroll').tinycircleslider({ interval: true });