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

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 →

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

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:

<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/3c15bd5f.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 2:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/d77ff838.swf" type="application/x-shockwave-flash" ><br /> </embed><br />


Mẫu 3:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/78c8ce44.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 4:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/83b3b66a.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 5:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/deb6eeaf.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 6:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/194d3115.swf" type="application/x-shockwave-flash" ><br /> </embed>

Mẫu 7:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/55ba3c15.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 8:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/3145c11b.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 9:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/e22ff30b.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 10:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/7a6e8c8f.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Xem tiếp phần 2

More about →

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

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

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/AVvXsEia4C7d1iQnepeIXxMHIjpuu2xFAgahokzH90QyYqDRX6FTVUmiCWqzcePVFph8bAPlC0Zx4CkyxBIFxlWvULS6RJd3-8eyOcs4m4TZMMF6iuy9J329n0wRkcU12jQwgmE_-rrju9sHD1U/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/AVvXsEhuaBG1phvLnxOm8O1JQqwpHGZNaH3KN7Oc5LHjzaBGUgTJUNpAusxZAZVVqqRAKj47OQYKK3KCGCa9rEJa8bDzalC7TmIKIhVSKXMGuil-znVrvOPVqY3Ol8DYxEv-Dm0Ojr_uPsiSgmI/s0/LWicoleft.png) no-repeat 20% 50%;}
#lightwindow_next:hover, #lightwindow_next:active {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4Ey_EMM6Rfd_0LP2oERJqxFL8vaQ2aBjAcYMJs1DYOiRh6ngmbslUuAPU9nJFql-a8VE5a3_9n4EX5-vCcnNLQDcIlniLgJk3KcIUKeoms5vl-6124fxkb_clAggD4HAI8vDnpPvkhw/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/AVvXsEgqL1TB3yrKAvJ8vSlkTE5FH2rTD2xncehtPiXGn7KJgiFdFK4l7bzsZ-liYmziv8Iuh4o8JVM90R7xHo0PxfmtUYCLJCq8n9myXd9TA66fOn8G2ICYzka-EYbjQTRinTZG1_6Ag0OqslU/s0/magplus.gif), pointer !important;}
a.lightwindow img {cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqL1TB3yrKAvJ8vSlkTE5FH2rTD2xncehtPiXGn7KJgiFdFK4l7bzsZ-liYmziv8Iuh4o8JVM90R7xHo0PxfmtUYCLJCq8n9myXd9TA66fOn8G2ICYzka-EYbjQTRinTZG1_6Ag0OqslU/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)

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:

<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/d13e7b60.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 2:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/f2b8312f.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 3:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/yuan1028/b47fb3d0.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 4:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://i138.photobucket.com/albums/q256/yingpatrick/25913292563297226223222948.swf " type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 5:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://blog.roodo.com/powei0202/54c8de37.swf" type="application/x-shockwave-flash" ><br /> </embed><br />


Mẫu 6:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img220.imageshack.us/img220/7518/29213046dx5.swf" type="application/x-shockwave-flash" ><br /> </embed>

Mẫu 7:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img220.imageshack.us/img220/7290/24342720gn5.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 8:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img227.imageshack.us/img227/7649/crossa921wz3.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 9:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img103.imageshack.us/img103/1518/movie6261sf0.swf " type="application/x-shockwave-flash" ><br /> </embed>

Mẫu 10:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img296.imageshack.us/img296/4412/91800675mt6.swf" type="application/x-shockwave-flash" ><br /> </embed>

Xem lại phần 1  Xem tiếp phần 3

More about →

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

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 →

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

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:

<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img88.imageshack.us/img88/6885/writingnv6.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 2:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img234.imageshack.us/img234/5846/601vt7.swf" type="application/x-shockwave-flash" ><br /> </embed><br />


Mẫu 3:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img234.imageshack.us/img234/6286/731zz7.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 4:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img234.imageshack.us/img234/8185/711sd4.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 5:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img234.imageshack.us/img234/7544/701kk1.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 6:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img262.imageshack.us/img262/6224/27243805na9.swf" type="application/x-shockwave-flash" ><br /> </embed>

Mẫu 7:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img185.imageshack.us/img185/2822/vuswlwl91ll2.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 8:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img47.imageshack.us/img47/4770/k401ha3.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 9:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img205.imageshack.us/img205/8576/crossa791rd6.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 10:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://img368.imageshack.us/img368/5227/letter4101ab9.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Xem lại phần 2  Xem tiếp phần 4

More about →

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

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:

<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T281.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 2:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T289.swf" type="application/x-shockwave-flash" ><br /> </embed><br />


Mẫu 3:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T266.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 4:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T271.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 5:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T287.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 6:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T322.swf" type="application/x-shockwave-flash" ><br /> </embed>

Mẫu 7:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T234.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 8:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T233.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 9:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T139.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 10:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T223.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Xem lại phần 3  Xem tiếp phần 5

More about →

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

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:

<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T225.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 2:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T362.swf" type="application/x-shockwave-flash" ><br /> </embed><br />


Mẫu 3:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T268.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 4:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T228.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 5:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T227.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 6:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T262.swf" type="application/x-shockwave-flash" ><br /> </embed>

Mẫu 7:




<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T253.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 8:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T270.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 9:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T278.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Mẫu 10:



<embed bgcolor="#FFFFFF" height="300" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://godud0909.com.ne.kr/swf/T274.swf" type="application/x-shockwave-flash" ><br /> </embed><br />

Xem lại phần 4  Xem tiếp phần 6

More about →

TẠO MENU NGANG CÓ MENU CON XỔ DỌC XUỐNG MỘT CẤP (KIỂU 1)

Trước đây, tôi có chia sẻ cho các bạn cách làm menu ngang có menu con xổ dọc xuống nhiều cấp, nay tôi xin chia sẻ tiếp cho các bạn menu ngang có menu con xổ dọc xuống một cấp.

Đầ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 cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào ô lệnh ]]></b:skin>

Và dán đoạn code dưới đây vào trên nó

#jsddm {<br /> margin: 0;<br /> padding: 15px;<br /> z-index:1000000000;<br /> position:relative;<br /> }<br /> <br /> #jsddm li {<br /> float: left;<br /> list-style: none;<br /> font: 12px Tahoma, Arial;<br /> }<br /> <br /> #jsddm li a {<br /> display: block;<br /> white-space: nowrap;<br /> margin:1px 3px;<br /> border: 1px solid #AAAAAA;<br /> background: #cccccc;<br /> background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));<br /> background: -moz-linear-gradient(top, #ebebeb, #cccccc);<br /> padding: 5px 10px;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> text-shadow: #ffffff 0 1px 0;<br /> color: #363636;<br /> font-size: 15px;<br /> font-family: Helvetica, Arial, Sans-Serif;<br /> text-decoration: none;<br /> vertical-align: middle;<br /> }<br /> <br /> #jsddm li a:hover {<br /> background: #C8C8C8;<br /> }<br /> <br /> #jsddm li ul {<br /> margin: 0;<br /> padding: 0;<br /> position: absolute;<br /> visibility: hidden;<br /> border-top: 1px solid white;<br /> }<br /> <br /> #jsddm li ul li {<br /> float: none;<br /> display: inline;<br /> }<br /> <br /> #jsddm li ul li a {<br /> width: auto;<br /> background: #CAE8FA;<br /> }<br /> <br /> #jsddm li ul li a:hover {<br /> background: #A3CEE5;<br /> }<br />

Cũng tương tự như trên, bạn gõ vào ô tìm kiếm lệnh </head> và dán đoạn code dưới đây trước </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close; //]]> </script><br />

Bước kế tiếp cũng làm tương tự như hai cách trên, bạn dán đoạn code dưới đây vào trước lệnh </header>

(hoặc thêm tiện ích HTML/javacript rồi dán nó vào)

<ul id="jsddm">

  <li><a href="#">Home</a>

  <li><a href="#">Menu 1</a>

  <ul>

  <li><a href="#"> tên menu</a></li>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  </ul>

  </li>

 <li><a href="#"> tên menu </a>

  <ul>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  </ul>

  </li>

 <li><a href="#">Menu 3</a>

  <ul>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  <li><a href="#"> tên menu </a></li>

  </ul>

  </li>

 <li><a href="#">Menu 4</a></li>

  <li><a href="#">Menu 5</a></li>

    </li></ul>

Bây giờ, bạn thay đổi các code màu đỏ và màu xanh cho phù hợp với blog bạn (màu xanh là URL của trang, màu đỏ là tên hiển thị)

Cuối cùng bấm Lưu mẫu và trở vào Blog xem kết quả

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

More about →

GẮN ICON TRƯỚC TIÊU ĐỀ BÀI VIẾT

Mặc định Blogger không cho chúng ta chèn các icon trước tiêu đề bài viết, để làm đươc điều này, các bạn cần làm một thủ thuật nhỏ sau đây:

Đầu tiên, bạn đăng nhập blog > Chọn Thiết kế > Chọn chỉnh sửa HTML và đánh dấu chọn Mở rộng mẫu tiện ích.

Kiếm đoạn code sau: 

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

Tiếp tục, bạn dán đoạn code này 

<img src="Link ảnh" style="border-width: 0px;" />

Vào chính giữa 2 lệnh

<a expr:href='data:post.url'> Code nằm ở đây <data:post.title/>.

Bạn thay link ảnh của mình vào code màu đỏ với kích cỡ khoảng 20x20 trở xuống

Bây giờ bạn lưu lại và trở lại blog xem kết quả

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

More about →

TẠO BANNER TRỰC TUYẾN

Trên các trang Web người ta hay đặt các Banner rất "bắt mắt" và "sinh động" để quảng cáo cho một sản phẩm hoặc một trang Web bất kỳ nào đó. Để làm được các banner này, bạn phải có các phần mềm để làm Banner, rồi sau khi đã hoàn thành, bạn phải up nó lên host riêng của mình, rồi tìm code để add link đó vào và dán lên Web/Blog...Thật là "nhiêu kê" phải không bạn?

Tôi xin chia sẻ với các bạn một trang Web trực tuyến để tạo Banner cực kỳ đơn giản dưới đây:

Đầu tiên, bạn truy cập VÀO ĐÂY để đăng ký cho mình một tài khoản miễn phí. Sau khi đăng ký xong, bạn nhấn vào nút Make a banner để bắt đầu.

Trang đầu tiên hiện ra, tại đây bạn bắt đầu chọn kích thước Banner mà bạn muốn bằng cách nhấp trái chuột để chọn, sau đó bấm nút Next ở phía dưới cuối trang để sang bước 2.

Ở trang 2 này là nơi để bạn làm việc, thanh trên cùng là các công cụ sử dụng để tạo các Object cho Banner bao gồm: Thêm hình ảnh, Thêm chữ, Thêm clipart, Thêm nút bấm...Bạn có thể xem trước banner mình đang tạo với các nút nhấn kế bên có hình mũi tên tam giác màu xanh  hoặc xem banner ở mọi kích thước phóng to thu nhỏ với nút có hình kính lúp...

Khi bạn add một Object nào đó vào khung banner thì bên tay phải sẽ là nơi để bạn hiệu chỉnh các hiệu ứng cho Object. Thí dụ bạn tạo Text vào khung thì bên tay phải sẽ có các hiệu ứng chữ: khi xuất hiện, khi kết thúc, bạn chọn hiệu ứng bằng cách bấm vào Choose effect và chọn cho mình một hiệu ứng vừa ý...Với các hình ảnh, clipart, nút bấm bạn cũng làm tương tự.

Ở thanh phía dưới cùng là nơi hiện thị các slide show (nếu bạn làm banner có 2 cảnh trở lên), các bước làm một banner mới cũng tương tự như trên.

Khi hoàn thành xong tác phẩm, bạn nhấn nút Play phía trên để xem lại, khi vừa ý bạn nhấn nút Publish ở phía dưới trang một bảng nhỏ hiện ra bạn đặt tên cho banner (để tiện cho việc sửa đổi sau này) và dán địa chỉ mà bạn muốn liên kết đến khi nhấn vào banner ở ô Banner URL, cuối cùng nhấn Publish.

Một trang mới xuất hiện, tại đây nếu muốn lấy code dán vào Blog thì bạn nhấn nút màu xanh phía dưới (Nhúng vào Web/Blog), nếu muốn download về thì bạn nhấn nút màu vàng (download Gif)

Để dán vào blog, bạn đăng nhập Blog > chọn Thiết kế > chọn thêm tiện ích > thêm HTML/Javacript rồi dán code lúc nãy vào và bấm Lưu lại là xong.

Bây giờ bạn trở lại vào Blog của mình để thưởng thức thành quả.

Chúc các bạn có nhiều Banner đẹp và hữu ích cho Blog của mình

More about →

THAY ĐỔI MÀU NỀN MỖI KHI LOAD TRANG CHO BLOGGER

Mặc định Blogger chỉ có một màu nền riêng biệt, nếu bạn muốn màu nền sẽ tự đổi màu khi bạn load trang thì bạn chỉ cần làm theo cách đơn giản sau:

Bạn đăng nhập vào Blog, chọn Thiết kế > chọn thêm tiện ích >  thêm tiện ích HTML/Javacript và dán đoạn phía dưới vào và Lưu lại là xong.

<script type="text/javascript">
var bgcolorlist=new Array("#ccc", "#FFFFcc", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#000", "#0000ff")
document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
</script>

Bạn có thể thay đổi màu nền mình muốn bằng cách thay đổi các code màu đỏ. 

Chúc bạn vui

More about →