Tùy biến Avatar cho người bình luận trên blogspot

Người đăng: Unknown on Thứ Tư, 5 tháng 1, 2011

Trước đây khi Blogger chưa phát triển tính năng Avatar cho Comment thì việc tạo avatar cho người nhận xét, bình luận trên blogspot là một trong những thủ thuật Blogger rất được quan tâm.

Nhưng ngay cả sau khi Blogger đã có tính năng này rồi thì vẫn còn một số điểm để phát triển thêm. Ví dụ như tạo Avatar riêng cho một người nào đó, mà ngay cả khi người đó viết nhận xét trên blog của bạn trong trường hợp không đăng nhập Blogger mà chỉ đăng nhận xét dưới dạng Tên/URL thì vẫn hiển thị được Avatar của người đó.

Để thực hiện điều 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 đoạn code sau đây.

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Thay nó bằng đoạn code như bên dưới.

<b:if cond='data:blog.enabledCommentProfileImages'>
<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.author == &quot;Tên Người Bình Luận&quot;'>
<span class='avatar-image-container'><img src='URL_Avatar_Người Bình Luận'/></span>
<b:else/>
<data:comment.authorAvatarImage/>
</b:if>
<b:else/>
<span class='avatar-image-container'><img src='URL_Avatar_Nặc danh'/></span>
</b:if>
</b:if>

Trong đoạn code trên, bạn cần thay URL Avatar tương ứng với tên của người bình luận nào đó và URL Avatar của Nặc danh (Anonymous).

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

#comments-block .avatar-image-container {
margin-right:5px;
}

#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}

Nếu bạn muốn tạo Avatar riêng cho các trường hợp khác (các trường hợp người nhận xét không đăng nhập Blogger, không phải là Anonymous và không được chọn đặt Avatar riêng ở bước 1), thì thêm đoạn code sau vào phần CSS ở trên.

#comments-block .avatar-image-container.avatar-stock {
background:url(URL_Avatar_Các trường hợp khác) transparent no-repeat 50% 50%;}
More about

TẠO BẢN GHOST "SỐNG" CHO WIN XP

Người đăng: Unknown

Bạn đã từng yên tâm vì máy tính của mình đã có bản Ghost, không ngại khi xảy ra sự cố. Tuy nhiên trong một số trường hợp khẩn cấp (chẳng hạn đang thuyết trình với đối tác quan trọng) mà máy tính bỗng dưng gặp sự cố, việc bung file Ghost xem ra không phải là phương pháp tối ưu vì thời gian có thể kéo dài vài chục phút. Vậy thay vì để bản Ghost nằm "chết" im trong máy, bạn có thể làm cho nó luôn "sống" và sẳn sàng hoạt động ngay khi bạn cần bằng cách khởi động lại máy và chọn menu khởi động thứ hai lập tức sự cố sẽ được giải quyết.
Về nguyên tắc, cách này giống như việc bạn cài thêm một hệ điều hành Windows thứ hai cho máy tính, khi Windows đang dùng bị lỗi, bạn sẽ vào Windows thứ hai làm việc bình thường. Tuy nhiên, việc cài đặt mới một Windows khá phức tạp và mất nhiều thời gian. Với cách làm dưới đây bạn sẽ tận dụng được hệ điều hành đang dùng để nhân bản ra một hệ điều hành cùng tồn tại song song qua việc bung file Ghost.
* Bước 1: Nếu bạn chưa có file Ghost thì đầu tiên bạn phải thực hiện ghost lại máy.
* Bước 2: Tạo phân vùng mới.
* Bước 3: Bung file Ghost vào phân vùng mới.
Ba bước này bạn có thể VÀO ĐÂY để xem cách tạo file Ghost phân vùng ổ đĩa và bung file ghost bằng video.
Ngoài ra cách 1 và cách 3 các bạn có thể dùng phần mềm OneKey Ghost để tạo và bung file Ghost (xem hướng dẫn TẠI ĐÂY).
* Bước 4: Thiết lập dualboot để khởi động. Bạn bấm phải vào My Computer chọn Properties rồi chọn thẻ Advanced


Trong phần Startup and Recovery, chọn Settings > Edit để chạy tập tin boot.ini. 


Bạn sẽ thấy tập tin có dạng sau:
[boot loader]
timeout=30
default=multi(0)disk(0)rdisk(0)partition(1)\WINDOWS
[operating systems]
multi(0)disk(0)rdisk(0)partition(1)\WINDOWS="Microsoft Windows XP Professional" /noexecute=optin /fastdetect

Sau đó bạn copy và paste thêm một dòng cuối cùng vào bên dưới, và sửa partition (1) ở dòng dưới thành (2) hoặc (3)...tùy vào thứ tự phân vùng mà bạn mới bung file ghost. Lúc đó tập tin sẽ có dạng sau:
[boot loader]
timeout=30
default=multi(0)disk(0)rdisk(0)partition(1)\WINDOWS
[operating systems]
multi(0)disk(0)rdisk(0)partition(1)\WINDOWS="Microsoft Windows XP Professional" /noexecute=optin /fastdetect
multi(0)disk(0)rdisk(0)partition(3)\WINDOWS="Microsoft Windows XP Professional" /noexecute=optin /fastdetect

Để tránh nhầm lẫn giữa hai menu trong dualboot bạn nên sửa dòng trên "WindowsXP professional" thành "Microsoft WindowsXP Professional 1" và dòng dưới thành "Microsoft WindowsXP Professional 2" hoặc bất cứ tên nào cũng được, sau đó Save lại. Với cách làm này bạn hoàn toàn có thể tạo cho mình menu dualboot "độc quyền" không đụng hàng.
Bây giờ bạn khởi động lại máy thì sẽ thấy 2 chọn lựa để khởi động vào hai phân vùng khác nhau.
Nếu không chọn lựa, mặc định 30 giây sau máy sẽ khởi động Windows trên phân vùng thứ nhất. Bạn nên nhớ, tuy là cặp "song sinh" giống nhau như hai giọt nước nhưng đây là 2 hệ điều hành hoàn toàn độc lập. Một khi hệ điều hành trên phân vùng này gặp sự cố bạn chỉ cần khởi động lại và hệ điều hành trên phân vùng thứ 2 lập tức bạn sẽ được trở về "ngôi nhà cũ" thân quen và làm việc bình thường. Cẩn thận hơn, để tránh lưu hoặc xóa nhầm dữ liệu vào hai phân vùng khởi động, bạn nên khởi động vào hệ điều hành này và thiết lập chế độ ẩn cho phân vùng kia. Để thiết lập chế độ ẩn phân vùng, bạn bấm phải vào My Computer chọn Manage và bấm chọn Disk Management. Sau đó bấm phải vào phân vùng muốn thiết lập chế độ ẩn và chọn Change Drive Letter and Parths...


Bấm Remove và chọn Yes.


Bây giờ thì bạn có thể hoàn toàn yên tâm với hệ điều hành "2 trong 1".


More about

Tạo nút Reply cho nhận xét Blogger

Người đăng: Unknown on Thứ Hai, 3 tháng 1, 2011

Một đặc tính nổi bật mà hầu hết các hệ thống nhận xét dạng plugin như Disqus là nút Reply (Trả lời) ngay sau mỗi nhận xét. Về mặc định thì hệ thống nhận xét của Blogger không có đặc tính này. Tuy nhiên bạn cũng có thể sử dụng một thủ thuật để tạo nút Trả lời cho mỗi nhận xét Blogger.

Bạn có thể xem Demo ở các nhận xét trên blog này. Để làm được như vậy, bạn hãy thực hiện theo hướng dẫn sau đây.

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

Tìm dòng <data:commentPostedByMsg/> và đặt sau nó với đoạn code bên dưới.

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=750,height=450&quot;); return false;'>[ Trả lời ]</a></span>

Trong đoạn code trên, bạn cần thay blogID cho blogspot của bạn. BlogID là chuỗi số nằm trên thanh địa chỉ của công cụ trình duyệt khi ở chế độ Edit HTML trong Template.
More about

Đặt nút Share phía dưới tiêu đề bài viết

Người đăng: Unknown

Nút Share rất hữu ích cho blogspot khi nó tích hợp nhiều trang mạng xã hội với liên kết chia sẻ bài viết góp phần phổ biến blog của bạn ra cộng đồng. Thông thường các blogger thích đặt nút Share ngay dưới tiêu đề bài viết, có thể ở vị trí bên trái hoặc dạt sang bên phải.




Để đặt nút Share như vậy, bạn hãy thực hiện như sau.

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

Tìm dòng <div class='post-header'> và đặt trước nó với đoạn code sau đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AddThis Button BEGIN -->
<div style="float:right" class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4d2267003d6799cf" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf"></script>
<!-- AddThis Button END -->
</b:if>

Nếu muốn nút Share nằm ở bên trái thì đổi float:right thành float:left.

Nếu muốn nút Share gọn hơn thì bỏ phần được đánh dấu màu đỏ trong đoạn code nói trên.
More about

Kiểu phân trang Pager 2.0 cho blogspot

Người đăng: Unknown

Tính đến thời điểm này thì đã có khá nhiều kiểu phân trang đẹp cho blogspot mà tôi đã giới thiệu (bạn có thể dùng từ khóa “phan trang” để tìm trên blog này). Mỗi kiểu phân trang đều có ưu điểm và vẻ đẹp riêng của nó. Mỗi blogger đều có sở thích riêng và tất nhiên sẽ lựa chọn kiểu phân trang riêng để cài đặt cho blogspot của mình.

Còn nhớ vào năm 2008 vào cái thuở tôi mới chân ướt chân ráo đến với Blogger, lúc đó một chữ bẻ đôi về code tôi cũng chả biết là gì nữa, thì tôi đã nghe nói về một kiểu phân trang khá thịnh hành thuở ấy gọi là Pager 2.0 của bạn Anh Võ tại blog www.vietwebguide.com. Rất tiếc gần đây Anh Võ đã rửa tay gác kiếm và mai danh ẩn tích, hoặc vì một lý do nào đó cũng không biết nữa. Cũng may là cái script phân trang ấy vẫn được lưu giữ đâu đó trên cộng đồng Blogger.

Hôm nay tôi xin mạn phép Anh Võ giới thiệu lại kiểu phân trang Pager 2.0 và có một số bổ sung để mọi người cùng chia sẻ và lưu truyền cho mai sau.

Xem Demo.

Nếu bạn đã lỡ (nhỡ) xài kiểu phân trang khác mà lại kết kiểu phân trang này thì phải xem lại cách cài đặt kiểu phân trang đó rồi làm ngược lại các bước để tháo nó ra khỏi Template rồi bắt đầu cài đặt kiểu phân trang này, theo hướng dẫn sau đây.

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

Tìm dòng <b:include name='nextprev'/> rồi thay nó bằng đoạn code dưới đây.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:16x;
color:#0033FF;
font-weight:bold;
background:#CCC;
border:1px solid #bbb;
padding:0px 4px;
}
</style>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/>&amp;nbsp;<span id='vwg-pager-prev'/>&amp;nbsp;<input name='showingpage' onfocus='this.select()' size='4' title='Nhập số trang bạn muốn đến' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/>&amp;nbsp;<span id='vwg-pager-last'/>
</form>
</div>
<script type='text/javascript'>
var blogID = &quot;5730565790137789925&quot;;
var home_page = &quot;http://huynh-nhat-ha.blogspot.com/&quot;;
var pager_max_main = 7;

var pager_first_text = &quot;First&quot;; // Bạn có thể đổi thành Đầu
var pager_last_text = &quot;Last&quot;; // Bạn có thể đổi thành Cuối
var pager_prev_text = &quot;Prev&quot;; // Bạn có thể đổi thành Trước
var pager_next_text = &quot;Next&quot;; // Bạn có thể đổi thành Sau
</script>
<script src='http://hacodeproject.googlecode.com/files/blogger_pager_script_v20.js' type='text/javascript'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

Trong đoạn code trên, bạn cần thay blogID của bạn bằng chuỗi số trên thanh địa chỉ của công cụ trình duyệt ở chế độ Edit HTML của Template; thay địa chỉ home page cho blog của bạn; thay con số ở dòng var pager_max_main = 7; đồng nhất với số bài đăng trên trang chính khi định cấu hình bài đăng cho blog (Blog Posts).

Lưu Template là OK rồi đấy!
More about

ONEKEY GHOST 6.3 - GHOST TỰ ĐỘNG

Người đăng: Unknown on Thứ Bảy, 1 tháng 1, 2011

Để tạo và bung file Ghost, các bạn phải dùng 1 trong các phương pháp sau:
1/ Phương pháp thông dụng nhất là dùng đĩa Hiren's boot CD, yêu cầu máy vi tính phải có ổ đĩa CD/DVD.
2/ Nếu máy vi tính không có ổ đĩa CD/DVD, bạn cần phải tích hợp bản Hiren's boot vào USB (xem hướng dẫn TẠI ĐÂY) yêu cầu máy vi tính phải có hỗ trợ tính năng khởi động từ USB.
3/ Nếu máy vi tính của bạn không có ổ đĩa CD/DVD và máy cũng không hỗ trợ tính năng khởi động từ USB thì bạn phải tích hợp Hiren's boot lên ổ cứng (xem hướng dẫn TẠI ĐÂY).
Cùng với những phương pháp kể trên và để không bị mất dữ liệu khi bung Ghost các bạn cần phải có kiến thức cơ bản về cách tạo và bung file Ghost (trong môi trường DOS các ký tự ổ đĩa sẽ không giống như ký tự ổ đĩa trong Windows vì vậy các bạn dễ bị chọn nhầm khi bung file Ghost và hậu quả là sẽ mất hết dữ liệu).
Ngoài 3 phương pháp kể trên, còn 1 phương pháp rất hay, rất đơn giản, các bạn không có kinh nghiệm cũng có thể sử dụng rất dễ dàng là dùng phần mềm OneKey Ghost.
OneKey Ghost có dung lượng nhỏ gọn 2.87MB bạn có thể download TẠI ĐÂY. Đây là một công cụ Ghost tự động khá hay, bạn chỉ cần chọn phân vùng sao lưu và phục hồi. Mọi việc còn lại được thực hiện hoàn toàn tự động. Khi tải về bạn nhấn đúp chuột tập tin OneKeyGhost3.2.exe để khởi động chương trình (không cần cài đặt). Giao diện chương trình rất đơn giản chỉ có 2 nút Backup Restore. Tùy theo nhu cầu mà bạn chọn chức năng thích hợp.
Nếu muốn tạo file Ghost, bạn đánh dấu chọn mục Backup, sau đó bạn nhấn Save để tìm nơi lưu file Ghost khi tạo xong và chọn phân vùng muốn sao lưu bên dưới (thường là phân vùng C hệ thống) rồi bấm chọn Yes, một bảng thông báo nhỏ hiện lên bạn bấm Yes, máy sẽ tự động Restart lại bắt đầu tạo file Ghost cho bạn.
Nếu muốn bung file Ghost, bạn đánh dấu chọn mục Restore, sau đó nhấn Open để tìm đến file Ghost mà bạn đã tạo và chọn phân vùng cần bung file Ghost rồi bấm Yes. Chương trình sẽ tự động bung file Ghost cho bạn. Quá trình bung file Ghost sẽ tự động hoàn toàn giống như tạo file Ghost, bạn không cần phải làm gì cả chỉ ngồi "uống nước" và đợi chờ cho chương trình làm việc (theo thực nghiệm tôi tạo file Ghost có dung lượng khoảng 4GB thì mất khoảng gần 6 phút).




More about

Tiện ích Bài viết mới nhất với hiệu ứng accordion

Người đăng: Unknown

Tiện ích Bài viết mới nhất rất cần thiết cho blogspot và tiện ích này cũng đã có nhiều biến thể với nhiều hiệu ứng. Ví dụ như tiện ích Bài viết mới nhất với hiệu ứng Spy.

Chúng ta đã biết hiệu ứng đàn xếp rất hữu ích trong thiết kế website qua bài viết này. Tôi có ý tưởng kết hợp tiện ích Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp để cho ra tiện ích gọi là Bài viết mới nhất có ảnh đại diện với hiệu ứng đàn xếp (Recent Posts with Thumbnails and Accordion Effect). :17)

Xem Demo.

Nếu bạn muốn cài đặt tiện ích này cho blogspot của mình thì 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 sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/jquery4accordion.js' type='text/javascript'/>
<style type='text/css'>
.accordion{width:300px;border-bottom:solid 1px #c4c4c4}
.accordion h3{background:#e9e7e7 url(http://bit.ly/fCBbB0) no-repeat right -51px;padding:7px 15px;margin:0;font:bold 13px Arial,Tahoma,sans-serif;border:solid 1px #c4c4c4;border-bottom:none;cursor:pointer;color:blue;text-align:justify}
.accordion h3:hover{background-color:#e3e2e2}
.accordion h3.active{background-position:right 5px}
.accordion p{background:#f7f7f7;margin:0;line-height:1.5em;padding:10px 15px 20px;border-left:solid 1px #c4c4c4;border-right:solid 1px #c4c4c4;text-align:justify}
</style>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();

$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});

});
</script>

Lưu Template.

Trong phần CSS ở trên, chú ý tham số width:300px, bạn cần điều chỉnh chiều rộng tương đương với chiều rộng tại vị trí đặt tiện ích.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt toàn bộ đoạn code dưới đây vào phần Nội dung của tiện ích.

<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://bit.ly/hGWr7r";
showRandomImg = true;

jimgwidth = 50;
jimgheight = 50;
jfntsize = 11;
jacolor = "#000";
jasize = "2";
jaBold = true;

jtext = "";
jshowPostDate = false;

sumtitle = 28;
jsummaryPost = 90;
numposts = 7;
label = "Thủ thuật Blogger";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>

<div class="accordion">
<script src="http://hacodeproject.googlecode.com/files/accordion-recentposts4allposts.js" type="text/javascript"></script>
</div>

Nếu bạn sử dụng tiện ích Bài viết mới nhất với hiệu ứng đàn xếp cho một nhãn nào đó thì thay file js được đánh dấu màu đỏ thành như sau:

http://hacodeproject.googlecode.com/files/accordion-recentposts4label.js

Và đặt tên nhãn ở dòng label = "Thủ thuật Blogger";

Bạn cần phải thay huynh-nhat-ha thành tên blogspot của bạn nữa nhé. :37)
More about