Kwick jQuey cho tiện ích Random posts

Tiện ích bài viết ngẫu nhiên (random posts) nói chung cũng là 1 trong những tiện ích ít người dùng. Hôm nay mình sẽ hướng dẫn 1 style mới của tiện ích này, Tiện ích được Fandung xây dựng khá công phu và đẹp mắt, đó là kết hợp hiệu ứng kwick từ jQuery cho tiện ích này

Hiệu ứng Kwick này cũng khá đẹp, trước kia mình nhớ là có thấy nó ở trong 1 template nào đó của joomla, sau này lại thấy cộng đồng blogspot Việt dùng. Hôm nay chia sẻ lại cho các bạn để các bạn có thêm sự lựa chọn cho giao diện đẹp mắt hơn !

Hình ảnh minh họa

Theo yêu cầu mình sẽ kết hợp hiệu ứng Kwick này vào tiện ích random posts. Và ở đây tiện ích sẽ giữ nguyên kích thước như bản gốc mà 1 số template đang dùng.

Bài này cũng đơn giản, các bạn chỉ cần tạo 1 tiện ích HTML/javascript và dán code bên dưới vào là được:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src='https://script-viettin24h.googlecode.com/svn/trunk/random-post.js' type='text/javascript'></script>
<style type="text/css">
.kwicks { position:relative;width: 960px; height: 320px;}

.kwicks li{width: 192px;height: 320px;display: block;overflow: hidden;padding: 0px; }
.kwicks li img {width:720px;height:320px;}

.fadeout {
border-right:1px solid #aaa;
display: block;
position: absolute;
right: 0;
width: 300px;
height: 320px;
z-index: 4;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzJoIpzHvgKE1r0Q6JRC1eJwNwoQCgtIsPpSCGk5cupjTv_mVO0WHkMZ92z7gsBfKOdwxSZMdWx5MeRU8NE3bj7E6p-NSKNGtnxb8G9e5zrIEFv9sBnuTfvIjcBP7Rdw45sLr3cGidGf2//) repeat-y scroll top right transparent; }

.cmkwick {position: absolute;right:10px;bottom:80px;font-weight:bold;font-size:60px;line-height: 1;opacity: 0.5;text-shadow: black 0px 0px 5px;cursor: pointer;color:#fff; }

#kwick_5 .fadeout { border-right:none }

.kwicks.horizontal li {margin-right: 0px; float: left; }
.kwicks.vertical li { margin-bottom: 5px; }
.kwicks .excerpt {
background: #fff;
color: #000;
opacity: 0.6;
filter:alpha(opacity=90);
position: absolute;
padding: 10px;
bottom: 0px;
display: block;
width: 100%; }

.excerpt strong {font-family: "Arial",Arial,Helvetica,san-serif;font-weight: normal;letter-spacing: 0.4px;height: 66px;line-height: 26px;font-size: 14px;display:block;text-transform:uppercase; }

.kwick_style {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute;}
#kwick_1 {left: 0px; width: 192px;}
#kwick_2 {width: 192px; left: 192px; }
#kwick_3 {width: 192px; left: 384px; }
#kwick_4 {width: 192px; left: 576px;}
#kwick_5 {right: 0px; width: 192px;}

#jquery-rd-posts-loading {background:#136eab;text-align:center;width:960px;}

</style>

<div id="jquery-rd-posts">
<div id="jquery-rd-posts-loading">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-3rxTHaExg9yOilbRk2zKWke5y5Vv9nm9DnPUcQnEyTHLYG0K5Ll8o9ZN3PhTrU3BGOqA2VrfoYJhfbT_c0IkRwhOqXXksIzeQ68oRjANZC9Cz6Qy4d9yMVv4Tp-PnLsvuX61OdhR0CB3/s550/loading.gif" />
</div>
</div>

- Save widget lại. sau đó vào code template, chèn đoạn code bên dưới vào trước thẻ đóng </body>

<script type="text/javascript">
home_page = "http://viettin24h.com/";
kwlabel = "Blogspot%20tips";
</script>https://script-viettin24h.googlecode.com/svn/trunk/randompost.js" type="text/javascript"></script>

- Mình chọn chèn vào vị trí cuối cùng để không tạo cảm giác blog load chậm.

- Các bạn thay http://viettin24h.com/ và Blogspot%20tips thành tên miền của blog bạn và tên nhãn mà bạn muốn hiển thị bài viết.

- Theo mình các bạn nên chọn 1 nhãn nhất định ! Nếu dùng cho cả bài viết load sẽ chậm
- Các bạn nên download file .JS về và upload lên host riêng để dùng ổn định hơn và tránh die
Chúc các bạn thành công!

More about →

Tạo bài viết ngẫu nhiên tuyệt đẹp cho Blogspot

Thủ thuật tạo bài viết ngẫu nhiên cho Blogger, tốc độ nhanh không làm chậm blog của bạn

Ảnh minh họa

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn:


#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts


<ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_snippet_length=150; var rdp_info='yes'; var rdp_comment='Nhận xét'; var rdp_disable='Tắt Nhận xét'; var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum}; </script> <script type='text/javaScript'> function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMwfMWt_vQm2vGQfd2XawNGiRaLZJ6BZBDRpYSEIPHXs5so2vAKDw__V3a1tNvH2iFtQ3Ysm2yuib6FnGm-ErThhdFHVDvVwT8CUGipA64U7XJHs4pZbSTz1e4BiqqkBqMsh7iqs9OAkk//"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')}; </script> </ul>

Thay 5 bằng số bài viết bạn muốn hiển thị, 150 là số ký tự của đoạn trích dẫn nội dung bài đăng. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

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

theo duyphamblog

More about →

Widget bài viết ngẫu nhiên dạng list từ 1 nhãn nhất định

Đây là một thủ thuật hòan tòan tương tự với thủ thuật tạo các bài viết ngẫu nhiên cho blog, chỉ khác là mở rộng riêng cho từng nhãn. Nếu blog bạn có một đề tài, chuyên mục nào đó nổi bật, bạn có thể tạo 1 widget random các bài viết từ nhãn (chuyên mục đó).

 Thủ thuật này được anh Fandung thực hiện sau đây mình sẽ giới thiệu lại cho các bạn. Mình đã làm thử và thành công rùi

Ví dụ như ở blog của mình, mình có thể tạo một widget hiển thị các bài viết ngẫu nhiên của nhãn "Thủ Thuật Blog", xem hình minh họa bên dưới:

Ảnh minh họa: 

Để thực hiện, bạn chỉ cần tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:

<div id="random-posts"></div>
<script type="text/javascript">

function getRandomPosts(json) {
var maxEntries = 10;
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
  indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
  maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
  var entry = json.feed.entry[indexPosts[i]];
  var li = document.createElement('li');
  var a = document.createElement('a');
  a.title = entry.title.$t;
  for (var j = 0; j < entry.link.length; ++j) {
      if (entry.link[j].rel == 'alternate') {
          a.href = entry.link[j].href;
          break;
      }
  }
  a.appendChild(document.createTextNode(entry.title.$t));
  li.appendChild(a);
  ul.appendChild(li);
}
container.appendChild(ul);
}

</script>
<script src="http://viettin24h.com/feeds/posts/summary/-/Blogspot-tips?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

- Chú ý :

+ var maxEntries = 10; : dòng này để thiết lập số bài viết sẽ hiển thị
+ viettin24h/ bằng URL địa chỉ blog của bạn. 

+ /feeds/posts/summary/-/Blogspot-tipps : thay code màu đỏ bằng nhãn bạn muốn hiển thị (lưu ý, các nhãn có kí tự khỏang trắng phải thay thế kí tự khỏang trắng bằng %20)

(ví dụ nếu là labe Blog Yahoo thì bạn phải đánh là  Blog%20Yahoo)

Bạn có thể xem cách khác tốt hoen TẠI ĐÂY 
Chúc thành công!

More about →

Bài viết ngẫu nhiên tốc độ cao cho Blogger kèm ảnh thumbnail

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về. Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết. Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần.

 Demo for Post

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Chỉnh sửa HTML

   4- Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

   5- Bấm Lưu Mẫu lại.

   6- Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMwfMWt_vQm2vGQfd2XawNGiRaLZJ6BZBDRpYSEIPHXs5so2vAKDw__V3a1tNvH2iFtQ3Ysm2yuib6FnGm-ErThhdFHVDvVwT8CUGipA64U7XJHs4pZbSTz1e4BiqqkBqMsh7iqs9OAkk//"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

Nếu muốn áp dụng cho một nhãn bạn thay:

/feeds/posts/default

Bằng:

/feeds/posts/default/-/Tên%20Nhãn 

%20 để thay cho ký tự trống nếu tên nhãn gồm 2 câu trở lên.
Nếu muốn cho tiêu đề bài viết thành chữ in đậm thì  Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#random-posts a{font-weight:bold}

Demo:

Chúc thành công!

More about →

Bài viết ngẫu nhiên có ảnh thmbnail cho blogspot

Trước kia mình cũng nhìn thấy style này bên mothuthuat nhưng sau khi ngừng hoạt động thủ thuật này cũng ít người biêt đến ! Trông khá đẹp mắt thích hợp với rất nhiều giao diện khác nhau : tin tức, shop,thời trang,diễn đàn...

Hôm nay Viettin24h chia sẻ lại đến các bạn thủ thuật hay này

Ảnh minh họa:

☼ Cách tiến hành:


1- Đăng nhập vào Blogger

2- Vào Phần tử trang (Bố Cục)

3- Chọn Thêm Tiện ích

4- Tạo 1 widet HTML/Javarscip và dán đoạn code sau vào: 

<style type="text/css">
* {margin:0;padding:0;}
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJtbpVRa5UNF3NSlFGuyXGPkiHhmlJ2U1TVcVFVsl-qWf1GgYIQR6-AlZUVeGFGlLHAKEe5Xyp402HEruT1H9zTX3byLkIsT3Rsp2MVNBZiYIuh901GElNxG4HdMDGU7yAkDx6KLw8BdN/h120/img-bg-rd1-namkna-blogspot-com.png) no-repeat top left; 
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
img#rd-thumb {
float:left;
width: 40px; 
height:40px; 
margin-right:5px; 
border:1px solid #ccc;
padding:2px;
}

img#rd-thumb0 {
float:left;
width: 80px; 
height:80px; 
margin-right:5px; 
border:1px solid #ccc;
padding:2px;
}

ul, li {list-style:none;}
#random-posts li {
height:50px !important;
padding:5px 3px 0 5px;

}
li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}
li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}
li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}
li#li-rd-chan {background:#f6f6f6;}

div#info h1 {font-size:20px;}
div#footer {padding-left:135px;}
</style>

<div id="random-posts"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih3bQ3cjTf8e1wIJc15DmlkkWorIqCMo-yY6mNSE1Ss0tXHJSf3XnUXz55bPr-VPvgxcIQmfXWGzSiK3c4igjUlhAaopf3OTKVpHiEW_ngr-9HH3vbO526_pCuIsM3R_KBR5aYIdP34Bj8/s1600/loading-related-namkna-blogspot-com.gif'/>
</div>
</div>

<script type="text/javascript">
var maxEntries = 7;
nocmtext = "No Comment";
cmtext = "Comments";
</script>
<script src="https://script-viettin24h.googlecode.com/svn/branches/rd-post-thumb.js" type="text/javascript"></script>
<script src="http://viettin24h.com/feeds/posts/default/-/Blogspot-tips?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Trong đó:
Thay Blogspot-tips thành tên nhãn bạn muốn hiển thị.
Thay http://viettin24h.com/ thành URL địa chỏ blog của bạn vào. Chúc các bạn thành công !

5- Bấm Lưu Mẫu (save template) lại.

Chúc thành công!

More about →

Bài viết ngẫu nhiên dạng thumbnail đẹp cho blogger

Ramdon posts là thủ thuật gọi ngẫu nhiên một số bài viết từ nguồn cấp feedburner của blog bạn. Hôm nay mình sẽ giới thiệu cho các bạn tiện ích bài viết ngẫu nhiên dạn hình ảnh thumbnail và hiệu ứng hover tên bài viết cùng với mô tả của bài viết (Random Posts with thumbnail effect) dành cho blogger.

» Cách thêm Random Posts với hình ảnh thumbnail cho blogspot!

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Bố cục (Layout)

3. Chọn Thêm tiện ích (add widget)

4. Tạo một widget HTML/Javascript và thêm đoạn mã bên dưới vào đó:

<style type="text/css">
#random-posts li{width:90px;height:90px;margin-right:12px;float:left;list-style:none;position:relative}
#random-posts li:last-child{margin-right:0}
#random-posts li img{width:90px;height:90px}
#random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#35BBCB;color:#fff;padding:5px;font-size:90%;transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,1,0,0) 0s;visibility:hidden;opacity:0}
#random-posts li:last-child .isinyako{right:0}
#random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible}
.isinyako span{font-size:90%;color:#B30B0B}
.isinyako p{font-size:90%;}
</style>
<span class="glap">
<ul id="random-posts">
<script type="text/javaScript">
var rdp_numposts = 6;
var rdp_snippet_length = 50;
var rdp_info = 'yes';
var rdp_comment = 'Nhận xét';
var rdp_disable = 'Tắt nhận xét';
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);

function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a};
</script>

<script type="text/javaScript">
function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"&#133;"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMwfMWt_vQm2vGQfd2XawNGiRaLZJ6BZBDRpYSEIPHXs5so2vAKDw__V3a1tNvH2iFtQ3Ysm2yuib6FnGm-ErThhdFHVDvVwT8CUGipA64U7XJHs4pZbSTz1e4BiqqkBqMsh7iqs9OAkk//"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h2>'+m+"</h2>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')};
</script>
</ul></span>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120);
//]]></script>

5. Lưu tiện ích lại:

» Tùy chỉnh:
width:90px; là chiều rộng của ảnh thumbnail.
height:90px; là chiều cao của ảnh thumbnail.
top:-40px khoảng cách của khung hover tooltip so với lề trên của hình ảnh.
var rdp_numposts = 6; số ảnh thu nhỏ sẽ hiển thị trong tiện ích.
var rdp_snippet_length = 50; số ký tự mô tả

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

More about →