Laman

Pages

Laman

Dec 31, 2010

Hiệu ứng fading tooltip với phần mô tả bằng hình ảnh

Fading Tooltip là một script tạo hiệu ứng mô tả liên kết rất dễ sử dụng và rất nhẹ, chỉ với dung lượng 2kb. Nó đã được test trên các công cụ trình duyệt như IE6+, Firefox, Opera và Safari. Jacob Gube tại trang Six Revisions đã có bài viết về script này. Sau khi nghiên cứu, tôi xin trình bày cách thực hiện hiệu ứng tooltip như vậy để quý bạn đọc chia sẻ kinh nghiệm thiết kế web. :3)

Để cài đặt, trước tiên bạn hãy xem phần Demo, sau đó lần lượt đọc qua các bước theo thứ tự Script >> CSS >> HTML.

Đây là phần giới thiệu demo. Bạn hãy rê con trỏ vào các liên kết để thấy hiệu ứng. Demo 1 là kiểu tooltip có background và Demo 2 là kiểu tooltip không có background.


Ut tincidunt nisi quis elit dignissim mattis. Phasellus sit amet nunc eu est scelerisque tincidunt sit amet vitae sem. Sed ut nisi lorem. Vivamus ut felis libero. Vivamus venenatis justo ante. Nunc elementum interdum dolor, sit amet condimentum diam fermentum ac. Sed dictum condimentum arcu, id ornare turpis accumsan eu. Praesent ultricies egestas nulla at consectetur. Nunc sed est nulla, sit amet aliquam purus. Nam semper lacinia egestas. Nunc dictum lobortis arcu at bibendum?

Donec commodo nulla et magna malesuada a euismod metus aliquam. In hac habitasse platea dictumst. Vivamus mattis, nisi ac commodo cursus, metus justo eleifend sem, non auctor nisi felis eu tellus. Duis convallis condimentum elit, quis ullamcorper odio commodo ac. Aliquam ornare commodo fermentum. Aenean ut diam sed.


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

<script type="text/javascript">
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>

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

<style>
.hotspot {
color: #94D5FD;
cursor: pointer;
font-weight: bold;
font-family: Arial, Tahoma;
font-size: 13px;
}

#tt {
background: CornflowerBlue;
color: #FFF;
display: block;
font-family: Arial;
font-size: 16px;
padding: 5px 10px;
position: absolute;
-moz-border-radius: 10px;
}
</style>

Ở kiểu Demo 1, sử dụng background: CornflowerBlue;. Ở kiểu Demo 2, sử dụng background: transparent;.

Bước 3. Thiết lập cấu trúc HTML như sau.

<span class="hotspot" onmouseover="tooltip.show('Nội dung mô tả ngắn');" onmouseout="tooltip.hide();"> text liên kết </span>

Nếu trong phần mô tả, bạn muốn sử dụng các thẻ HTML thì phải mã hóa dấu < thành &lt; và dấu > thành &gt;.

Nếu sử dụng hình ảnh làm phần mô tả liên kết thì sử dụng cấu trúc như sau.

<span class="hotspot" onmouseover="tooltip.show('&lt;img src=\'URL_hình ảnh\'/&gt;');" onmouseout="tooltip.hide();"> text liên kết </span>

Cập nhật: Theo yêu cầu của bạn hoang-deejay, bạn ấy muốn sử dụng hiệu ứng này cho hình ảnh. Vậy đối với hình ảnh thì sử dụng cấu trúc HTML như sau.

<span class="hotspot" onmouseover="tooltip.show('Nội dung mô tả ngắn cho hình ảnh');" onmouseout="tooltip.hide();"> <img src="URL_hình ảnh" /> </span>

Ví dụ:

Bạn có thể tạo hiệu ứng này cho blogspot tương tự như các bước sử dụng cho website.

Chúc bạn thành công! :7)

Tạo menu dạng tab với SimpleTabs

SimpleTabs là một script do Fotis Evangelou phát triển với những tính năng đáng chú ý sau đây: không phụ thuộc vào thư viện bên thứ ba như jQuery, Mootools… Điều đó có nghĩa là nó sẽ không xung đột với các script khác có sử dụng những thư viện nói trên; nó cũng không cần ID khác hay phần chứa tab để tạo ra nhiều bộ tab khác nhau, vì thế bạn có thể sử dụng nhiều tab dùng SimpleTabs trên cùng một trang web; và một đặc tính khác là sử dụng đơn giản với tốc độ tải trang nhanh, hoạt động tốt trên mọi công cụ trình duyệt.

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



Bài viết
Nhận xét

Để tạo tab như vậy cho website/blogspot của mình, bạn hãy thực hiện theo các bước cài đặt lần lượt Script >> CSS >> HTML.

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

<script src="http://hacodeproject.googlecode.com/files/simpletabs_1.3.js" type="text/javascript"/></script>
Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<style type='text/css'>
div.simpleTabs {padding:10px; }
ul.simpleTabsNavigation {margin:0 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li {list-style:none; display:inline; margin:0; padding:0;background:#ffffff; }
ul.simpleTabsNavigation li a {border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:14px; text-decoration:none; font-family:Arial, "Times New Roman", Times, serif;background:none !important; }
ul.simpleTabsNavigation li a:hover {text-decoration:none; background-color:#F6F6F6; font-family:Arial, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a.current {background:#fff; color:#222; border-top:2px solid #990000; }
div.simpleTabsContent {background:#ffffff;border:2px solid #E0E0E0; padding:5px 15px 15px 15px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab {display:block; }
</style>
Bước 3. Thiết lập cấu trúc HTML như sau.

<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="javascript:void(0);">Tiêu đề tab 1</a></li>
<li><a href="javascript:void(0);">Tiêu đề tab 2</a></li>
<li><a href="javascript:void(0);">Tiêu đề tab 3</a></li>
</ul>
<div class="simpleTabsContent">Nội dung Tab 1</div>
<div class="simpleTabsContent">Nội dung Tab 2</div>
<div class="simpleTabsContent">Nội dung Tab 3</div>
</div>
Bạn có thể lần lượt thêm Tab và nội dung tương ứng cho Tab theo đúng định dạng như trên.
Code ở phần CSS đã có một số điều chỉnh so với bản Demo của Fotis Evangelou (Komrade)

Dec 29, 2010

Search Box dạng tab cho blogspot

Có vài cách đưa công cụ tìm kiếm (Search Box) vào blogspot nhưng cách cơ bản nhất mà trước đây các blogger hay sử dụng là sử dụng đoạn code sau đây:

<p align="left">
<form id="searchthis" action="http://huynh-nhat-ha.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="250" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Tuy nhiên điểm yếu của code này là kết quả tìm kiếm rất hạn chế, không liệt được đầy đủ và chính xác những bài viết liên quan đến từ khóa tìm kiếm.



Để khắc phục điều này, gần đây Blogger cho cho ra đời tiện ích (Tab) Search Box với kết quả tìm kiếm khá tốt. Từ tiện ích này, tôi đã có một số điều chỉnh về code để ẩn đi một số phần không cần thiết trên tiện ích, kết quả là một tiện ich Search Box với phần nhập từ khóa và nút Search như kiểu Search Box cũ trước đây.


Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Edit HTML chọn Expand Widget Templates. (Nếu bạn đã cài đặt tiện ích sẳn có của Blogger thì vào Page Elements rồi xóa nó đi)

Thông thường người ta đặt Search Box ở phần sidebar. Trong Template, tìm đến vị trí cần đặt tiện ích. Đặt đoạn code dưới đây vào sau dòng </b:widget> ở quanh khu vực code mà bạn muốn đặt Search Box.

<b:widget id='CustomSearch101' locked='false' title='Search This Blog' type='CustomSearch'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title == &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content' style='width:100%'>
<div expr:id='data:widget.instanceId + &quot;_form&quot;'>
<span class='cse-status'><data:loadingMsg/></span>
</div>
</div>

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {
color:<data:linkColor/>;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: <data:borderColor/>;
}

#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}

#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}

#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
.gsc-branding-img-noclear, .gsc-branding-text {
display:none!important; visibility: hidden!important;
}
</style>
</b:includable>
</b:widget>

Lưu Template.

Cập nhật ngày 04-01-2011: Nếu bạn không hài lòng với cách trên thì sử dụng đoạn code như bên dưới để đặt tại vị trí muốn hiển thị công cụ tìm kiếm.

<form action="http://www.google.com/custom">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<div>
<input type="radio" name="sitesearch" value="" /> Web
<input type="radio" name="sitesearch"
value="huynh-nhat-ha.blogspot.com" checked="checked" /> Huynh Nhat Ha!
</div>
</form>


Web Huynh Nhat Ha!

Nếu muốn chỉ tìm kiếm trong blog thì sử dụng đoạn code sau đây.

<form action="http://www.google.com/custom">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
</form>


Bạn cần thay tên blogspot ở những dòng được đánh dấu màu đỏ.

Cập nhật ngày 05/01/2011: Nếu bạn muốn công cụ tìm kiếm tùy chỉnh của Google vẫn nằm trong blog của bạn thì thực hiện theo các bước sau đây.

1. Tạo một trang tĩnh để hiển thị kết quả tìm kiếm.

Đăng nhập Blogger vào NEW POST (BÀI ĐĂNG MỚI) >> Edit Pages (Chỉnh sửa trang) >> NEW PAGE (Trang mới). Tạo một trang tĩnh có tên là Search Page và đặt đoạn code sau đây vào phần nội dung của trang.

<style type=text/css>
#sidebar, #comments, .post-footer {display:none !important}
</style>

Mục đích của đoạn code này là ẩn đi một số id và class không cần thiết trên trang hiển thị kết quả tìm kiếm.

2. Tiếp theo đặt đoạn code dưới đây tại vị trí hiển thị công cụ tìm kiếm trong Template.

<form action="http://huynh-nhat-ha.blogspot.com/p/search-page.html">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input type="hidden" name="cof" value="FORID:10" />
</form>


Thay phần được đánh dấu màu đỏ bằng tên blogspot của bạn.

Phân trang Paginator 3000 cho blogspot

Abu Farhan có nhiều code phân trang cho blogspot khá đẹp. Một trong số đó là kiểu phân trang dạng cuộn sử dụng plugin cho Wordpress có tên Paginator 3000 dựa theo ý tưởng của Ecto.ru và code của Karaboz.ru.

Đây là trang Demo cho kiểu phân trang này của Abu Farhan.

Cũng như nhiều tiện ích khác do Abu Farhan phát triển, tiện ích này cũng bị cài mặc định liên kết Widget by Abu-farhan. Tôi thấy kiểu phân trang này đẹp và muốn cộng đồng Blogger Việt Nam sử dụng nó một cách hoàn hảo nhất nên đành phải can thiệp vào code của tiện ích này để ẩn đi liên kết quảng cáo nói trên.

Đây là Demo của tôi.

Để cài đặt kiểu phân trang này cho blogspot của bạn, hãy thực hiện theo các bước sau đây.

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

Đặt đoạn code bên dưới vào trước dòng ]]></b:skin> trong Template.

.paginator {
margin-top:2px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-10px; left:50%;
margin-left:-10px;
width:30px; height:24px;
overflow:hidden;
background:url(http://img692.imageshack.us/img692/6049/sliderknob.gif) no-repeat 50% 50%;
cursor:pointer; cursor: hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

(Nếu bạn muốn thanh kéo kiểu khác thì thay URL được đánh dấu màu xanh bằng liên kết hình ảnh sau: http://img153.imageshack.us/img153/6571/slider.gif)

Tiếp tục đặt code bên dưới vào trước thẻ </body>.

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://hacodeproject.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Lưu Template. Trong đoạn code trên, bạn có thể thay đổi các tham số postperpage: số bài viết mỗi trang và numshowpage: số lượng chữ số hiển thị cho mỗi trang phân trang.

Bước 2. Ở chế độ chỉnh sửa Template, chọn Expand Widget Templates. Tìm các dòng (dùng tổ hợp phím Ctrl + F) 'data:label.url' rồi thay chúng bằng dòng

'data:label.url + &quot;?&amp;max-results=7&quot;'

Lưu Template. Lưu ý con số trong dòng max-results=7 phải trùng với con số trong dòng var postperpage=7;. Ngoài ra, bạn cần định cấu hình Bài đăng cho Blog (Blog Posts) là 7 bài đăng trên trang chính cho thống nhất với code ở trên.

Dec 28, 2010

Ý tưởng mới về thủ thuật Blogger

Tôn chỉ của tôi khi xây dựng blog này là nâng tầm Blogger Việt Nam sánh ngang với Blogger thế giới. Blogger Việt Nam phải xây dựng một cộng đồng các blogger đầy sáng tạo và dồi dào ý tưởng xây dựng các thủ thuật tối ưu nhất.

Để làm được như vậy, tôi kêu gọi quý bạn bè gần xa trong cộng đồng Blogger Việt Nam hãy chia sẻ các ý tưởng về thủ thuật Blogger để cùng thực hiện mục tiêu nâng tầm Blogger Việt Nam.

Ý tưởng thủ thuật Blogger của bạn sẽ được đăng tải tại trang này và sẽ được Amin dành thời gian phát triển và hiện thực hóa để cộng đồng Blogger Việt Nam cùng sử dụng. Lợi ích của người đưa ra ý tưởng là được xứng danh đồng tác giả cho thủ thuật và được đăng ký vào Danh sách trang VIP trong phần Đặt Banner quảng cáo tại blog này.

Ý tưởng thủ thuật Blogger của bạn gồm các mục sau đây:

- Tên ý tưởng
- Tác giả ý tưởng
- Mô tả sơ lược về ý tưởng

Những ý tưởng khả thi sẽ được Admin phát triển và giới thiệu tại trang này.

Gửi ý tưởng

Bài viết mới nhất có ảnh đại diện cho nhiều nhãn nằm ngang

Bất kỳ blogger nào làm quen với blogspot một thời gian hẳn biết qua tiện ích Bài viết mới nhất có ảnh đại diện khá phổ biến và cần thiết cho bất kỳ một blogspot nào. Tôi cũng đã tạo một số code tùy biến cho tiện ích này với những đặc trưng khác biệt. Thông thường tiện ích Bài viết mới nhất có ảnh đại diện chỉ dành cho toàn bộ bài viết trên blog hoặc chỉ dành cho 1 nhãn nào đó mà thôi. Tôi từng có ý tưởng bố trí tiện ích này gồm nhiều cột theo chiều ngang ở bài viết này.

Tôi tiếp tục nảy ra ý tưởng bố trí tiện ích này cho nhiều nhãn khác nhau xếp theo chiều nằm ngang (Recent posts with Thumbnails for Horizontal Labels), ý tưởng mà bạn chưa từng thấy trong cộng đồng Blogger. :44)

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




Tiện ích này thích hợp khi đặt ở cuối bài viết hoặc ở trên phần Footer của Template.
Để làm được điều này, bạn 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 đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript">
// Recent Posts with Thumbnails for Horizontal Labels Widget by Huynh Nhat Ha
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;
summaryPost = 60;
summaryTitle = 34;
numposts = 5;
var getlabels = 0;
labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");
function removeHtmlTagLabels(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 showrecentpostslabels(json) {
var output = "";
var outputinner= "";
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
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;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) { var postcontent = entry.summary.$t; }
else var postcontent = "";
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf("src=\"",a);
c = s.indexOf("\"",b+5);
d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var trtd = "";
trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagLabels(posttitle,summaryTitle) + '…</a><br/>';
trtd += removeHtmlTagLabels(postcontent,summaryPost);
trtd += ' ...<div class="bottomline"></div>';
outputinner += trtd;
j++;
}
output += '<div class="rcposts_horizontal">';
output += '<h3>' + labeltitle[getlabels] + '</h3>';
output += outputinner;
output += '</div>';
document.write(output);
getlabels ++;
}
</script>

<style>
#rcposts_label {}
.rcposts_horizontal {float: left;font-size: 11px;height: 390px;margin: 0 10px;overflow: hidden;padding: 10px;width: 250px;}
.rcposts_horizontal h3 {background-color: #555;border-bottom: 1px solid #888;color: #BBB;font-family: Arial;font-size: 13px;font-weight: bold;margin: 0 0 10px;padding: 5px 0;text-align: center;text-case: sentence;}
.rcposts_horizontal img {background-color: #555;float: left;height: 50px;margin: 0 8px 0 0;padding: 2px;width: 50px;}
.bottomline {border-bottom: 1px dotted #555;clear: both;margin-bottom: 5px;padding: 0 0 5px;}
.rcposts_horizontal a.tlabel { font-family: Arial !important; font-size: 11px !important; font-weight: normal !important;display: block;float: left;max-width: 205px;overflow: hidden;white-space: pre;}
</style>

Lưu Template.

Trong đoạn code trên bạn cần thay đổi tên nhãn (ví dụ: Thủ thuật Blog, Thủ thuật Blogger, …) tại các dòng

labelname = new Array("Nhãn 1","Nhãn 2");
labeltitle = new Array("Nhãn 1","Nhãn 2");

Bạn có thể thay đổi số bài viết hiển thị ở dòng numposts = 5.

Tiện ích này mặc định hiển thị cho 2 nhãn với bề rộng không gian hiển thị tiện ích tốt nhất là 600px, bạn cần điều chỉnh tham số width: 250px cho phù hợp với vùng không gian mà bạn muốn hiển thị tiện ích. Nếu muốn thêm nhãn thì điều chỉnh ở 2 dòng js ở trên.

Bước 2. Đặt đoạn code dưới đây vào một tiện ích HTML/JavaScript tại nơi muốn hiển thị tiện ích Bài viết mới nhất có ảnh đại diện.

<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&orderby=published&alt=json-in-script&callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>

Nếu bạn muốn đặt tiện ích ở cuối bài viết thì khi chỉnh sửa Template, chọn Mở rộng mẫu tiện ích (Expand Widget Templates) và đặt đoạn code dưới đây vào sau dòng <div class='post-footer'> hoặc vào trước dòng <div class='post-footer-line post-footer-line-1'> hoặc dòng <div class='post-footer-line post-footer-line-3'> hoặc dòng <div class='post-footer-line post-footer-line-3'>.

<div id="rcposts_label">
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostslabels'></script>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Nhãn 2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostslabels'></script>
<div style="clear:both;"></div>

Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay tên nhãn tương ứng với phần javascript ở Bước 1.

Chú ý: Nếu bạn đặt tiện ích này vào một tiện ích HTML/JavaScript thì bạn có thể đặt chung code ở Bước 1 vào trước code ở Bước 2 để dễ quản lý. Nếu bạn đặt code ở Bước 1 vào trước thẻ </head> mà gặp lỗi trong Template thì bạn đặt toàn bộ phần code giữa 2 thẻ <script type="text/javascript">, </script> (ở Bước 1) vào Notepad rồi lưu file với tên rcplabel.js, sau đó upload lên host rồi đặt code theo kiểu như sau vào trước thẻ </head> trong Template.

<script src="http://diachiwebhost.com/rcplabel.js" type="text/javascript"></script>

Dec 26, 2010

Tạo menu nhiều tab cho blogspot

Có nhiều kiểu menu trong thiết kế web và menu nhiều tab là một kiểu rất được ưa chuộng bởi vì nó giúp tiết kiệm không gian bố trí cho trang web. Bạn có thể dễ dàng thêm tab mới cho menu kiểu này.

Menu nhiều tab có thể được dùng cho blogspot.

Để tạo kiểu menu này, bạn hãy thực hiện theo các bước sau đây.

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

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

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
var arg;
this.div = null;
this.classMain = "tabber";
this.classMainLive = "tabberlive";
this.classTab = "tabbertab";
this.classTabDefault = "tabbertabdefault";
this.classNav = "tabbernav";
this.classTabHide = "tabbertabhide";
this.classNavActive = "tabberactive";
this.titleElements = ['h2','h3','h4','h5','h6'];
this.titleElementsStripHTML = true;
this.removeTitle = true;
this.addLinkId = false;
this.linkIdFormat = '<tabberid>nav<tabnumberone>';
for (arg in argsObj) { this[arg] = argsObj[arg]; }
this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
this.tabs = new Array();
if (this.div) {
this.init(this.div);
this.div = null;
}
}

tabberObj.prototype.init = function(e)
{

var
childNodes,
i, i2,
t,
defaultTab=0,
DOM_ul,
DOM_li,
DOM_a,
aId,
headingElement;
if (!document.getElementsByTagName) { return false; }
if (e.id) {
this.id = e.id;
}
this.tabs.length = 0;
childNodes = e.childNodes;
for(i=0; i < childNodes.length; i++) {
if(childNodes[i].className &&
childNodes[i].className.match(this.REclassTab)) {
t = new Object();
t.div = childNodes[i];
this.tabs[this.tabs.length] = t;


if (childNodes[i].className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
}
DOM_ul = document.createElement("ul");
DOM_ul.className = this.classNav;

for (i=0; i < this.tabs.length; i++) {

t = this.tabs[i];


t.headingText = t.div.title;

if (this.removeTitle) { t.div.title = ''; }

if (!t.headingText) {


for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(/<br>/gi," ");
t.headingText = t.headingText.replace(/<[^>]+>/g,"");
}
break;
}
}
}

if (!t.headingText) {

t.headingText = i + 1;
}


DOM_li = document.createElement("li");


t.li = DOM_li;


DOM_a = document.createElement("a");
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = "javascript:void(null);";
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;


DOM_a.tabber = this;
DOM_a.tabberIndex = i;


if (this.addLinkId && this.linkIdFormat) {


aId = this.linkIdFormat;
aId = aId.replace(/<tabberid>/gi, this.id);
aId = aId.replace(/<tabnumberzero>/gi, i);
aId = aId.replace(/<tabnumberone>/gi, i+1);
aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

DOM_a.id = aId;
}


DOM_li.appendChild(DOM_a);


DOM_ul.appendChild(DOM_li);
}


e.insertBefore(DOM_ul, e.firstChild);


e.className = e.className.replace(this.REclassMain, this.classMainLive);


this.tabShow(defaultTab);


if (typeof this.onLoad == 'function') {
this.onLoad({tabber:this});
}

return this;
};


tabberObj.prototype.navClick = function(event)
{


var
rVal,
a,
self,
tabberIndex,
onClickArgs;

a = this;
if (!a.tabber) { return false; }

self = a.tabber;
tabberIndex = a.tabberIndex;


a.blur();


if (typeof self.onClick == 'function') {

onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

/* IE uses a different way to access the event object */
if (!event) { onClickArgs.event = window.event; }

rVal = self.onClick(onClickArgs);
if (rVal === false) { return false; }
}

self.tabShow(tabberIndex);

return false;
};


tabberObj.prototype.tabHideAll = function()
{
var i;


for (i = 0; i < this.tabs.length; i++) {
this.tabHide(i);
}
};


tabberObj.prototype.tabHide = function(tabberIndex)
{
var div;

if (!this.tabs[tabberIndex]) { return false; }


div = this.tabs[tabberIndex].div;


if (!div.className.match(this.REclassTabHide)) {
div.className += ' ' + this.classTabHide;
}
this.navClearActive(tabberIndex);

return this;
};


tabberObj.prototype.tabShow = function(tabberIndex)
{


var div;

if (!this.tabs[tabberIndex]) { return false; }


this.tabHideAll();


div = this.tabs[tabberIndex].div;


div.className = div.className.replace(this.REclassTabHide, '');


this.navSetActive(tabberIndex);


if (typeof this.onTabDisplay == 'function') {
this.onTabDisplay({'tabber':this, 'index':tabberIndex});
}

return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = this.classNavActive;

return this;
};


tabberObj.prototype.navClearActive = function(tabberIndex)
{



this.tabs[tabberIndex].li.className = '';

return this;
};


function tabberAutomatic(tabberArgs)
{

var
tempObj,
divs,
i;

if (!tabberArgs) { tabberArgs = {}; }


tempObj = new tabberObj(tabberArgs);




divs = document.getElementsByTagName("div");
for (i=0; i < divs.length; i++) {


if (divs[i].className &&
divs[i].className.match(tempObj.REclassMain)) {


tabberArgs.div = divs[i];
divs[i].tabber = new tabberObj(tabberArgs);
}
}

return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{

var oldOnLoad;

if (!tabberArgs) { tabberArgs = {}; }

oldOnLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = function() {
tabberAutomatic(tabberArgs);
};
} else {
window.onload = function() {
oldOnLoad();
tabberAutomatic(tabberArgs);
};
}
}


/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

tabberAutomaticOnLoad();

} else {

if (!tabberOptions['manualStartup']) {
tabberAutomaticOnLoad(tabberOptions);
}

}

//]]>
</script>
<style type='text/css'>
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#f8f8f8;
border:1px solid #DDD;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid #ddd;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid #DDD;
border-bottom:none;
background:#6c6c6c;
text-decoration:none;
color:#ffffff;
}
.tabbernav li a:hover {
color:#6c6c6c;
background:#ffffff;
border:1px solid #DDD;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:#ffffff;
color:#6c6c6c;
border-bottom: 1px solid #ffffff;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid #DDD;
border-top:0;
background:#ffffff;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid #ddd;
margin:0 5px;
padding:2px 0 5px 0;
}
</style>

Lưu Template.

Bước 2. Chọn Page Elements và Nhấp chọn Add a Gadget bên phần sidebar. Chọn HTML/JavaScript rồi đặt đoạn code dưới đây vào phần Content của tiện ích.

<div class='tabber'>

<div class='tabbertab section' id='tab1'>
<h2>Tiêu đề 1</h2>

Nội dung 1 / Code 1

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab2'>
<h2 class='title'>Tiêu đề 2</h2>

Nội dung 2 / Code 2

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab3'>
<h2>Tiêu đề 3</h2>

Nội dung 3 / Code 3

</div>
<div class='clear'></div>

<div class='tabbertab section' id='tab4'>
<h2 class='title'>Tiêu đề 4</h2>

Nội dung 4 / Code 4

</div>
<div class='clear'></div>

</div>

Trong đoạn code trên, bạn cần đặt tiêu đề cùng với nội dung code cho các tab. Ví dụ tab1 là tiện ích Bài viết mới nhất, tab2 là Bình luận mới nhất …

Bạn có thể thêm tab vào theo định dạng như sau.

<div class='tabbertab section' id='tabX'>
<h2 class='title'>Tiêu đề X</h2>

Nội dung X / Code X

</div>
<div class='clear'></div>

Dec 24, 2010

Tầm quan trọng của backlink cho blog của bạn

Backlink là các liên kết hướng về trang web của bạn, cũng được biết đến như là inbound link. Trong tối ưu hóa công cụ tìm kiếm (SEO), số lượng backlink là một dấu hiệu của sự phổ biến hay tầm quan trọng của một trang web.

Các công cụ tìm kiếm thường sử dụng số lượng backlink mà một trang web có được như là một trong những yếu tố quan trọng nhất xác định thứ hạng trên công cụ tìm kiếm của trang web đó. Chính vì vậy đưa backlink vào blog của bạn sẽ giúp tăng lượng truy cập cũng như thứ hạng cho blog của bạn.

Trang Counters4u cung cấp dịch vụ backlink miễn phí và nhanh chóng cho website/webblog. Đối với Blogger, bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là được.

<!-- BackLink by Counters 4 U -->
<a href="http://www.counters4u.com" target="_blank"><img src="http://www.counters4u.com/backlink.php?aut=EF60387089C968920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" title="BackLink by Counters 4 U" border="0" /><img src="http://www.counters4u.com/sr.php" width="1" height="1" border="0" /></a>
<!-- BackLink by Counters 4 U-->

Đây là kết quả cài đặt.



Lưu ý không chỉnh sửa đoạn code trên, nếu chỉnh sửa thì code sẽ không hoạt động được.

Dec 23, 2010

Tiện ích Top 20 người bình luận cho blogspot

Khuyến khích người đọc để lại nhận xét, bình luận trên blog của bạn là một cách cải thiện lượng truy cập (traffic) cho blog. Và không có cách nào khuyến khích người đọc bình luận tốt hơn cách để tên hay nickname của họ được hiển thị trên blog của bạn. Tiện ích Top những người bình luận (Top Commentators) sẽ thực hiện điều đó một cách hiệu quả. Nó sẽ hiển thị danh sách những người bình luận nhiều nhất với liên kết đến hồ sơ của họ.

Dựa trên code trong tiện ích Top Commentators của Googlesystem và sự giúp đỡ của Hunlock.com, Greenlava tại Bloggersentral.com đã tạo ra tiện ích Top Commentators với sự hỗ trợ của Yahoo pipe, theo 2 kiểu, một kiểu theo list dọc (Kiểu 1) và một kiểu theo dạng đám mây (Kiểu 2).

Dưới đây là Demo cho Kiểu 1.

Top 20 Commentators




Để cài đặt tiện ích này bạn chỉ cần đặt code bên dưới vào một tiện ích HTML/JavaScript khi thiết kế trong Blogger của bạn.

<!-- Top commentators widget v1 Start -->
<script type="text/javascript">
function getYpipe(feed) {
document.write('<ol>');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
if(feed.value.items[i].link == "")
var item ="<li>" + feed.value.items[i].title + "</li>";
else
var item = "<li>" + "<a href="+ href + '" target="_blank">' + feed.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://huynh-nhat-ha.blogspot.com
&ExcludedNick1=Huỳnh Nhật Hà
&ExcludedNick2=
&ShowHowMany=20 // Số người bình luận được liệt kê
&_callback=getYpipe
&_id=23022d7836bf2dd3c10a329feb9be26a
&_render=json"
type="text/javascript"></script>
<!-- Top commentators widget End -->

Trong đoạn code trên, bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay Huỳnh Nhật Hà thành tên hoặc nickname của bạn. Ở dòng ExcludedNick2 =, bạn có thể thêm nickname của người bình luận mà bạn không muốn được liệt vào tiện ích (đương nhiên tên hay nickname của bạn cũng không được liệt vào đây và nickname Anonymous cũng được loại ra về mặc định nên không cần thêm vào).

Dưới đây là Demo cho Kiểu 2.

Top 20 Commentators

Để cài đặt tiện ích này bạn chỉ cần đặt code bên dưới vào một tiện ích HTML/JavaScript khi thiết kế trong Blogger của bạn.

<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://www.bloggersentral.com/. Please do not remove this credit and the “Make your own” link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://huynh-nhat-ha.blogspot.com
&Exclusions=Anonymous,Huỳnh Nhật Hà
&ShowHowMany=20 // Số người bình luận được liệt kê
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>
<!-- Top Commentators Cloud End -->

Trong đoạn code trên, bạn cần thay huynh-nhat-ha thành tên blogspot của bạn và thay Huỳnh Nhật Hà thành tên hoặc nickname của bạn. Ở dòng &Exclusions=, liệt kê nickname mà bạn không muốn hiển thị trong tiện ích này, phân cách giữa các tên bằng dấu phẩy (,) và không chứa khoảng trống. Dòng &Order=alphabet biểu thị danh sách theo thứ tự bảng chữ cái, nếu muốn danh sách theo tần số thì sử dụng &Order=frequency.

Nếu bạn sử dụng Hệ thống nhận xét Disqus thì có thể sử dụng tiện ích Top Commentators của Disqus. Tiện ích này có hiển thị Avatar cho người bình luận.

Top Commentators

Để cài đặt tiện ích này bạn chỉ cần đặt code bên dưới vào một tiện ích HTML/JavaScript khi thiết kế trong Blogger của bạn.

<div id="topcommenters" class="dsq-widget">
<script type="text/javascript" src="http://huynh-nhat-ha.disqus.com/top_commenters_widget.js?num_items=10&hide_mods=0&hide_avatars=0&avatar_size=32"></script>
</div>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng shortname khi bạn đăng ký tài khoản Disqus.

Thuộc tính CSS cho tiện ích Người theo dõi

Tiện ích Người theo dõi (Followers) là một tiện ích rất cần thiết cho blogspot, giúp kết nối bạn bè trong cộng đồng Blogger. Khi cài đặt tiện ích này, chúng ta thường sử dụng các thuộc tính mặc định sẵn có trong quá trình cài đặt.

Tuy nhiên chúng ta có thể điều chỉnh thuộc tính cho tiện ích này bằng cách sử dụng CSS. Bạn hãy đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

#Followers1 h2 {/* Thay đổi style tiêu đề */
}
#Followers1-wrapper {/* Chứa các thành phần */
}
.follow-this { margin: 0 5px 5px 0; text-align: right;}
.follow-this a { /* Liên kết Theo dõi */
color: #7E92A6; font-weight: normal; font-size: 11px;
}
.follow-this a:hover {color: #9EB2C6; font-weight: bold;}
.followers-canvas {/* Số người theo dõi */
background: transparent url(URL_hình ảnh) no-repeat scroll left top; color: #778899; float: right; font-size: 11px; font-weight: normal; margin: 5px 5px 0 0; padding-left: 15px; text-align: right;}
.following-not-admin a { /* Liên kết "Xem tất cả" */
color: #7E92A6; display: block; font-size: 11px; font-weight: normal; text-align: right;}
.following-not-admin a:hover {color: #9EB2C6; font-weight: bold;}
.blog-admin a { /* Liên kết "Quản lý" */
color: #7E92A6; font-weight: normal; font-size: 11px;}
.blog-admin a:hover {color: #9EB2C6; font-weight: bold;}
.followers-grid { /* Vị trí không gian hiển thị Avatar */
margin: 0 auto; padding: 0;}
.follower-img {float: left; margin: 0; padding: 0;}
.follower { /* style cho avatar người theo dõi */ float: left; height: 70px; margin: 0px; width: 70px}

Nếu bạn biết về CSS thì có thể tùy ý điều chỉnh đoạn CSS trên theo ý tưởng của bạn. :4)

Chèn icon vào sau liên kết

Chèn icon đại diện vào sau liên kết một cách tự động :34) là một phương pháp phân biệt các kiểu liên kết khác nhau trên trang web của bạn. Các kiểu liên kết khác nhau đó gồm liên kết đến các trang video (như Youtube), các trang hình ảnh (như Flickr), các liên kết cho file có đuôi mở rộng (extension), liên kết Messenger Chat, các liên kết đến các trang xã hội, trang wiki… :44)

Bạn có thể xem Demo.

Để thực hiện điều này, bạn hãy đặt đoạn code CSS sau đây vào trước thẻ </head>.

<style type="text/css">
/* Video Websites */
a[href *="youtube.com/watch?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/youtube.gif) no-repeat center right; } a[href *="metacafe.com/watch/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/metacafe.gif) no-repeat center right; }
/* Image Websites */
a[href *="flickr.com/photos/"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/flickr.jpg) no-repeat center right; } a[href *="imageshack.us"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/imageshack.jpg) no-repeat center right; } a[href *="photobucket.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/photobucket.png) no-repeat center right; } a[href *="picasaweb.google"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/picasa.gif) no-repeat center right; }
/* Extensions */
a[href$='.doc'], a[href$='.rtf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/word.gif) no-repeat center right; } a[href$='.txt'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/txt.gif) no-repeat center right; } a[href$='.xls'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xls.png) no-repeat center right; } a[href$='.rss'], a[href$='.atom'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rss.gif) no-repeat center right; } a[href$='.torrent'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/torrent.gif) no-repeat center right; } a[href$='.vcard'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/vcard.gif) no-repeat center right; } a[href$='.exe'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/exe.gif) no-repeat center right; } a[href$='.pps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pps.gif) no-repeat center right; } a[href$='.pdf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/pdf.gif) no-repeat center right; } a[href$='.xpi'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/xpi.png) no-repeat center right; } a[href$='.fla'], a[href$='.swf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/swf.png) no-repeat center right; } a[href$='.zip'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/zip.gif) no-repeat center right; } a[href$='.rar'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/rar.png) no-repeat center right; } a[href$='.ical'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ical.gif) no-repeat center right; } a[href$='.css'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/css.png) no-repeat center right; } a[href$='.ttf'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/ttf.png) no-repeat center right; } a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/jpg.jpg) no-repeat center right; } a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mpg.png) no-repeat center right; } a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/mp3.gif) no-repeat center right; }
/* Messenger */
a[href ^="aim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/aim.gif) no-repeat center right; } a[href ^="msnim:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/msn.gif) no-repeat center right; } a[href *="edit.yahoo.com/config/send_webmesg?"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/yim.gif) no-repeat center right; } a[href ^="skype:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/skype.gif) no-repeat center right; }
/* Mail */
a[href ^="mailto:"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/email.png) no-repeat center right; }
/* Social Networks */
a[href *="facebook.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/facebook.jpg) no-repeat center right; } a[href *="twitter.com"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/twitter.gif) no-repeat center right; }
/* Other */
a[href *="wikipedia.org/wiki"] { padding: 5px 20px 5px 0; background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/wikipedia.png) no-repeat center right; }
/* External Links */
a[target="_blank"]
{padding: 5px 20px 5px 0;background: transparent url(http://www.fileden.com/files/2009/9/13/2573667/iconos/external.gif) no-repeat center right;}
/ * Use this class if you want your images not to be added with the icon * /
.imagelink { padding: 0px !important; background-image: none !important; }
</style>

Trong đoạn code CSS ở trên, bạn có thể xóa bỏ phần CSS bất kỳ liên quan đến kiểu liên kết mà bạn không cần sử dụng.

Về cấu trúc HTML, bạn tạo cấu trúc thông thường cho liên kết dưới dạng:
<a href="URL_liên kết">Liên kết</a>

Đối với hình ảnh, nếu bạn không muốn hiển thị icon thì sử dụng cấu trúc HTML sau đây:

<a class="imagelink" href="URL_liên kết hình ảnh"><img src="URL_liên kết hình ảnh"/></a>

Đối với liên kết ngoài bạn muốn hiển thị icon sau liên kết thì sử dụng cấu trúc HTML sau đây:

<a target="_blank" href="URL_liên kết ngoài">Liên kết ngoài</a>

Thủ thuật này áp dụng tốt cho cả Blogger. :27)

Dec 22, 2010

Tạo trang mục lục bài viết theo nhãn với hiệu ứng đàn xếp

Đối với các blogspot chứa rất nhiều bài viết thì mục lục bài viết sẽ rất dài và như thế sẽ gây khó khăn cho người đọc khi tìm bài viết. Hiệu ứng đàn xếp giúp cho mục lục bài viết trở nên gọn gàng hơn. Abu Farhan đã áp dụng hiệu ứng đàn xếp cho mục lục bài viết (Table of Content with Accordion) tuy nhiên có một điểm khiến nhiều blogger không thích trong tiện ích này lại là liên kết quảng cáo cho Abu Farhan (liên kết Widget by Abu Farhan).

Tôi nhận thấy thủ thuật này khá hay song vẫn trăn trở làm thế nào để áp dụng cho Blogger Việt Nam một cách hoàn hảo. Chỉ có một cách là tìm cách ẩn đi liên kết quảng cáo cho Abu Farhan. Người ta thường nói, hữu xạ tự nhiên hương, cho nên việc xóa đi liên kết quảng cáo này là điều có thể chấp nhận được.

Đây là Demo của Abu Farhan. Và đây là Demo của tôi.

Nếu bạn thích tạo trang mục lục với hiệu ứng đàn xếp do tôi điều chỉnh thì hãy thực hiện như sau.

Đặt toàn bộ đoạn code dưới đây vào một trang item hay trang tĩnh (static page) ở chế độ chỉnh sửa HTML.

<style type='text/css'>
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.post-footer, #blog-pager, #comments,#disqus_thread{display:none;}
h3.title-header {float:center;text-align:center;font-size:15px}
</style>
<script src="http://hacodeproject.googlecode.com/files/bloggertocaccordion.js"></script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://hacodeproject.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn.

Dec 21, 2010

Tạo trang mục lục bài viết theo nhãn

Abu Farhan đã có thủ thuật tạo danh mục nội dung (table of content) cho blogspot theo nhiều kiểu khác nhau nhưng có một cách khá được ưa chuộng theo bài viết này.

Nhiều blogger Việt Nam đã áp dụng và lan truyền thủ thuật này, tuy nhiên một điểm rất khó chịu có thể dễ dàng thấy được là ở cuối mục lục bài viết theo nhãn có liên kết Widget by Abu Farhan.

Mình cho rằng Abu Farhan có một số thủ thuật cần thiết và hay, tuy nhiên có một điểm không ghiền đó là dường như thủ thuật nào cùng có script mặc định hiển thị liên kết quảng cáo cho Abu Farhan. Nếu bạn là một người kỹ tính thì bạn sẽ không thích cài đặt bất kỳ một tiện ích nào có kiểu quảng cáo như vậy.

Tạm thời chưa nghĩ ra script để tạo tiện ích Table of Content cho riêng mình nên mới định xài thử cái script của Abu Farhan. Nhưng cứ nghĩ đến cái liên kết quảng cáo ở cuối tiện ích là tôi lại nghĩ ra ý định xóa nó đi để cho tiện ích đẹp hơn, mặc dù đắc tội với Abu Farhan nhưng lại giúp ích cho Blogger Việt Nam thì cũng dám nghĩ dám làm, cuối cùng giúp cho tiện ích Mục lục bài viết theo nhãn (Table of Content by Label) được hoàn thiện hơn.


Nếu bạn cũng muốn có một trang mục lục như vậy cho blogspot của mình thì hãy đặt đoạn code dưới đây vào bài viết ở chế độ Edit HTML trong công cụ đăng bài của Blogger. Có thể tạo trang item hoặc trang tĩnh (static page).

<script src="http://hacodeproject.googlecode.com/files/bloggertoc.js"></script>
<script src="http://huynh-nhat-ha.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<style>
.post-footer, #blog-pager, #comments,#disqus_thread{display:none;}
h3.title-header {float:center;text-align:center;font-size:15px}
</style>

Bạn cần thay huynh-nhat-ha thành tên blogspot của bạn. Mục đích của code CSS ở trên là ẩn đi (display:none) một số phần như phần post-footer, blog-pager, comments…

Tạo chữ cái đầu tiên in hoa cho bài viết và nhận xét

Chúng ta đã biết cách tạo chữ cái đầu theo phong cách báo chí cho bài viết Blogger tại bài này. Hôm nay tôi xin giới thiệu một cách khác để tạo chữ cái đầu in hoa cho bài viết, cho phần nhận xét, và cho bất kỳ một đoạn văn bản nào đó một cách tự động.

Xem Demo dưới đây.


Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu. Đây là đoạn văn mẫu.

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

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code CSS sau đây vào trước dòng]]></b:skin>.

.capital:first-letter {
float:left;
display:block;
font-family:"times new roman";
font-size:3em;
color:#990000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Bạn có điều chỉnh font-family và font-size theo ý muốn của mình.

Lưu Template.

Bước 2. Nếu bạn muốn hiển thị chữ cái in hoa đầu tiên cho toàn bài viết thì trong Template tìm dòng <p><data:post.body</p> rồi thay nó thành <p class="capital"><data:post.body</p>

Hoặc dòng <data:post.body/> rồi thay nó thành <span class="capital"><data:post.body/></span>.

Nếu bạn muốn hiển thị chữ cái in hoa đầu tiên cho phần nhận xét thì tìm dòng <data:comment.body/> rồi thay nó thành <p class="capital"><data:comment.body/></p>

Nếu bạn muốn hiển thị chữ cái in hoa đầu tiên cho một đoạn văn bản nào đó thì định dạng cấu trúc HTML như sau.

<p class="capital">Đoạn văn muốn tạo chữ cái in hoa đầu tiên</p>
Hoặc
<div class="capital">Đoạn văn muốn tạo chữ cái in hoa đầu tiên</div>

Nút theo dõi Twitter kiểu chim bay theo phong cách Giáng sinh

Chúng ta đã biết cách tạo nút theo dõi Twitter kiểu chim bay theo bài viết này. Giáng sinh sắp đến rồi và từ bài viết này, chúng ta có thể đưa ra ý tưởng tạo nút theo dõi Twitter kiểu chim bay với phong cách Giáng sinh.

Để 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/birdsprite.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ần thay tên username cho tài khoản Twitter của bạn nhé!

Dec 20, 2010

Chèn icon cho nhãn trước tiêu đề bài viết Blogger

Đặt icon cho từng nhãn trước tiêu đề bài viết là một cách giúp nhận diện nhanh chủ đề của bài viết. Trước đây blogger Fan Dung đã có bài giới thiệu về cách thực hiện điều này.

Hôm nay tôi có nghĩ ra một cách có thể nói là có hiệu quả tương đương, sử dụng javascript để gán tự động hình icon đại diện cho từng nhãn và ít can thiệp đến cấu trúc HTML trong Template. Mỗi khi blogspot của bạn có thêm nhãn thì chỉ cần gán thêm hình icon đại diện cho nhãn trong đoạn code javascript một cách đơn giản, tránh đụng đến HTML trong Template và điều này đặc biệt hữu dụng đối với các bạn chưa rành về XML của Blogger Template.

Xem Demo.

Để thực hiện điều này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML chọn Expand Widget Templates.

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

<!--ICON FOR LABEL AUTO BEFORE POST TITLE BY HUYNH NHAT HA-->
<style type='text/css'>
.post-icon{
filter: alpha(opacity=80);
opacity: .8;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
float:left;margin-right:5px;width:20px;height:20px;display:block;border:solid 0px;
}
.post-icon:hover{
filter: alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
-khtml-opacity: 1.0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
function imagelabel(label) {
type=0;
image = new Array()
image[0] = ""
image[1] = "<img class='post-icon' src='URL_icon_Nhãn 1' title='Chuyên mục: Nhãn 1'/>"
image[2] = "<img class='post-icon' src='URL_icon_Nhãn 2' title='Chuyên mục: Nhãn 2'/>"
image[3] = "<img class='post-icon' src='URL_icon_Nhãn 3' title='Chuyên mục: Nhãn 3'/>"
image[4] = "<img class='post-icon' src='URL_icon_Nhãn 4' title='Chuyên mục: Nhãn 4'/>"
image[5] = "<img class='post-icon' src='URL_icon_Nhãn 5' title='Chuyên mục: Nhãn 5'/>"

if (label == "Nhãn 1"){type=1;}
if (label == "Nhãn 2"){type=2;}
if (label == "Nhãn 3"){type=3;}
if (label == "Nhãn 4"){type=4;}
if (label == "Nhãn 5"){type=5;}
document.write(image[type]);
}
//]]>
</script>

Bạn cần thay những dòng được đánh dấu màu xanh bằng địa chỉ URL icon đại diện cho từng nhãn và những dòng được đánh dấu màu đỏ bằng tên nhãn tương ứng với icon. Mỗi khi blog của bạn có thêm nhãn thì chỉ cần gán thêm vào đoạn code javascript ở trên theo đúng cách thức:

image[n] = "<img style='width:15px;' class='post-icon' src='URL_icon_Nhãn n' title='Chuyên mục: Nhãn n'/>"

if (label == "Nhãn n"){type=n;}

Bước 2. Tìm dòng <div class='post-title'> rồi đặt sau nó với đoạn code bên dưới.

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagelabel(&quot;<data:label.name/>&quot;);</script></a>
</b:loop>
</b:if>
</div>

Lưu Template là OK.

Chúc bạn thành công nhé! :37)

Dec 19, 2010

Tiện ích đám mây nhãn dạng flash cho blogspot tiếng Việt

"Blogumus" là một tiện ích đám mây nhãn kiểu flash sử dụng script được chuyển đổi từ plugin WP Culumus của Roy Tanck cho Wordpress. Blogumus do Amanda tại blog Bloggerbuster điều chỉnh để sử dụng cho Blogger. Amanda đã có bài viết hướng dẫn khá phức tạp cho tiện ích này.

Cách cài đặt tiện ích như thế nhìn chung khó sử dụng cho Blogger Việt Nam, hơn nữa phải đụng đến việc chỉnh sửa Template. Và một điều bất cập là nếu blogspot tiếng Việt đặt tên nhãn tiếng Việt thì tiện ích không hiển thị được tiếng Việt. Qua nghiên cứu, tôi có một số điều chỉnh để cho code đơn giản hơn và không cần phải can thiệp vào Template, hơn nữa có thể áp dụng được cho các nhãn tiếng Việt. Bạn chỉ cần đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là được. :7)

<embed allowscriptaccess="always" bgcolor="#000000" flashvars="tcolor=0x990000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 1' style='12'&gt;Label 1&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 2' style='12'&gt;Label 2&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 3' style='12'&gt;Label 3&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 4' style='12'&gt;Label 4&lt;/a&gt;
&lt;a href='http://huynh-nhat-ha.blogspot.com/search/label/Nhãn 5' style='12'&gt;Label 5&lt;/a&gt;
&lt;/tags&gt;" height="200" id="tagcloud" name="tagcloud" quality="high" src="http://sites.google.com/site/ngonngulaptrinhvn/files/tagcloud.swf" type="application/x-shockwave-flash" width="300" wmode="transparent"></embed>

Ở trong đoạn code trên, bạn chú ý thay các chữ Nhãn 1, Nhãn 2, Nhãn 3, … được đánh dấu màu đỏ thành tên nhãn tương ứng bằng tiếng Việt có dấu (ví dụ: Thủ thuật Blogger, Thủ thuật CSS, Thủ thuật HTML, …); sau đó thay các chữ Label 1, Label 2, Label 3, … được đánh dấu màu xanh thành các tag tương ứng bằng tiếng Anh hoặc tiếng Việt không dấu (ví dụ: Blogger, CSS, HTML, …). Cách này khắc phục được tình trạng tag tiếng Việt có dấu không hiển thị được trong tiện ích. Chú ý thay huynh-nhat-ha thành tên blogspot của bạn.

Dòng width="300" thể hiện chiều rộng tiện ích, cần điều chỉnh cho tương thích với chiều rộng của phần sidebar, dòng height="200" thể hiện chiều cao tiện ích, dòng bgcolor="#000000" biểu thị màu nền tiện ích, tcolor=0x990000 biểu thị màu font chữ và tspeed=100 biểu thị tốc độ flash.

Bạn có thể thêm vào nhiều nhãn cho code ở trên.