MY GALLERY

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

Đây là Theme có 1 sidebar hiển thị bên tay phải khi ở trang chủ, khi vào xem bài thì sildebar này sẽ hiển thị bên tay trái bài đăng, các bài đăng trên blog được chia thành các ô nhỏ, có menu ngang nằm phía trên và 3 sidebar ở dưới chân Blog, bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho Blog




THEMES MY GALLERY




Nguồn: TemplateMax
More about →

BLOGSQUARE

Người đăng: yeu mai em

Đây là Theme có 2 sidebar hiển thị bên tay phải (1 lớn và 1 nhỏ) khi ở trang chủ thì hiển thị cả 2 sidebar, khi vào xem bài thì 1 sildebar nhỏ sẽ bị ẩn đi và sidebar còn lại sẽ hiển thị bên tay trái bài đăng, có 2 menu ngang nằm phía trên và 3 sidebar ở dưới chân Blog, bạn bấm xem trước phía dưới, nếu thích thì bấm Download để tải theme này về và cài đặt cho Blog của mình. Các bạn có thể xem bài "THAY ĐỔI GIAO DIỆN CHO BLOGGER" để biết cách cài đặt cho Blog




THEMES BLOGSQUARE




Nguồn: TemplateMax
More about →

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

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

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:

<!-- đếm nhận xét từ Zero -->
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<!-- gắn ID cho từng nhận xét -->
<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:

<!-- thiết lập lớp cho nhận xét -->
<script type='text/javascript'>
counterComments('<data:comment.id/>')
</script>

</div>

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

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

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.
More about →

[ Giới thiệu ] - Cải thiện tốc độ load cho các trang tin tức

Người đăng: yeu mai em

Đa số các blog tin tức (sử dụng blogspot) đều dùng tiện ích recent posts (RP) để hiển thị nội dung trên trang chủ của mình, mà blog tin tức thì tất nhiên sẽ có nhiều chuyên mục, do đó sẽ phải dùng link feed khác nhau để hiển thị, và như thế phần nào ảnh hưởng tới tốc độ load trang.


Hiện tại chúng ta đã quen với việc hiển thị bài viết ở 1 nhãn thì sẽ dùng ngay link feed từ nhãn đó để truy xuất. Đối với 1 blog bình thường thì việc hiển thị 1 hoặc 2 tiện ích RP thì cũng không ảnh hưởng nhiều tới tốc độ load trang. Nhưng còn với blog tin tức thì các tiện ích RP được sử dụng nhiều, và có thể lên con số 10 hoặc hơn. Vì vậy hôm nay mình sẽ giới thiệu cho các bạn cách để cải thiện phần nào tốc độ load trang.

Và cách ở đây mình sử dụng cũng không xa lạ gì, vẫn là dùng tiện ích RP để hiển thị nội dung cho trang tin tức của bạn. Thay vì dùng 5 hoặc 6 tiện ích RP để hiển thị nội dung cho các chuyên mục khác nhau thì nay mình chỉ dùng 1 tiện ích RP để hiển thị cho tất cả.

Ví dụ ta có 4 tiện ích RP và có bố cục như bên dưới. Và bình thường các tiện ích sẽ được load tuần tự từ tiện ích 1 đến tiện ích 4. Như vậy ta sẽ có 4 lần load.


Với 4 lần load tuần tự này ta sẽ có cảm giác blog load chậm. Và tùy theo bố cục các tiện ích của blog được sắp xếp như thế nào thì ta sẽ có cảm giác khác nhau, ví dụ bố cục được sắp xếp theo kiểu cơ bản của blog (theo cột : sidebar1, main, sidebar 2, ...) thì sẽ có cảm giác load chậm hơn so với bố cục z-index (z-index là kiểu sắp xếp bố cục dàn hàng, như chữ Z, load xong hàng 1 xuống hàng 2 load tiếp).

Và với cách của mình thì 4 tiện ích sẽ được load 1 lượt như hình bên dưới :


Thủ thuật chính ở đây là mình dùng link feed của blog để hiển thị bài viết ra nhiều chuyên mục theo từng nhãn. Và tất nhiên sẽ không có chuyện 2 chuyên mục trùng bài viết. Tức là chuyên mục 1 đã có bài viết số 1 thì chuyên mục 2 sẽ không xuất hiện bài viết này nữa, mặc dù bài viết này nằm ở nhiều chuyên mục (bài viết có nhiều nhãn). Do chỉ load 1 link feed nên tốc độ sẽ nhanh hơn so với việc load lần lượt nhiều link feed.

Tuy cách này có thể gôm nhiều tiện ích RP lại để load cùng 1 lúc, nhưng các bạn cũng không nên lạm dụng mà gôm quá nhiều tiệc ích RP để load 1 lúc. Nếu load 10 tiện ích 1 lúc so với 5 tiện ích 1 lúc tất nhiên nó sẽ khác nhau. Do số bài viết được load nhiều hơn. Thế nên ta phải có bố cục hợp lý để chia thành từng nhóm 1 để load các tiện ích 1 lúc.

* Một vài thông tin của thủ thuật:
- Load nhiều tiện ích RP 1 lúc.
- Bố cục hiển thị linh hoạt, và không ảnh hưởng đến tốc độ load. (tức là cho dù bạn xắp xếp nó như thế nào thì nó sẽ vẫn hiển thị 1 lúc)
- Tốc độ load nhanh hơn so với cách thông thường dùng nhiều link feed.
- Không gây lặp bài viết.
- Tuy load chung 1 lúc nhưng các tiện ích RP hoàn toàn có thể có các giao diện khác nhau (kiểu hiển thị, số bài hiển thị ...) mà không nhất thiết phải giống nhau đồng loạt.
- Nếu các nhãn trên blog có tần suất xuất bản đều nhau thì tốc độ load sẽ nhanh hơn. Ví dụ như ở blog mình, bài viết về thủ thuật blog nhiều hơn so với các nhãn khác, vì thế mà sử dụng cách này cũng không tối ưu lắm. Việc này là do thủ thuật mình lọc các bài viết trong feed theo nhãn, nều 1 chuyên mục đã đủ bài hiển thị thì lập tức nó sẽ bỏ qua các bài viết thuộc nhãn này (nếu bài viết có 1 nhãn) và tiếp tục tìm đến bài viết thuộc nhãn khác. Chỉ khi nào số bài viết trong các mục đủ như đã set hoặc tới điểm dừng của vòng lặp thì vòng lặp sẽ dừng lại.

Do hiện tại host của mình có 1 trục trặc nhỏ, nên tạm thời mình chỉ giới thiệu thủ thuật. Còn DEMO và hướng dẫn cụ thể mình sẽ post ở bài viết tiếp theo.
More about →

TIẾT KIỆM KHI IN TRANG WEB

Người đăng: yeu mai em on Chủ Nhật, 2 tháng 10, 2011

Nếu bạn thường xuyên thu thập tin tức hoặc các bài viết hữu ích từ các Website và in ra để xem, bạn sẽ thấy một điều rất rõ là việc in thông thường sẽ gây lãng phí nhiều giấy, mực vì không phải nội dung nào bạn cũng cần xem.
Bài viết dưới đây, giúp bạn có thể bỏ bớt một số phần không cần thiết (quảng cáo, hình ảnh, tiện ích...) để bạn có thể tiết kiệm chi phí in ấn cũng như nội dung trang in sẽ không bị "loãng" đi..

Đây là dịch vụ trực tuyến, bạn không cần phải cài đặt bất kỳ phần mềm nào khác. Để thực hiện, bạn đăng nhập VÀO ĐÂY.
Sau đó, bạn nhập địa chỉ trang mà bạn cần in vào trường Enter a URL và bấm Start.


Khi bạn di chuyển chuột thì sẽ hình thành các vùng giới hạn có viền đỏ, khi bấm chuột vào vùng chọn đó sẽ có thanh công cụ hiện ra bao gồm các thẻ:
Remove: Xoá vùng đang chọn.
Isolate: Chỉ in vùng đó và xoá tất cả.
Widen: Phần được giới hạn sẽ được giãn tối đa theo chiều ngang.
Select More: Mở rộng vùng chọn lên vùng lớn hơn bao phủ vùng đã chọn.
Ngoài ra, bên tay trái có một số công cụ để bạn chỉnh sửa lại các thành phần chứa trong trang Web như: thay đổi Font chữ (Font), cỡ chữ (Text size), thực hiện hoàn tác (Redo), làm lại thao tác đã thực hiện (Undo), in thành phẩm (Print), xuất ra tập tin PDF (Save as...)


More about →

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

Người đăng: yeu mai em

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> <!-- đếm từ Zero -->

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"'>
<!-- không thực thi chức năng này ở các trang đọc bài viết -->
<script type='text/javascript'>
PostsCounter=PostsCounter+1;
counterPosts(&#39;post-<data:post.id/>&#39;);
</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> <!-- đếm từ Zero -->
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>
<!-- không thực thi chức năng này ở các trang đọc bài viết -->
<script type='text/javascript'>
PostsCounter=PostsCounter+1;
counterPosts(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>
</b:loop>
.......
</b:includable>

Lưu Template là hoàn thành.
More about →

TẠO THANH TRƯỢT CHO PHẦN COMMENTS

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

Phần comments là phần nằm phía dưới của mỗi bài trên Blog của bạn, có một số bài sẽ có nhiều người comments để bình luận, để thắc mắc...Vì vậy, nếu có nhiều comments thì phần commets này sẽ dài "lê thê" làm cho Blog bị chiếm nhiều không gian, làm giảm vẻ mỹ quan của blog.
Với một thủ thuật nhỏ đơn giản dưới đây, bạn sẽ có một thanh trượt nằm ở phần bên phải của khung commenst.
Bạn xem hình minh hoạ: (Rê chuột vào ảnh để xem ảnh với kích thước lớn hơn).



Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > Chỉnh sửa HTML, sau đó bấm cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào hộp đó dòng lệnh
#comments-block.
Lúc  này, bạn sẽ thấy trên khung lớn có dòng lệnh tương tự giống như vậy (đối với mỗi giao diện blog sẽ có dòng lệnh hơi khác tí)
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
Bạn chép copy đoạn code này dán vào phía dưới dòng lệnh trên (để trong dấu ngoặc móc):
height: 400px;
width: 480px;

overflow:auto;

Nó sẽ giống như vầy:
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
height: 400px;
width:480px;
overflow:auto;

}
Bạn có thể thay đổi kích thước của khung ở Width (chiều ngang), height (chiều dài) để phù hợp với Blog của mình và bấm Lưu mẫu
Giờ đây, trên blog của bạn sẽ có thanh trượt ở phần comments rất tiện lợi


Nguồn: Phan Dung
More about →