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/AVvXsEg1le1KrYtM3o6pC7KcyPz49OgH_VPtQ6e3FM3wGjl8F-s5i7J2BSamdsVJttudAATDzhCkFXKQRXaaHg_366iUhtVUr1KVKHt585YKmrGqAc3wjtZQ-Ri_o9X9vfawe3ADJH1zsrWRgny5/) 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/AVvXsEhL0QmHfgFwKKZN3XKWskNyuUhW7P7gsmUhCrH5RhntJt4dM2i7h2gGWnOnCapkQNR71PrzBYndgCftbHDR3G_C6xj7qlvNMavzx0rZz6mOM_zHrXVw2UwGttn-Lfr00K0GqaJFGHWfE7ZB/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!


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/AVvXsEhcWwftl_NSoUME16oQCqtW7_ABbwuZZBHRreNU7M_o77TAC5w7Dmrc_2KjF4hAk9yIqHLtE90BumPjkt_11W3sxFWo3olrzrzRN4hTkyytj1voT-PKjuAsAkIV01E-qxlARiEbjdX-UltN/"}}};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


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


Ứng dụng của thủ thuật Random Posts : Tạo widget bài viết ngẫu nhiên từ 1 nhãn nhất định 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: 
Ứng dụng của thủ thuật Random Posts : Tạo widget bài viết ngẫu nhiên từ 1 nhãn nhất định
Để 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!


 

Thế Giới Thủ thuật Copyright © 2010 LKart Theme is Designed by Lasantha, Free Blogger Templates