Hiển thị thời gian ước tính để đọc bài viết

Người đăng: buonkhongem on Thứ Năm, 30 tháng 6, 2011

Tính được thời gian ước tính để đọc một bài viết là một cách thú vị để cho người đọc phần nào hiểu sơ qua về độ dài của bài viết mà không cần phải đọc lướt qua. Người ta ước tính rằng con người chúng ta trung bình cứ mỗi một phút có thể đọc được 300 từ và cứ mỗi 2 giây là có thể xem một hình ảnh. Như vậy dựa vào căn cứ trung bình này, bằng một thuật toán tính đến số từ, các khoảng trắng và hình ảnh trong một bài viết, chúng ta có thể ước tính được thời gian cần để đọc toàn bộ một bài viết.

Qua bài viết này, nhờ sử dụng javascript để tạo những thuật toán cơ bản, mình sẽ giúp bạn hiển thị được thời gian ước tính để đọc một bài viết dưới mỗi tiêu đề bài viết để người đọc bớt phần mệt nhọc đoán chừng độ dài bài viết của bạn.

Để làm được như vậ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>.

<script type='text/javascript'>
//<![CDATA[
// Estimate-time-to-read-blogspot-post Script by Huynh Nhat Ha
var wordsperminute = 300;
var imagesperminute = 30;

function timeperpostreading(id) {
var postcontent = document.getElementById(id);

var img = postcontent.getElementsByTagName("img");
var numimg = img.length;

var strx = postcontent.innerHTML;
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("");
}

var blankfirst = /^ /;
var blankfinal = / $/;
var blanktotal = /[ ]+/g;
strx = strx.replace(blanktotal," ");
strx = strx.replace(blankfirst,"");
strx = strx.replace(blankfinal,"");

var words = strx.split(" ");
var numwords = words.length;

var minutes = parseInt((numwords/wordsperminute)+(numimg/imagesperminute));
var seconds = parseInt((((numwords/wordsperminute)+(numimg/imagesperminute))-minutes)*60);
minutes=("0" + minutes).slice (-1);
seconds=("0" + seconds).slice (-2);

var forreturn = "Thời gian ước tính để đọc bài viết này: "+minutes+":"+seconds;
document.getElementById("timeperpost").innerHTML = forreturn;
}
//]]>
</script>

Bước 2. Tìm đến dòng <div class='post-header-line-1'/> và đặt trước nó bằng dòng code bên dưới.

<p id='timeperpost'/>

Tiếp tục tìm dòng <data:post.body/> (hoặc <p><data:post.body/></p>) rồi thay thế nó bằng đoạn code bên dưới.

<div expr:id='data:post.id'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
timeperpostreading(&quot;<data:post.id/>&quot;);
</script>

Lưu Template là OK. Hy vọng thủ thuật nhỏ này sẽ tạo thêm nét độc đáo cho blogspot của bạn.
More about

THAY ĐỔI BIỂU TƯỢNG Ổ ĐĨA, THƯ MỤC

Người đăng: buonkhongem

Bạn có thể thay đổi biểu tượng các ổ đĩa và thư mục trong Windows chỉ trong chớp mắt với phần mềm VNWINDOWSTYLE. So với các phần mềm cùng chức năng, VNWINDOWSTYLE khá dễ dùng với giao diện hoàn toàn bằng tiếng Việt, có dung lượng khoảng 5.25MB, bạn tải TẠI ĐÂY.
Sau khi tải về và cài đặt, bạn bấm biểu tượng của chương trình để bắt đầu sử dụng. Phần mềm hỗ trợ 3 chức năng cơ bản: Thay đổi biểu tượng ổ đỉa, biểu tượng thư mục và ảnh nền Log-on khi đăng nhập Windows.
* Ổ đĩa: Cho phép bạn thay đổi biểu tượng ổ đĩa nhanh chóng, bạn có thể dùng bất kỳ biểu tượng nào ở định dạng .icon và có kích thước khoảng 32x32px là được. Muốn thay đổi biểu tượng đầu tiên bạn bấm chọn Ổ đĩa, sau đó bấm vào ổ đĩa mà mình muốn thay đổi biểu tượng, kế tiếp bạn chọn Icon để thay thế bằng cách bấm vào dấu 3 chấm (...) trên thanh Tìm Icon rồi duyệt đến Icon trong máy tính để thay thế, sau khi chọn xong bạn bấm vào hình bàn chân ở phía dưới giao diện để chương trình thực thi ngay lập tức. (nếu không có sẳn file Icon trên máy tính bạn có thể tải về các mẫu Icon bằng cách bấm vào hình kính lúp ở phía trên để tải Icon về).


* Thư mục: Bạn cũng làm tương tự như trên. Ở đây, bạn có thể tuỳ chọn thay đổi từng biểu tượng mỗi thư mục với mỗi Icon khác nhau hoặc áp dụng cùng lúc một biểu tượng Icon cho tất cả các thư mục bằng cách bấm chọn mục Tất cả các thư mục rồi tìm đến biểu tượng Icon mà mình muốn đổi, sau đó bấm vào hình bàn chân phía dưới để áp dụng.

* Thay đổi hình nền Log-on trong Windows: Đầu tiên, bạn kích hoạt tuỳ chọn sang Log-on, nhấn nút chọn ảnh để chọn ảnh thay thế.


Sau đó, nhấn nút Thực hiệnLog-off lại hệ thống, bạn sẽ có ngay giao diện đăng nhập mới cho Windows.
More about

FLASH ĐẸP CHO BLOG (phần 1)

Người đăng: buonkhongem on Thứ Tư, 29 tháng 6, 2011

Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần copy và thêm tiện ích HTML/Javacrip rồi dán vào nơi mà bạn muốn. (Bạn có thể thay đổi kích thước ở mục height: chiều cao và width: chiều rộng để cho thích hợp với blog của mình).
Vì files flash nhiều sẽ làm cho Blog load chậm, do đó mỗi bài tôi chỉ giới thiệu 10 files (chia thành nhiều bài), mong các bạn thông cảm.

Mẫu 1:





Mẫu 2:







Mẫu 3:






Mẫu 4:






Mẫu 5:





Mẫu 6:






Mẫu 7:






Mẫu 8:





Mẫu 9:





Mẫu 10:





Xem tiếp phần 2
More about

TRÌNH DIỄN BÀI ĐĂNG MỚI NHẤT

Người đăng: buonkhongem

Có nhiều cách để các bạn giới thiệu đến mọi người các bài đăng mới nhất trên Blog của mình. Tôi xin chia sẻ đến với các bạn một trong những tiện ích giới thiệu bài đăng mới nhất được tự động trình diễn trông khá đẹp và tự động cập nhật khi bạn đăng bài mới
Mời bạn xem thử tiện ích phía dưới




Xem thử

Đầu tiên, bạn đăng nhập vào blog > chọn Thiết kế > chọn chỉnh sửa HTML, sau đó bấm đồng thời 2 phím Ctrl+F để mở hộp tìm kiếm và gõ vào dòng ]]></b:skin> 


Sau đó, dán đoạn code phía dưới vào trước dòng lệnh ]]></b:skin> sau đó bấm Lưu mẫu.

.mod{
background:#eee; /*màu nền của tiện ích*/
border:3px solid #6D7B8D; /*đường viền của tiện ích*/
margin-bottom:0px;
width:650px; /*độ rộng của tiện ích*/
padding:0px;}
.glv{height:330px; /*chiều cao của tiện ích*/
overflow:hidden;}
.bd{position:relative;padding:4px 4px 4px 6px;}
.gl2-ct .ct{margin-left:0px;position:relative;}

.vpv{padding:0px;width:316px; /*độ rộng cảu phần bên trái của tiện ích*/
display:none;
position:absolute;
color:#000;
border-right:1px solid #5C5858;
}
.gl-title a {color:#0000ff; /*màu text của tiêu đề bài viết bên trái*/
font-size:13px;
font-weight:bold;}
.gl-title a:hover {color:#ff0033;}
.glv .on{display:block;}
.vimg{width:305px; /*độ rộng của ảnh bên trái*/
height:200px; /*chiều cao của ảnh bên trái*/
border:1px solid #fff;padding:2px;}
.glv ul.vpv-ft li{
list-style-type:none;}
.vpv-ft{
width:40%; /*độ rộng phần bên phải*/
position:absolute;
top:0px;
right:0px;
margin-top:5px;
text-align:left;}
.vpv-ft a{
color:#000099; /*màu tiêu đề bên phải*/
font-size:11px;
font-family:arial;
text-decoration: none;}
.vpv-ft a:hover{color:#ff0033;}
.vpv-ft li{
list-style-type:none;
min-height:40px;
cursor:pointer;
border-bottom:1px solid #5C5858;
position:relative;
text-align:left;}

.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:1px solid #5C5858;
padding-bottom:5px;}
.vpv-ft li.on{
background:#AFC7C7;
}

.vpv-ft img{
float:left;
width:34px; /*độ rộng của ảnh bên phải*/
height:30px; /*chiều cao của ảnh bên phải*/
margin:3px 4px 0px 2px;
padding:0px;}
.vpv-ft a{font-family:verdana;}
.glv .vpv-ft .on .imgpointer{display:block;}
.glv .vpv-ft .imgpointer{
display:none;
height:14px;
width:6px;
position:absolute;
left:-10px;
top:7px;}

Sau khi lưu xong, bạn chọn thiết kế > Chọn thêm tiện ích > Thêm HTML/Javacrip rồi dán code phía dưới vào

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = false;

fntsize = 12;
acolor = "";
aBold = false;


text = "comments";
showPostDate = true;

summaryPost = 150; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 12;
summaryColor = "";

numposts =6;
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "http://dunghennessy.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/

</script>
<div id="gl2" class="mod glv"><div class="bd"><div id="gl2-vd"></div><div class="gl2-ct"><div id="gl2-ct1" class="ct on">
<script src="http://dl.dropbox.com/u/66348944/ya_glv_post.js" type="text/javascript">
</script></div>
<script src="http://dl.dropbox.com/u/66348944/ya_ct_post.js" type="text/javascript">
</script></div>
</div>
</div>

<script src="http://dl.dropbox.com/u/66348944/ya_jquery_03.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery_02.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery_01.js" type="text/javascript">
</script><script type="text/javascript">
(function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();
(function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){
},500);});})();
</script>

Bạn thay đổi địa chỉ blog của bạn vào và bấm lưu lại là xong.
Ở code trên thì tiện ích này sẽ hiển thị tất cả các bài đăng trên blog của bạn. Nếu bạn muốn tiện ích chỉ hiển thị các bài đăng ở một nhãn nhất định thì bạn cần phải thay 2 đoạn code (màu vàng)
<script src="http://dl.dropbox.com/u/66348944/ya_glv_post.js" type="text/javascript"> bằng đoạn code sau: <script src="https://dl.dropbox.com/u/66348944/ya_glv_label.js" type="text/javascript">
Và:
<script src="http://dl.dropbox.com/u/66348944/ya_ct_post.js" type="text/javascript"> bằng đoạn code sau: <script src="https://dl.dropbox.com/u/66348944/ya_ct_label.js" type="text/javascript">
Chúc các bạn vui
More about

Cài đặt plugin Lightwindow cho blogspot

Người đăng: buonkhongem on Thứ Ba, 28 tháng 6, 2011

Hẳn bạn từng nhìn thấy hiệu ứng phóng đại hình ảnh sau khi được click bằng cách sử dụng plugin Lightbox. Có một plugin khác có thể tạo hiệu ứng tương tự, ngoài ra có thể vận dụng cho các liên kết văn bản (Lightbox không có chức năng này), đó là Lightwindow. Lưu ý Lightwindow có sử dụng thư viện Scriptaculous nên sẽ gặp xung đột với thư viện jQuery. Nếu bạn vốn sùng jQuery thì k nên áp dụng plugin này. Nếu bạn thích dùng plugin này thì có thể áp dụng bởi vì sau này mình sẽ giới thiệu nhiều ứng dụng rất độc đáo từ Lightwindow cho blogspot.

Demo.

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

Bước 1. Đăng nhập Blogger >> Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js'/>
<script src='/lightwindow.js' type='text/javascript'/>
<style type='text/css'>
#lightwindow_overlay {display: none; visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 500;}
#lightwindow {display: none; visibility: hidden; position: absolute; z-index: 999; line-height: 0px;}
#lightwindow_container {display: none; visibility: hidden; position: absolute; padding: 0; margin: 0;}
* html #lightwindow_container {overflow: hidden;}
#lightwindow_contents, #lightwindow_loading {-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 0 40px #DDD inset;-webkit-box-shadow:0 0 40px #DDD inset;box-shadow:0 0 40px #DDD inset;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=&#39;#FF000000&#39;, EndColorStr=&#39;#FF333333&#39;);}
#lightwindow_contents {background-color:transparent;overflow:hidden;padding:15px;position:relative;z-index:0;}
#lightwindow iframe {background-color:#EEE;}
#lightwindow_loading {background-color:#333;height:100%;left:0;position:absolute;top:0;width:100%;z-index:9999;}
#lightwindow_loading img {float:left;margin:30px 0 0 50px;}
#lightwindow_loading span {color:#DDD;float:left;font-size:14px;margin:42px 0 0 5px;}
#lightwindow_loading span a {color:#FFF;cursor:pointer;}
#lightwindow_loading_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation {position: absolute; top: 0px; left: 0px; display: none;}
#lightwindow_navigation_shim {display: none; left: 0px; position: absolute; top: 0px; width: 100%; height: 100%;}
#lightwindow_navigation a, #lightwindow_navigation a:link, #lightwindow_navigation a:visited, #lightwindow_navigation a:hover, #lightwindow_navigation a:active {}
#lightwindow_previous, #lightwindow_next {width: 49%; height: 100%; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUeKYoec2ljDr7G1YeAtk26XiTyYN6hbCZo_WgxslLskFR2VsfqO63uFs5Tk96LmgvfAL2T8S6Ba9pbHF1RhZmD1Rl_mkoNnWXgyKUfswJoBcgIPewiGNTsM-V9G8afNv8_BhxqEMhqw/s0/blank.gif) no-repeat; display: block;}
#lightwindow_previous {float: left; left: 0px;}
#lightwindow_next {float: right; right: 0px;}
#lightwindow_previous:hover, #lightwindow_previous:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFsypQb0YRZ7UY1QIxZYdLVC8ZREX84CkrgPvZQRS0HGOpmoYeEtIrqeoBA_GeOsdwOE4kIHHQFnQrWVga0_4jX41Mw3Pn1EOSrsK8-4nFmWR1qcoHZGiP4r6qfbYy6Fd5qBQbbOlB17o/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VzFx5vBHmLQr6s68YNMQnkijFhf0C8-YMmFC8Ce9mDWiohctaXBPMB2HpC2t3AYdkicI_D43goXljeMiEIvnUmotW2w2i1y39mb3HfxnTNxb8RohArwR1dQq7I9HSt5j8Jul1xHgIbA/s0/LWicoright.png) no-repeat right 50%;}
#lightwindow_previous_title, #lightwindow_next_title {display: none;}
#lightwindow_galleries {display:none !important;}
#lightwindow_data {position: absolute;}
#lightwindow_data_slide {display:none !important;}
#lightwindow_title_bar {height: 25px; overflow: hidden;}
#lightwindow_title_bar_title {color:#DDD;float:left;font-size:14px;line-height:25px;margin-left:20px;text-align:left;}
a#lightwindow_title_bar_close_link, a#lightwindow_title_bar_close_link:link, a#lightwindow_title_bar_close_link:visited {-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:0 0 17px #FFF inset;-webkit-box-shadow:0 0 17px #FFF inset;box-shadow:0 0 17px #FFF inset;background-color:#000;color:#AAA;cursor:pointer;display:block;float:right;font-family:Verdana;font-weight:bold;height:22px;line-height:22px;padding:0 30px;text-align:right;text-transform:lowercase;}
a#lightwindow_title_bar_close_link:hover {color:#FFF;background-color:#222}
#lightwindow p {color: #000; padding-right: 10px;}
a.lightwindow {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgd1rNmuxi722dOqgwdzamvHkAyJ92FxG9BX6fUONb5WvucqUupoiIZiRwyLRSK0KDyvtznN2NLh9fltnULghaUKBATXSmbqtMilBDt7y5soTYy4Vza3jqsjMZeGzuS7oeO3Z-mdQuEw/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgd1rNmuxi722dOqgwdzamvHkAyJ92FxG9BX6fUONb5WvucqUupoiIZiRwyLRSK0KDyvtznN2NLh9fltnULghaUKBATXSmbqtMilBDt7y5soTYy4Vza3jqsjMZeGzuS7oeO3Z-mdQuEw/s0/magplus.gif), pointer !important;}
</style>

Bạn nên tải về file js lighwindow.js sau đó upload lên host hoặc lên googlecode để sử dụng cho blogspot của bạn.

Lưu Template.

Bước 2. Thiết lập cấu trúc HTML cho các liên kết như sau:

<a class='lightwindow' href='#' params='lightwindow_width=600,lightwindow_height=600,lightwindow_loading_animation=true' rel='nofollow' title='Title Text'>Text Link</a>

Chú ý điều chỉnh width (600) và height (600) tương ứng với chiều rộng và chiều cao của cửa sổ hiệu ứng sao cho tương thích với từng trường hợp áp dụng.

Để áp dụng plugin này cho hình ảnh, bạn có thể sử dụng cấu trúc HTML như sau:

<a class="lightwindow" href="URL_hình ảnh"><img src="URL_hình ảnh" width="350px" height="250px"/></a>
More about

FLASH ĐẸP CHO BLOG (phần 2)

Người đăng: buonkhongem

Bài trước tôi đã giới thiệu với các bạn các files flash đẹp cho blog (phần 1), nay tôi post thêm phần 2, cũng giống phần trước, ứng với mỗi file flash là code phía dưới bạn chỉ cần copy và thêm tiện ích HTML/Javacript rồi dán nó vào bấm Lưu và di chuyển đến chỗ nào mình thích






Mẫu 1:




Mẫu 2:





Mẫu 3:





Mẫu 4:





Mẫu 5:







Mẫu 6:





Mẫu 7:





Mẫu 8:





Mẫu 9:






Mẫu 10:






More about

Bài viết mới nhất cho nhãn không dùng Javascript

Người đăng: buonkhongem on Thứ Hai, 27 tháng 6, 2011

Dạo này do bận viết bài phân tích tiền tệ nên mình không còn nhiều thời gian dành cho Blogspot. Tuy nhiên niềm đam mê lĩnh vực này cứ mãi thôi thúc mình cố gắng đóng góp chút gì đó cho cộng đồng. Và mình quyết định trở lại để cùng chia sẻ những thủ thuật về Blogspot với những người bạn thân mến trong cộng đồng Blogger Việt. Để kỷ niệm ngày trở lại, mình xin chia sẻ một thủ thuật, tuy không mới song cũng không cũ, đó là tiện ích Bài viết mới nhất cho nhãn không dùng Javascript.

Thực ra, tiện ích này được áp dụng từ thủ thuật Tiện ích Bài viết mới nhất không dùng Javascript áp dụng cho toàn blogspot mà mình đã vận dụng trước đây từ ý tưởng sử dụng tiện ích BlogList để tạo tiện ích bài viết mới nhất có ảnh đại diện.

Bạn có thể xem Demo tại trang chủ của blog này. Để tạo tiện ích này bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Page Elements >> trên sidebar, nhấn Add a Gadget chọn Blog List (Danh sách Blog).

Tại mục Title, bạn hãy đặt theo tên nhãn cần áp dụng tiện ích.

Tick chọn vào các mục Title of most recent item, Snippet of most recent item, Thumbnail of most recent item.

Nhấn ADD TO LIST.

Sau đó dán vào mục Add by URL với địa chỉ sau đây:

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

Rồi tiếp tục Add by URL thứ 2

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=2

rồi thứ 3

http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn1?start-index=1

cứ thế cho đến khi nào bạn cần dừng lại (1,2,3,4… là số bài viết mới nhất hiển thị cho nhãn).

Bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn và Tên nhãn1 bằng tên của nhãn cần áp dụng, rồi nhấn SAVE để lưu tiện ích.

Bước 2. Vào Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa BlogList1 (nhấn Ctrl +F) tìm đến đoạn code tương tự như sau.

<b:widget id='BlogList1' locked='false' title='Tên nhãn 1' type='BlogList'>
<b:includable id='main'>

…. Phần nằm giữa này là code trọng tâm của tiện ích …

</b:includable>
</b:widget>

Ở đây bạn cần chú ý thẻ <b:includable id='main'> và thẻ </b:includable> chứa code trọng tâm của tiện ích, nói chung đoạn code nằm giữa 2 thẻ này rất dài. Việc bạn cần làm tiếp theo là thay đoạn code nằm giữa 2 thẻ đó bằng đoạn code dưới đây.

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<!-- Recent Posts Widget without Javascript Styled by Huynh Nhat Ha -->
<div class='recentposts-ha-main' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li>
<div class='RPcontent'>
<!-- ảnh đại diện float về bên trái -->
<div class='RPthumbnail'>
<b:if cond='data:item.itemThumbnail'>
<!-- nếu bài viết có hình ảnh thì dùng -->
<img class='RPifthumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- nếu bài viết không có hình ảnh thì dùng ảnh riêng -->
<!-- ở đây ta đặt URL ảnh đại diện riêng -->
<img class='RPnothumb' src='http://bit.ly/hGWr7r'/>
</b:if>
</div>
<!-- tiêu đề bài viết -->
<div class='RPtitle'>
<a expr:href='data:item.itemUrl' expr:title='data:item.itemSnippet' target='_blank'><data:item.itemTitle/></a>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
<!-- End the widget styles -->
</div>

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

.recentposts-ha ul{list-style-type:none;margin:0;padding:0}
.recentposts-ha ul li{background-color:transparent;clear:both;list-style:none}
.recentposts-ha ul li:hover{background-color:#e2fcef}
.recentposts-ha .RPcontent{padding:5px}
.recentposts-ha .RPtitle{height:30px}
.recentposts-ha .RPtitle a{color:#069;font-family:Arial;font-size:12px;font-weight:bold}
.recentposts-ha .RPtitle a:hover{color:#AC0101;text-decoration:none}
.recentposts-ha .RPthumbnail{float:left;margin:0 5px 0 0}
.recentposts-ha img{height:50px;width:50px}

Lưu Template là OK.

Cứ như vậy bạn có thể áp dụng cho nhiều nhãn và bạn sẽ sử dụng BlogList2, BlogList3, BlogList4, BlogList5…

Lưu ý nếu bạn áp dụng thủ thuật này tại những vùng có chiều rộng khá lớn (ví dụ phần Main) thì có thể bố trí các bài viết thành 2 cột, bạn chỉ cần thêm code CSS như thế này:

.recentposts-ha ul li {float: left;margin-right: 10px;width: 48%}
More about

VÔ HIỆU HOÁ CONTROL PANEL TRONG WIN 7

Người đăng: buonkhongem

Nếu bạn đang sử dụng máy vi tính với nhiều người và không muốn họ thay đổi các thiết lập trong Control Panel, bạn có thể vô hiệu hoá nó bằng thủ thuật nhỏ dưới đây.





Đầu tiên, bạn gõ vào Start menu của Windows 7 dòng lệnh REGEDIT rồi nhấn Enter.(hoặc gõ vào hộp Run)


Trong cửa sổ Registry Editor, bạn tìm đến đường dẫn HKEY_CURRENT_USER\Software\Microsoft\Windows\Current Version\Policies\Explorer.




Sau đó nhấp chuột phải vào khung bên tay phải và tạo một khoá DWORD (32bit) Value mới có tên là NoControlPanel.


Khi khoá NoControlPanel mới xuất hiện, bạn nhấp phải chuột vào nó và chọn Modify.


Ở cửa sổ hiện ra, bạn hãy thay giá trị dưới trường Value data thành số 1 và nhấn OK để xác nhận.


Cuối cùng, bạn khởi động lại máy sẽ thấy thẻ Control Panel đã bị biến mất.


Để cho Control Panel xuất hiện trở lại, bạn cần làm theo các bước trên và xoá khoá NoControlPanel là xong.
More about

FLASH ĐẸP CHO BLOG (Phần 3)

Người đăng: buonkhongem on Thứ Bảy, 25 tháng 6, 2011

Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần copy và thêm tiện ích HTML/Javacrip rồi dán vào nơi mà bạn muốn. (Bạn có thể thay đổi kích thước ở mục height: chiều cao và width: chiều rộng để cho thích hợp với blog của mình).
Vì files flash nhiều sẽ làm cho Blog load chậm, do đó mỗi bài tôi chỉ giới thiệu 10 files (chia thành nhiều bài), mong các bạn thông cảm.

Mẫu 1:





Mẫu 2:







Mẫu 3:






Mẫu 4:






Mẫu 5:





Mẫu 6:






Mẫu 7:






Mẫu 8:





Mẫu 9:





Mẫu 10:






More about

FLASH ĐẸP CHO BLOG (Phần 4)

Người đăng: buonkhongem

Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần copy và thêm tiện ích HTML/Javacrip rồi dán vào nơi mà bạn muốn. (Bạn có thể thay đổi kích thước ở mục height: chiều cao và width: chiều rộng để cho thích hợp với blog của mình).
Vì files flash nhiều sẽ làm cho Blog load chậm, do đó mỗi bài tôi chỉ giới thiệu 10 files (chia thành nhiều bài), mong các bạn thông cảm.

Mẫu 1:





Mẫu 2:







Mẫu 3:






Mẫu 4:






Mẫu 5:





Mẫu 6:






Mẫu 7:






Mẫu 8:





Mẫu 9:





Mẫu 10:






More about

FLASH ĐẸP CHO BLOG (Phần 5)

Người đăng: buonkhongem

Dưới đây là một số files flash đẹp để bạn có thể trang trí cho Blog mình thêm đẹp, ứng với mỗi files flash là mã code phía dưới, bạn chỉ cần copy và thêm tiện ích HTML/Javacrip rồi dán vào nơi mà bạn muốn. (Bạn có thể thay đổi kích thước ở mục height: chiều cao và width: chiều rộng để cho thích hợp với blog của mình).
Vì files flash nhiều sẽ làm cho Blog load chậm, do đó mỗi bài tôi chỉ giới thiệu 10 files (chia thành nhiều bài), mong các bạn thông cảm.

Mẫu 1:





Mẫu 2:







Mẫu 3:






Mẫu 4:






Mẫu 5:





Mẫu 6:






Mẫu 7:






Mẫu 8:





Mẫu 9:





Mẫu 10:






More about

MIỄN NHIỄM VIRUS AUTORUN CHO USB

Người đăng: buonkhongem on Thứ Sáu, 24 tháng 6, 2011

Với dung lượng nhỏ gọn (3.3MB), tiện ích USB IMMUNIZER của BitDefender sẽ giúp cho USB hoặc thẻ nhớ của bạn có khả năng chống chọi và không bị lây nhiễm virus Autorun tại các nơi công cộng.
 
Bạn tải tiện ích TẠI ĐÂY, khi tải về bạn kích hoạt file BDUSBimmunizer.exe để khởi động (không cần cài đặt). Tiếp theo, bạn cắm USB hoặc thẻ nhớ mà mình cần bảo vệ vào máy tính và chọn đường dẫn đến USB hoặc thẻ nhớ đó trong khung màu trắng. Sau đó, bạn chỉ việc nhấn vào nút Immunize kế bên để tiện ích thiết lập khả năng chống virus autorun cho USB, bạn chờ khoảng ít giây để hoàn tất, bạn nhấn Ok.


Bây giờ USB của bạn sẽ chống được các loại virus sau: Trojan, Autorun.inf, Conficker worm (Win32.worm.Downadup), Worm.Autorun. VHD....
Ngoài ra, nếu bạn muốn các phân vùng ổ đĩa của máy vi tính chống lại virus autorun, bạn chỉ việc nhấn ON để kích hoạt tại mục Immunize computer.
More about

Recent comments với ảnh đại diện

Người đăng: buonkhongem on Thứ Năm, 23 tháng 6, 2011

Như đã thông báo, hôm nay mình sẽ giới thiệu cho các bạn 1 thủ thuật hoàn toàn mới. Đó là thủ thuật hiển thị các nhận xét mới nhất cho blog (hoặc 1 bài viết nào đó), điểm nổi bật ở thủ thuật lần này là sẽ hiển thị ảnh profile của người comment (đối với tài khoản blogger), và sẽ hiện thị avatar đại diện cho những người thuộc nhóm khác như : wordpress, AOL, ... Ngoài ra đối với những bạn comment với tài khoản blogger mà chưa add hình đại diện thì cũng sẽ hiển thị chung 1 ảnh đại diện.


Thủ thuật này đã được thay thế bằng thủ thuật mới 
--> xem ở đây
Trước kia mình cũng tường giới thiệu việc tạo ảnh đại diện cho các comment của các bài viết. Và sau này khi blogger đã include ảnh đại diện vào phần comment của bài viết thì thủ thuật đó đã không còn cần thiết nữa. Và lần này cũng vậy, khi mà blogger chưa include ảnh đại diện vào feed của comment thì mình giới thiệu cho các bạn thủ thuật này. Nếu sau này blogger có include thêm ảnh đại diện vào phần comment thì có lẽ thủ thuật này sẽ không còn cần thiết, bởi vì chắc chắn việc lấy ảnh profile theo thủ thuật này sẽ chậm hơn nhiều so với lấy ảnh trực tiếp từ feed.

Ý tưởng thủ thuật này mình cũng đã nghĩ tới từ lâu, nhưng lúc đó chưa biết cách làm như thế nào, gần đây mình có đọc comment của 1 bạn trên blog mình nói là hiện tại chưa có ai viết thủ thuật tạo ảnh đại diện cho tiện ích các nhận xét mới nhất (recent comments) và hy vọng mình có thể giới thiệu thủ thuật này cho mọi người. Và điều này thôi thúc mình suy nghĩ cách để lấy ảnh profile của blogger. Thông tin duy nhất trong feed comment để có thể lấy ảnh profile của blogger là chỉ có link profile của tác giả. Và mình đã cố suy nghĩ làm sao để lấy ảnh từ link profile này, sau 1 khoảng thời gian dài mò mẫm, test đi test lại thì mình đã thực hiện được điều mình muốn. Nói thật nếu như rành 1 chút về javascript và php thì có lẽ mình đã không tốn nhiều thời gian để thực hiện thủ thuật này.

Và đây là demo của thủ thuật:
- DEMO 1 : xem comment mới nhất của cả blog.
- DEMO 2 : xem comment mới nhất của 1 bài viết.

Hình ảnh minh họa 
và 1 số ảnh avatar đại diện cho các nhóm comment.


Thủ thuật này do phải lấy ảnh profile của blogger nên sẽ load lâu hơn thủ thuật cũ (không có ảnh đại diện), vì thế mình có lời khuyên nho nhỏ cho các bạn sử dụng thủ thuật này là nên để nó load sau cùng. Làm vậy ta sẽ có cảm giác blog không bị chậm. Để nó load nhanh hơn thì gần như là không khả thi, còn việc muốn nó hiển thị khi blog được load xong hết (tức là vị trí đặt tùy ý, không cần đặt ở cuối trang) thì mình hiện thời chưa test được. Khi nào test được mình sẽ update thủ thuật sau.

Và đây là code của thủ thuật :
- các bạn tạo 1 widget HTML/javascript rồi dán code bên dưới vào :
<style type="text/css">
#rcommentfd {width:300px;}
img.rcav-photo {
float:left;
margin-right:7px;
border:solid #ddd 1px;
padding:1px;
height:50px;
width:50px;
}
td div.rcav-content {font-size:12px!important;}
div.rcav-content .rcav-author {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOH337m8YKjnwQGjLOsmrq2w6k_olyZPFGna4ZC0DcVJLycXWXrixANKN3Q2CSPqBT_yoNZV0LDTBCz4uhJDAQvSIjg0_FE7UiVTL3M3oG9yx-ge8rT-8591oDifxSCd4FQa27RtzOj8Tf/) no-repeat bottom left;padding-bottom:11px;}
div.rcav-content .rcav-sum {background:#efefef;padding:5px;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
</style>

<script type="text/javascript">
ava_mode = "single";
var cm_num = 5;
var cm_desc = 30;
var homepage = "http://www.fandung.com";
postID = "6268184133967397100";

var cm_ava = new Array();
cm_ava['openid'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG1KfWD5Kl6iYs0iZI9WcVJY4y_6qGTlz2KrDtLUbZSQNKgLAHnYPzd4v-Ks9Bhh0EX0G9Xk3H9cjRG19sU2uaVrhujaUFUr6T7Faf3FVuYaV1dlftF0Hd9TPrtLQbNjygp-r74c2-37GR/";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhia3AedA4eRE5MBobnlf8ttnulSxkhCe-iBCXpm-c-vN9cwnRbKMjc6WX-wZIvkaOD2gdIDmmV-CzRTOFoTzs-_BUXJrZCqMYdZy61CXByZ71tBzcCVpNPdDOsSTaSwHGcUJDJTFAuZkX9/";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii0avptXH8Hbpmlmkn9Pj819YBcS8874CXV5Ovn9k2CTfly_8GPKqr1Dti-yRlSb7UyD-O8ystUWJDJIVZKbp_e0cl_JeBpLjIdyCA_PPD_0GFJ23b__I7pt-XVZk54WEmUP4zcXYBecxK/";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDEY5Aa-vgWjcGYfnKnrPY_X6wMsz2twhibgT2wDQeTEabZ1jJELe4jrVD5lWE7YGhNEF0h4DWGZxnTPP3K_fYa9mhXKI-99WNmZUQF4k9spBftRyl_Ryk4DWObrdR_bnQNILBTwChU1sr/";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6cfu6f-nKSfgwnPp_90LG1WsmQWW30-AQh2t0zH1yEyaqf0i6TkH2zWbNgzYWsKAJz_rxkMjZQXnsNWHeh1cVib8gspMn9X-w6Sco7wyWzinVFUB4racEwEbiNbTk7E-43KnvVIdLbxIC/";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0w3z9SRWLQkhJD8LorTgLApR5gSEGjp158kcCEckZgEZz0AZub6iwIrRVN6exMBDNv4np5pvmdygNh0fTp46tVAdURCknNpIHwzpF8GxWnbLiWKyi1KIrXbWeGISUiQaSJv5ZOdmO_pPA/";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIE4Uz6yznCVSyhOROpJNWcp8yZhtbsGNN47j4pUKeNZHfzizymACRFASaz5SBZjaUt5yqFGstwkya8QNg_u3gLF4QGKlJFdfqY-JMzdsRsGcsePr0XOxBuYPmxeqYFhwky3sRDNGd1h8F/";

</script>
<script src="http://data.fandung.com/blog/demo/rcomment-avatar/recent-comment-avatar.js" type="text/javascript"></script>


Sau đây là 1 vài lưu ý:
- thủ thuật có 2 chế độ hiển thị, ở code mẫu ở trên là chế độ hiển thị comment cho 1 bài viết, lưu ý là phải thay đổi lại dòng code postID = "6268184133967397100"; cho đúng với số ID của bài viết mà bạn muốn hiển thị comment (có thể xem ở đây để lấy số ID của bài viết). Nếu muốn hiển thị comment cho cả blog thì các bạn thay đổi dòng code này ava_mode = "single"; thành ava_mode = "all";
- biến var cm_desc = 30; : là số chữ hiển thị (lưu ý là chữ chứ không phải ký tự).
- biến var cm_num = 5; : là số comment sẽ hiển thị.

Chúc các bạn thành công.
More about