trang web chia se thong tin9

Saturday, October 8, 2011

ScrollingSidebar cho blogspot

Nhiều người hỏi Yolks , làm sao để có thể cho sidebar di chuyển theo thành Scrolling của trình duyệt web. Rất đơn giản nhưng chúng ta có 2 cách làm: Dùng .js hoặc css đều được . Yolks sẽ nêu 2 cách ae muốn làm sao cũng được.

Demo

Trước tiên:Xin lưu ý cách tìm ID sidebar để add thêm css vào thêm ID cho chính xác với .js

Bước 1: Dùng css

Tìm đoạn css chính của sidebar theo hình:

#sidebar{width:295px;float:right}

Thay nó thành:

#sidebar{width:295px;float:right;position: fixed;left: 50%; top: 90px;margin: 0 0 0 110px;max-height:1000px;
;}

Chỉnh lệnh left và top cho sidebar.
Lưu ý: chỉ dùng cho sidebar thứ 3 hoặc áp dụng với sidebar ngắn gọn.
Bước 2: Dùng .js:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>

Nếu đã có:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

Thì xóa nó đi và thay sidebar thành ID chính của blog bạn theo hình trên.

Nếu nó chạy mãi không dừng thì thêm vào css của sidebar đoạn code vd sau.

#sidebar{width:295px;float:right;max-height:1000px;}

Chỉnh thông số cho phù hợp

Một số cách tối ưu hóa CSS giúp tăng tốc blogspot

Tối ưu hóa CSS là một trong những cách giúp trang webblog của bạn load nhanh hơn. Trong phạm vi bài viết này, mình sẽ chia sẻ cùng bạn những cách tối ưu hóa CSS và kỹ thuật giảm kích cỡ file được hầu hết các nhà thiết kế web sử dụng. Tùy thuộc vào độ phức tạp của CSS trên trang của bạn mà những kỹ thuật này có thể được vận dụng linh hoạt, góp phần giảm số kylobyte cho CSS files.

1. Sử dụng file ngoài, gọp tất cả các file ngoài thành một file chung và đặt trong phần Head (ở đỉnh đầu) của trang:

Sử dụng file ngoài giúp trang load nhanh hơn do các file CSS được công cụ trình duyệt lưu giữ trong bộ nhớ cache. CSS được sắp xếp trong các tài liệu HTML được hạ tải mỗi khi tài liệu HTML được yêu cầu. Sử dụng file ngoài giúp hạn chế số HTTP requests cần thiết, nhưng tăng kích cỡ tài liệu HTML. Mặt khác, nếu CSS nằm trong các file ngoài được công cụ trình duyệt lưu nhớ cache thì kích cỡ tài liệu HTML được hạn chế mà không làm tăng số HTTP requests (Đây là quy tắc số 8 trong cuốn sách High Performance Web Sites của Steve Souders dành cho các nhà phát triển web chuyên nghiệp).

Thông thường đối với blogspot, CSS được đặt trước dòng ]]></b:skin> hoặc trước thẻ </head> như thế này:

<head>
......
......
......
<b:skin><![CDATA[/*
body {
font-family:verdana;
margin:0;
padding:0;
}
a {
text-decoration:none;
outline: none;
}
h1 {
font-weight:700;
margin:5px 0;
}
......
......
......
]]></b:skin>
<style>
......
......
......
</style>
</head>

Nếu bạn có host thì nên gọp thành file chung (đặt tên default.css) rồi upload lên host, đặt file như thế này:

<head>
......
<link rel="stylesheet" type="text/css" href="http://www.tenhost.com/css/default.css" />
......
</head>

Để hạn chế số HTTP requests, người ta còn khuyến cáo gọp các file CSS thành một file chung. Ví dụ nếu bạn có 3 file CSS trên trang web thì trình duyệt sẽ gửi 3 HTTP requests đến server. Như vậy nếu dùng chung 1 file CSS thì thời gian load trang sẽ nhanh hơn rất nhiều.

Nếu bạn có 3 file CSS như thế này:

<link rel="stylesheet" type="text/css" href="content.css" />
<link rel="stylesheet" type="text/css" href="widget.css" />
<link rel="stylesheet" type="text/css" href="comment.css" />

Thì nên gộp thành một file như sau:

<link rel="stylesheet" type="text/css" href="default.css" />

2. Rút gọn CSS:

Việc gộp chung tất cả các thuộc tính giống nhau sẽ giúp hạn chế kích cỡ CSS. Thay vì sử dụng nhiều dòng thuộc tính, tại sao chúng ta không tạo thành một dòng.

Đây là ví dụ đoạn CSS có nhiều thuộc tính giống nhau:

/* MARGIN */
h1 {margin-top:1em;
margin-right:0;
margin-bottom:2em;
margin-left:0.5em;
}
/* BORDER */
h1 {border-width:1px;
border-style:solid;
border-color:#000;
}
/* BORDER WIDTH */
h1 {border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;
}
/* BACKGROUND */
div {background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}
/* FONT */
h1 {font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
}
/* LIST STYLE */
ul {list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
}
/* OUTLINE */
h1 {outline-color:#f00;
outline-style:solid;
outline-width:2px;
}

Chúng ta nên rút gọn thành như sau:

/* MARGIN */
h1 {margin:1em 0 2em 0.5em;}
/* BORDER */
h1 {border:1px solid #000;}
/* BORDER WIDTH */
h1 {border-width:1px 2px 3px 4px;}
/* BACKGROUND */
div {background:#f00 url(background.gif) no-repeat fixed 0 0;}
/* FONT */
h1 {font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}
/* LIST STYLE */
ul {list-style:square inside url(image.gif);}
/* OUTLINE */
h1 {outline:#f00 solid 2px;}

Rõ ràng bạn thấy đã giảm kích cỡ rất đáng kể cho CSS.

3. Gộp các định dạng CSS giống nhau:

Đôi khi chúng ta khai báo các định dạng CSS giống nhau mà chúng ta vô tình không nhận ra. Tốt nhất nên xem và phân tích lại. Hãy gộp chúng lại với nhau cho đơn giản hơn.

Ví dụ sau đây là đoạn CSS có các định dạng giống nhau:

h1 {padding:5px 0; font-family:verdana; font-weight:700;}
#box1 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
#box2 .heading {padding:5px 0; font-family:verdana; font-weight:700;}
#nav a.home {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(home.gif) no-repeat 5px 5px}
#nav a.portfolio {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(portfolio.gif) no-repeat 5px 5px}
#nav a.contact {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(contact.gif) no-repeat 5px 5px}
#nav a.about {padding:5px 0; font-family:verdana; font-weight:700; background:#fff url(about.gif) no-repeat 5px 5px}

Chúng ta nên gộp lại như sau:

h1, #box1 .heading, #box2 .heading {padding:5px 0; font-family:verdana; font-weight:700}
#nav a {padding:5px 0; font-family:verdana; font-weight:700; background:#fff no-repeat 5px 5px}
#nav a.home {background:url(home.gif)}
#nav a.portfolio {background:url(portfolio.gif)}
#nav a.contact {background:url(contact.gif)}
#nav a.about {background:url(about.gif)}

4. Nén CSS:

- Hạn chế xuống dòng và bỏ dấu chấm phẩy (;) cuối cùng:

Ví dụ đối với đoạn CSS này:

h2 {
font-family:verdana;
padding:0;
margin:5px 0;
color:#333;
text-decoration:underline;
}

Nên nén lại thành một dòng như sau:

h2 {font-family:verdana;padding:0;margin:5px 0;color:#333;text-decoration:underline}

- Sử dụng chú thích đơn giản:

Ví dụ đối với một đoạn chú thích phức tạp như thế này:

/************************************/
/* Content Styles */
/************************************/

Thì nên đơn giản hóa lại như sau (hoặc có thể bỏ luôn chú thích):

/* content styles */

- Loại bỏ 0px:

Ví dụ đối với đoạn CSS này:

h2 {padding:0px; margin:0px;}

Thì nên sửa lại như sau:

h2 {padding:0; margin:0}

5. Sử dụng mã màu đơn giản:

Đối với một số mã màu như thế này: #FFFFFF, #113344, #AABBCC, #FF0000

Thì chúng ta nên giản lượt lại như sau: #FFF, #134, #ABC, #F00

6. Loại bỏ các đoạn CSS không cần thiết:

Trong quá trình thiết kế webblog, do nhiều khi thay đổi giao diện hoặc tháo các tiện ích, một số lớp/ID đã được tạo trước đây thì nay không còn dùng đến nữa. Chúng ta nên kiểm tra và loại bỏ chúng.

Dust-Me Selector và CSS Roundup là hai Addon của Firefox giúp phân tích trang để tìm ra những phần CSS không được dùng đến. Bạn có thể cài đặt một trong hai tiện ích này để giúp bạn làm thay công việc này (tuy nhiên hai tiện ích này chưa hoạt động được với phiên bản mới nhất của FireFox, chỉ dùng được với các phiên bản từ FF6+ trở về trước).

7. Sử dụng các công cụ tối ưu hóa và nén CSS online để giúp bạn đỡ mệt nhọc hơn:

CSS Optimizer
Flumpcakes CSS Optimizer
Clean CSS
CSS Drive CSS Compressor
Online YUI Compressor
Style Neat

8. Sử dụng CSS Sprite:

CSS Sprite là phương pháp tối ưu để hạn chế số lượng HTTP requests về hình ảnh. Kết hợp các ảnh nền thành một ảnh duy nhất và sử dụng các thuộc tính background-image và background-position để hiển thị ảnh theo ý muốn. Phương pháp này rất hữu ích cho các trang có lượng khách truy cập đông. CSS Sprite là một phạm trù kiến thức nâng cao, bạn có thể tham khảo ở một bài viết khác sau này.

Thursday, October 6, 2011

Tiện ích Recent Twitter không dùng Javascript

Thông thường để tạo tiện ích Recent Twitter, chúng ta phải dùng đến Javascript (JSON) hoặc jQuery. Tuy nhiên có một cách giúp cho tiện ích Recent Twitter được nhẹ hơn là không dùng js bằng cách sử dụng tiện ích Blog List.

Ở đây mình dùng lệnh điều kiện để thêm Avatar cho từng Username trên Twitter muốn gắn vào tiện ích.

DEMO

Để cài đặt tiện ích 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ìm đến thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích Recent Twitter gần với nó, rồi đặt sau thẻ </b:widget> bằng đoạn code bên dưới:

<b:widget id='BlogList222' locked='false' title='Recent Twitter Feeds' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<ul>
<b:loop values='data:items' var='item'>
<li>
<b:if cond='data:showIcon == "true"'>
<span class='twitter-avatar'>
<b:if cond='data:item.blogUrl == "http://twitter.com/username1"'>
<a expr:href='data:item.blogUrl'><img src='URL_Avatar_1' /></a>
</b:if>
<b:if cond='data:item.blogUrl == "http://twitter.com/username2"'>
<a expr:href='data:item.blogUrl'><img src='URL_Avatar_2' /></a>
</b:if>
<b:if cond='data:item.blogUrl == "http://twitter.com/username3"'>
<a expr:href='data:item.blogUrl'><img src='URL_Avatar_3' /></a>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemTitle == "true"'><data:item.itemTitle/></b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == "true"'><a expr:href='data:item.itemUrl'><data:item.timePeriodSinceLastUpdate/></a></b:if>
</li>
<div style='clear:both'/>
</b:loop>
</ul>
</b:includable>
</b:widget>

Bạn lần lượt thay Username trên Twitter tương ứng với địa chỉ từng Avatar trên Twitter (click vào hình trên Twitter để lấy URL).

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

#BlogList222 .twitter-avatar {
float:float:left;
margin:0 .5em 0 0;
}
#BlogList222 img {
width:32px;
height:32px;
border:1px solid #DDD;
padding:1px
}
#BlogList222 ul {
font:normal normal 90% Tahoma, sans-serif;
}
#BlogList222 li {
border-bottom:1px dashed #666666;
padding:4px 0 4px 0;
margin:0
}

Lưu Template.

Bước 3. Vào Page Element. Tìm đến tiện ích Recent Twitter rồi chỉnh sửa, tick vào các tùy chọn như hình minh họa.

Sau đó lần lượt Add các URL tương ứng, ví dụ:

http://twitter.com/username1

http://twitter.com/username2

http://twitter.com/username3.

Ghi danh Khóa học HTML5 & CSS3

HTML5 là tiêu chuẩn web HTML mới nhất, cung cấp sự linh hoạt, dễ dàng mã hóa, và các tính năng mới mạnh mẽ. Tương tự như vậy, CSS3 cho chúng ta các thuộc tính phức tạp hơn và các giải pháp tối ưu cho việc định dạng và tạo hiệu ứng động cho các thành phần.

Mặc dù chi tiết kỹ thuật cho các ngôn ngữ này chưa được hoàn tất, nhiều trình duyệt hiện đại đã hỗ trợ một tập hợp lớn các thành phần HTML5 và các đơn vị CSS3. Khóa học này sẽ cho bạn thấy một mẫu các kỹ thuật mới mà bạn có thể sử dụng trong hầu hết các trình duyệt chính.

Khóa học sẽ giúp bạn tìm hiểu làm thế nào để cấu trúc nội dung trang của bạn tốt hơn với các yếu tố ngữ nghĩa mới và kinh nghiệm sự kỳ diệu của hỗ trợ âm thanh và video tự nhiên. Tạo bóng đổ, bóng văn bản, góc tròn, các thành phần nửa trong suốt, và màu nền tô dốc thuần túy bằng CSS. Thực hành sử dụng các thuộc tính biến hình và chuyển tiếp CSS thật thú vị để tạo ra các hiệu ứng hoạt hình đơn giản mà không cần sử dụng JavaScript hoặc Flash.

Nếu bạn thực sự có mong muốn cảm thụ những trải nghiệm thú vị về HTML5 và CSS3 để vận dụng vào việc thiết kế blogspot, hãy đăng ký tham gia khóa học đồng thời cam kết thực hiện nghiêm chỉnh những quy định sau đây trong khóa học.

- 1 Phải hiếu học, có lòng đam mê và chuyên cần. Hãy cân nhắc thật kỹ trước khi quyết định tham gia khóa học nếu bạn thấy mình chưa thể sẵn sàng. Ở mỗi buổi học (bài học) bạn phải đến điểm danh để tính điểm chuyên cần. Nếu bạn vắng học quá 5 buổi thì bạn sẽ bị đình chỉ và bị loại ra khỏi lớp học.
- 2 Học lý thuyết đi đôi với thực hành. Hãy cố gắng nghiên cứu kỹ lý thuyết và vận dụng vào các bài tập thực hành. Làm đầy đủ các bài tập trong quá trình học.
- 3 Chia sẻ kinh nghiệm với bạn học. Trong quá trình tìm tòi, nghiên cứu, tự khám phá ra rất nhiều điều mở rộng từ bài học, hãy sẵn sàng chia sẻ kiến thức đó với mọi người. Việc này không chỉ giúp ích cho các bạn khác mà còn giúp ích cho bản thân bạn tự hoàn thiện mình.
- 4 Các quy ước:
  
  - Ghi danh: Ghi danh vào khóa học bằng cách gửi yêu cầu ghi danh ở phần Comments dưới đây. Thời hạn ghi danh là 05 ngày kể từ ngày ra thông báo này.
  
  - Điểm danh: Cứ sau mỗi bài học được đăng, học viên đến điểm danh bằng cách gửi lời xác nhận có mặt tại phần Comments sau bài học.
- 5 Cuối khóa học, học viên sẽ tham gia làm một bài thi trắc nghiệm. Học viên đạt điểm cao nhất sẽ được tặng phần thưởng là một trong những dịch vụ hoặc sản phẩm hiện có của Thủ thuật Blogger.

Nếu bạn vi phạm một trong những nội quy nói trên, chúng tôi sẽ từ chối hỗ trợ bạn và có thể xem xét việc loại bạn ra khỏi lớp học.

Chúc các bạn hoàn thành khóa học một cách viên mãn!

DANH SÁCH HỌC VIÊN KHÓA HỌC HTML5 & CSS3

Wednesday, October 5, 2011

Đánh giá mức độ seo cho blogspot với Websitegrader

Một trang chuyên phân tích các mảng trong blog của chúng ta để đánh giá mức độ seo chuẩn cho blog bạn . Điểm số của trang web này rất quan trọng và đưa ra 1 số biện pháp khắc phục rất nhanh chóng và chính xác.

Bước 1.Hướng dẫn check seo:

Vào trang chủ ở link này sau đó các bạn làm theo hình hướng dẫn trên:

Và các bạn bấm nút GENERATE REPORT.. Chờ 1 lát và xem kết quả lẫn hỗ trợ.

Bước 2. Để chèn tiện ích đánh giá vào blog:

Các bạn làm seo đoạn code sau đây:

<a href="http://websitegrader.com/site/www.tenmiencuaban.com">
<img alt="The Website Grade for www.tenmiencuaban.com!" src="http://badge.websitegrader.com/site/www.tenmiencuaban.com" />
</a>

Thay đoạn code trên phù hợp với blog của bạn.

Sau đây là 1 vài ví dụ:

Kết quả seo của Fandung.com

The Website Grade for www.thuthuatblogger.info!

Kết quả seo của Thuthuatblogger.info

The Website Grade for www.vnblogspot.com!

Kết quả seo của Vnblogspot.com

The Website Grade for www.vngreenzone.com!

Kết quả seo của blog Yolks

Tiện ích nhãn chỉ hiển thị một số nhãn chỉ định khi duyệt xem một trang nhãn nhất định

Khi duyệt xem một trang nhãn bất kỳ, chúng ta chỉ muốn một tiện ích nhãn chỉ hiển thị một số nhãn nào đó mà thôi, theo đó tiện ích nhãn này sẽ không xuất hiện ở tất cả các trang khác, mà chỉ hiển thị ở một trang nhãn chỉ định nào đó; đây là tình huống lắc léo cho thủ thuật tạo tiện ích nhãn chỉ hiển thị một số nhãn chỉ định khi duyệt xem một trang nhãn nhất định.

Lấy ví dụ ở trang DEMO (kéo xuống đáy trang để xem), mình tạo một tiện ích nhãn (Label) và khi duyệt xem nhãn Simple Present (thì hiện tại đơn) thì tiện ích nhãn này chỉ hiển thị các nhãn liên quan đến thì hiện tại.

Tình huống này nghe có vẻ lạ lẫm song vẫn rất hữu ích cho blogspot trong một số trường hợp vận dụng. Để thực hiện thủ thuật này, bạn hãy thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích nhãn gần với nó, rồi đặt đoạn code sau đây vào sau thẻ </b:widget>.

<b:widget id='Label111' locked='true' title='Tiêu đề tiện ích' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel == "Tên nhãn 111"'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<ul>
<b:loop values='data:labels' var='label'>
<li>» <a expr:href='data:label.url' expr:title='"Xem tất cả " + data:label.count + " bài viết trong nhãn " + data:label.name' rel='category tag'><data:label.name/></a></li>
</b:loop>
</ul>
</b:if>
</b:includable>
</b:widget>

Trong đoạn code trên bạn cần thay Tên nhãn 111 bằng tên nhãn chỉ định và thay tiêu đề tiện ích cho phù hợp.

Lưu Template.

Bước 2. Vào Page Elements >> Chỉnh sửa tiện ích nhãn mới thêm vào. Tùy chọn cho hiển thị số bài đăng trên mỗi nhãn và lựa chọn các nhãn cần thiển thị trong tiện ích.

Có thể vận dụng linh hoạt để áp dụng cho nhiều trang nhãn khác nhau để tạo nét độc đáo cho blogspot của bạn.

Tuesday, October 4, 2011

Chống bôi đen văn bản cho blogspot

Do ngày đầu tiên mới đến TTB mình đã có 1 bài mở đầu, tuy nhỏ nhưng lại bổ ích đó là đoạn code chống bôi đen các văn bản nhằm không cho người khác copy bài viết của chính chúng ta. Nếu đi kèm thêm chống chuột phải thì tuyệt, tham khảo thêm cách chống click chuột phải ở bài viết này.

Bạn hãy thử làm thao tác bôi đen các đoạn text trên bài viết này để thấy tác dụng của script. Để 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: Vào giao diện blog --> Thiết kế --> chỉnh sửa HTML.

Bước 2: Tìm thẻ </body>. Chèn đoạn code sau vào trước nó:

<script type='text/javascript'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Sau cùng lưu Template.

Thành lập Giải thưởng Top Cộng tác viên trong tháng

Nhằm nâng cao chất lượng thông tin phục vụ bạn đọc trong thời gian tới, Thủ thuật Blogger thành lập Giải thưởng Top Cộng tác viên trong tháng, theo đó tác giả có số bài viết được đăng nhiều nhất trong tháng sẽ được tham gia vào cuộc khảo sát lấy ý kiến của độc giả bầu chọn là WINNER; giải thưởng được trao là một Premium Template do Thủ thuật Blogger thiết kế hoặc có thể quy đổi bằng dịch vụ tùy biến Template (trị giá 10 USD).

Thông qua giải thưởng này, Thủ thuật Blogger hy vọng rằng các tác giả sẽ phát huy tinh thần trách nhiệm với cộng đồng, không ngừng nâng cao chất lượng bài viết, lấy bạn đọc làm trung tâm.

Quy định giải thưởng:

1. Tác giả phải có số bài viết tối thiểu trong tháng là 05 bài mới được quyền nhận giải.
2. Các bài viết phải do chính tác giả sáng tác, không sao chép từ các trang khác.
3. Tác giả có số bài viết nhiều nhất trong tháng phải vượt qua cuộc khảo sát tín nhiệm của bạn đọc.

Nhân đây, Thủ thuật Blogger mở rộng chủ đề viết bài, bao gồm: Thủ thuật Blogspot, thủ thuật Wordpress, kỹ năng thiết kế website, kỹ thuật đồ họa, các ngôn ngữ lập trình web (CSS, Javascript, HTML, XML, jQuery, PHP …), lập trình phần mềm.

Bên cạnh đó, tác giả được phép đặt affliate link trong bài viết tối đa là 03 link nếu tác giả có nhu cầu cải thiện thu nhập thông qua các chương trình quảng cáo.

Trân trọng thông báo!

Monday, October 3, 2011

Tạo màu nền xen kẽ cho nhận xét

Chúng ta vừa mới biết cách tạo màu nền xen kẽ cho bài viết ở kiểu trang index (trang chủ, trang nhãn), từ đó chúng ta có thể vận dụng để tạo màu nền xen kẽ cho nhận xét theo như trang demo dưới đây.

DEMO

Việc áp dụng thủ thuật này có liên quan đến thủ thuật tạo số đếm nhận xét vì thế kết hợp hai thủ thuật lại với nhau để đơn giản hóa code, theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates. Đặt kịch bản gán lớp nhận xét chẳn và lẻ vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterComments(strx) {
var therest;
therest = CommentsCounter % 2;
if (therest == 0) {
document.getElementById(strx).className='evenComments';
} else {
document.getElementById(strx).className='oddComments';
}
}
//]]>
</script>

Bước 2. Tìm dòng <b:loop values='data:post.comments' var='comment'>

Và thay nó bằng đoạn code bên dưới:

<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/> (dòng này hiển thị chữ says/said/nói, tùy theo Template bạn có thể đặt đoạn code bên dưới theo ý muốn) rồi chèn bên dưới nó bằng đoạn code sau:

<span class='comment-counter'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code bên dưới:

<script type='text/javascript'>
counterComments('<data:comment.id/>')
</script>

</div>

Bước 3. Đặt code CSS vào trước dòng ]]></b:skin>.

/* số đếm nhận xét */
.comment-counter {
float: right;
display: block;
width: 40px;
margin-top: -30px;
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 28px;
font-weight: normal;
}
.comment-counter a:link, .comment-counter a:visited {color: #445566 !important;}
.comment-counter a:hover, .comment-counter a:active {color: #FF9933 !important;}
/* thuộc tính phân biệt nhận xét chẳn và lẻ */
.evenComments { /* nhận xét chẳn */
margin: 10px 0px;
padding: 5px 20px 0px;
background-color: #F0F0F9;
border:1px solid #DDD;
}
.oddComments { /* nhận xét lẻ */
margin: 10px 0px;
padding: 5px 20px 0px;
background-color: #F0F8FF;
border:1px solid #DDD;
}

Về style cho CSS bạn có thể tự tùy biến và vận dụng linh hoạt cho blogspot của mình. Lưu Template là hoàn thành.

Sunday, October 2, 2011

Tạo màu nền xen kẽ cho bài viết

Lúc trước mình đã hướng dẫn các bạn cách gắn ID cho từng bài viết để từ đó tùy biến CSS riêng cho từng bài viết. Từ đây mình có thể giúp bạn sáng tạo thêm cách tạo màu nền xen kẽ cho bài viết khi duyệt xem các bài viết ở kiểu trang chủ và trang nhãn.

DEMO

Để thực hiện thủ thuật này, trước tiên bạn cần gắn ID cho bài viết.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến dòng code sau rồi thêm vào phần được đánh dấu màu đỏ:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

Bước 2. Kế đến chúng ta sẽ viết một kịch bản gán màu nền cho các bài viết chẳn (evenPosts) và các bài viết lẻ (oddPosts), đặt đoạn code bên dưới vào trước thẻ </head>.

<script type='text/javascript'>
//<![CDATA[
function counterPosts(strx) {
var therest;
therest = PostsCounter % 2;
if (therest == 0)
document.getElementById(strx).className='evenPosts';
else
document.getElementById(strx).className='oddPosts';
}
//]]>
</script>
<style>
.oddPosts {background-color: #F0F8FF; padding: 10px;}
.evenPosts {background-color: #F0F0F9; padding: 10px;}
</style>

Bước 3. Tìm đến thẻ <b:includable id='main' var='top'>

Kéo thêm xuống vài dòng sẽ thấy dòng <b:loop values='data:posts' var='post'> rồi đặt trước nó bằng đoạn code bên dưới:

<script type='text/javascript'>var PostsCounter=0;</script>

Tiếp tục kéo xuống tìm thấy thẻ đóng </b:loop> của thẻ <b:loop values='data:posts' var='post'> rồi thêm trước nó bằng đoạn code bên dưới:

<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>
PostsCounter=PostsCounter+1;
counterPosts('post-<data:post.id/>');
</script>
</b:if>

Toàn bộ đoạn code sau khi thêm vào sẽ trông giống như sau:

<b:includable id='main' var='top'>
.......
<script type='text/javascript'>var PostsCounter=0;</script> 
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>
PostsCounter=PostsCounter+1;
counterPosts('post-<data:post.id/>');
</script>
</b:if>
</b:loop>
.......
</b:includable>

Lưu Template là hoàn thành.

Thursday, September 29, 2011

Cài đặt Accordion Slider tự động cho nhãn

Gần đây mình có thử nghiệm một plugin gọi là liteAccordion của tác giả Nicola Hibbert dành cho website để tạo hiệu ứng đàn xếp. Mình đã nghiên cứu và áp dụng tự động thành công cho blogspot, tạo hiệu ứng đàn xếp trượt theo chiều ngang với bài viết mới nhất theo nhãn tích hợp thành một slider thật mượt mà.

DEMO

Để cài đặt tiện ích 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 (không chọn mở rộng mẫu tiện ích). Đặt đoạn code sau đây vào trước thẻ </body>. Đoạn code này chính là thư viện jQuery giúp tạo hiệu ứng đàn xếp.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
/*************************************************
*
* project: liteAccordion - horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
* demo: http://www.nicolahibbert.com/demo/liteAccordion
*
* Version: 1.1.3
*
/*************************************************/
;(function($) {
$.fn.liteAccordion = function(options) {
// defaults
var defaults = {
containerWidth : 940,
containerHeight : 320,
headerWidth : 48,
firstSlide : 1,
onActivate : function() {},
slideSpeed : 800,
slideCallback : function() {},
autoPlay : false,
pauseOnHover : false,
cycleSpeed : 6000,
theme : 'basic', // basic, light*, dark, stitch*
rounded : false,
enumerateSlides : false
},
// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),
// define key variables
$accordion = this,
$slides = $accordion.find('li'),
slideLen = $slides.length,
slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
$header = $slides.children('h2'),
// core utility and animation methods
utils = {
getGroup : function(pos, index) {
if (this.offsetLeft === pos.left) {
return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
} else if (this.offsetLeft === pos.right) {
return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
}
},
nextSlide : function(slideIndex) {
var slide = slideIndex + 1 || settings.firstSlide;
// get index of next slide
return function() {
return slide++ % slideLen;
}
},
play : function(slideIndex) {
var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
start = function() {
$header.eq(getNext()).click();
};
utils.playing = setInterval(start, settings.cycleSpeed);
},
pause : function() {
clearInterval(utils.playing);
},
playing : 0,
sentinel : false
};
// set container heights, widths, theme & corner style
$accordion
.height(settings.containerHeight)
.width(settings.containerWidth)
.addClass(settings.theme)
.addClass(settings.rounded && 'rounded');
// set tab width, height and selected class
$header
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1).addClass('selected');
// ie :(
if ($.browser.msie) {
if ($.browser.version.substr(0,1) > 8) {
$header.css('filter', 'none');
} else if ($.browser.version.substr(0,1) < 7) {
return false;
}
}
// set initial positions for each slide
$header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth;
if (index >= settings.firstSlide) left += slideWidth;
$this
.css('left', left)
.next()
.width(slideWidth)
.css({ left : left, paddingLeft : settings.headerWidth });
// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
});
// bind event handler for activating slides
$header.click(function(e) {
var $this = $(this),
index = $header.index($this),
$next = $this.next(),
pos = {
left : index * settings.headerWidth,
right : index * settings.headerWidth + slideWidth,
newPos : 0
},
$group = utils.getGroup.call(this, pos, index);
// set animation direction
if (this.offsetLeft === pos.left) {
pos.newPos = slideWidth;
} else if (this.offsetLeft === pos.right) {
pos.newPos = -slideWidth;
}
// check if animation in progress
if (!$header.is(':animated')) {
// activate onclick callback with slide div as context
if (e.originalEvent) {
if (utils.sentinel === this) return false;
settings.onActivate.call($next);
utils.sentinel = this;
} else {
settings.onActivate.call($next);
utils.sentinel = false;
}
// remove, then add selected class
$header.removeClass('selected').filter($this).addClass('selected');
// get group of tabs & animate
$group
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
.next()
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
}
});
// pause on hover
if (settings.pauseOnHover) {
$accordion.hover(function() {
utils.pause();
}, function() {
utils.play($header.index($header.filter('.selected')));
});
}
// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();
return $accordion;
};
})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
$('#one').liteAccordion({
onActivate : function() {
this.find('figcaption').fadeOut();
},
slideCallback : function() {
this.find('figcaption').fadeIn();
},
autoPlay : true,
pauseOnHover : true,
theme : 'dark',
rounded : true,
enumerateSlides : true
}).find('figcaption:first').show();
//]]>
</script>

Bước 2. Tìm thẻ <div id='content-wrapper'> (thẻ này chứa phần Main và phần Sidebar) rồi đặt trước nó bằng đoạn code bên dưới (tạo phần này để bố trí hiển thị Slider):

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' preferred='yes'>
</b:section>
</div>

Lưu Template.

Bước 3. Vào Page Elements. Thêm một tiện ích HTML/Javascript ở phần crosscol vừa tạo ở Bước 2 rồi đặt vào phần nội dung tiện ích bằng đoạn code bên dưới:

<link rel="stylesheet" href="http://www.nicolahibbert.com/demo/liteAccordion/css/liteaccordion.css" type="text/css"/>
<style type="text/css">
.prs {width:745px;}
.prs_pagi_label {background-color:#F0F0F0;float:left;height:120px;margin:0 2px;outline:1px solid #404951;padding:5px;position:relative;width:135px;}
.prs_pagi_label img {background-color:#000;float:left;height:55px;margin:0 8px 0 0;width:55px;}
.prs_pagi_label img.notxt {display:block;floatnone;height:90px;margin:0 auto;width:90px;}
.prs_pagi_label p {color:#888;font-size:11px;line-height:1;}
.prs_pagi_label h6 {bottom:10px;font-family:Artifika,Arial,serif;font-size:11px;font-weight:normal;line-height:1;position:absolute;text-align:center;width:140px;}
.prs_pagi_label h6 a {color:#006699;}
.pr_navi_label {clear:both;color:#BBB;font-family:Tahoma;font-size:18px;margin:0 auto;padding-top:10px;text-align:center;width:243px;}
.pr_navi_label a {color:#BBB !important;display:block;font-family:Tahoma;font-size:18px;padding:5px 10px;}
.pr_navi_label a:hover {color:#FFF !important;}
.pr_navi_label span {padding:5px 10px;}
.pr_navi_label span.deshabilitado {color:#666 !important;}
.pr_navi_label .next {float:right;}
.pr_navi_label .previous {float:left;}
.pr_navi_label .first {text-align:center;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Label Post Accordion Slider for Blogspot by www.thuthuatblogger.info
var post_per_page = 10;
var list_label=new Array();
list_label[0]="Tên nhãn 1";
list_label[1]="Tên nhãn 2";
list_label[2]="Tên nhãn 3";
list_label[3]="Tên nhãn 4";
var pr_flagfirst=new Array();
pr_flagfirst[0]=0;pr_flagfirst[1]=0;pr_flagfirst[2]=0;pr_flagfirst[3]=0;
var url_prev=new Array();
var url_next=new Array();

function knowwhat(json) {
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'self') {
if(json.feed.link[k].href.indexOf("Tên nhãn 1")!=-1) {num_label = 0;}
if(json.feed.link[k].href.indexOf("Tên nhãn 2")!=-1) {num_label = 1;}
if(json.feed.link[k].href.indexOf("Tên nhãn 3")!=-1) {num_label = 2;}
if(json.feed.link[k].href.indexOf("Tên nhãn 4")!=-1) {num_label = 3;}
}
}
return num_label;
}

function showpagelabel(json) {
var entry, posttitle, posturl, postimg, postcontent, postcat;
var strx_out = "";
num_label = knowwhat(json);
url_prev[num_label] = "";
url_next[num_label] = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
url_prev[num_label] = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
url_next[num_label] = json.feed.link[k].href;
}
}
for (var i = 0; i < post_per_page; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = getJSONtitle(entry);
posturl = getJSONurl(entry);
postcat = entry.category[0].term;
postcontent = getJSONcontent(entry,100);
postimg = getJSONthumbnail(entry);
strx_out += "<div class='prs_pagi_label'>";
strx_out += "<a href='" + posturl + "' target='_blank'>";
if(postcat=="Tên nhãn 2" || postcat=="Tên nhãn 3") {
strx_out += "<img class='notxt' alt='' src='" + postimg + "' />";
} else {
strx_out += "<img alt='' src='" + postimg + "' />";
}
strx_out += "</a>";
if(postcat=="Tên nhãn 1" || postcat=="Tên nhãn 4") {
strx_out += "<p>" + postcontent + "</p>";
}
strx_out += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
strx_out += "</div>";
}
document.getElementById("prs" + String(num_label)).innerHTML = strx_out;
strx_out = "";
if(url_prev[num_label]) {
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",-1);' class='previous'>Prev</a>";
} else {
strx_out += "<span class='disabled previous'>Prev</span>";
}
if(url_next[num_label]) {
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",1);' class='next'>Next</a>";
} else {
strx_out += "<span class='disabled next'>Next</span>";
}
strx_out += "<a href='javascript:navi_pagi_label(" + num_label + ",0);' class='first'>First</a>";
document.getElementById("pr_navi_label" + String(num_label)).innerHTML = strx_out;
}

function navi_pagi_label(num_label, direction) {
var p, parameters;
if(direction==-1) {
p = url_prev[num_label].indexOf("?");
parameters = url_prev[num_label].substring(p);
} else if (direction==1) {
p = url_next[num_label].indexOf("?");
parameters = url_next[num_label].substring(p);
} else {
parameters = "?start-index=1&max-results=" + post_per_page + "&orderby=published&alt=json-in-script"
}
parameters += "&callback=showpagelabel";
if(pr_flagfirst[num_label]==1) {
var that = document.getElementById("LABELTEMPORAL" + String(num_label));
var father = that.parentNode;
father.removeChild(that);
}
document.getElementById("prs" + String(num_label)).innerHTML = "";
document.getElementById("pr_navi_label" + String(num_label)).innerHTML = "";
var archivefeeds = "http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/" + list_label[num_label] + parameters; // thay huynh-nhat-ha bằng tên blogspot của bạn
var nouvo = document.createElement('script');
nouvo.setAttribute('type', 'text/javascript');
nouvo.setAttribute('src', archivefeeds);
nouvo.setAttribute('id', 'LABELTEMPORAL' + String(num_label));
document.getElementsByTagName('head')[0].appendChild(nouvo);
pr_flagfirst[num_label] = 1;
}

function getJSONtitle(entry,res) {
var t = entry.title.$t;
if(res) {
t = t.substring(0,res);
}
return t;
}
function getJSONurl(entry) {
var url;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
url = entry.link[k].href;
break;
}
}
return url;
}
function getJSONcontent(entry,res) {
var c = "";
if ("content" in entry) {
c = entry.content.$t;
} else if ("summary" in entry) {
c = entry.summary.$t;
}
if(res) {
c = removeHtmlTag(c,res);
}
return c;
}
function getJSONthumbnail(entry) {
var s, a, b, c, d;
var theimg = "";
s = entry.content.$t;
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!="")) {
theimg = d;
} else {
var cat = entry.category[0].term;
if(cat=="Tên nhãn 1"){theimg = "URL_ảnh đại diện_nhãn1"}
if(cat=="Tên nhãn 2"){theimg = "URL_ảnh đại diện_nhãn2"}
if(cat=="Tên nhãn 3"){theimg = "URL_ảnh đại diện_nhãn3"}
if(cat=="Tên nhãn 4"){theimg = "URL_ảnh đại diện_nhãn4"}
}
return theimg;
}
function removeHtmlTag(strx,chop) {
var r = strx.split("<");
for(var i=0;i<r.length;i++){
if(r[i].indexOf(">")!=-1){
r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
}
}
r = r.join("");
var sss = "", p;
var r2 = r.split(" ");
for(var i=0;i<r2.length;i++){
p = sss + r2[i] + " "
if(p.length>=chop) {break;}
sss = p;
}
sss += "…"
return sss;
}

onload=function() {navi_pagi_label(0,0);navi_pagi_label(1,0);navi_pagi_label(2,0);navi_pagi_label(3,0);}

//]]>
</script>
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Tên nhãn 1</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs0"></div>
<div class="pr_navi_label" id="pr_navi_label0"></div></div>
</li>
<li>
<h2><span>Tên nhãn 2</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs1"></div>
<div class="pr_navi_label" id="pr_navi_label1"></div></div>
</li>
<li>
<h2><span>Tên nhãn 3</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs2"></div>
<div class="pr_navi_label" id="pr_navi_label2"></div></div>
</li>
<li>
<h2><span>Tên nhãn 4</span></h2>
<div class='slide-inner'>
<div class="prs" id="prs3"></div>
<div class="pr_navi_label" id="pr_navi_label3"></div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>

Trong đoạn code trên thì đoạn script chính có sự tương đồng với script dùng trong thủ thuật Tiện ích Bài viết liên quan mới nhất cho nhãn trên sidebar (bạn có thể đọc lại bài viết để tìm hiểu thêm). Ở đây mình gán thêm ảnh dại diện riêng cho từng nhãn. Bạn cần tùy biến những phần được đánh dấu đỏ, lần lượt thay thế các tên nhãn áp dụng Slider.