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á mượt, 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. Và mình cũng đã đọc qua 1 bài hướng dẫn chèn cái Kwick này vào blogspot luôn (nhưng giờ thì không nhớ blog nào nữa). Tính qua đó copy code về để chuẩn bị thủ thuật cho nhanh, nhưng ko nhớ, nên phải đi lang thang view source và xào nấu lại.

Xem DEMO

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='http://fandung.googlecode.com/svn/trunk/js/noct.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/AVvXsEglemYJKcTT-YbaIgX7WepXSb5t-imOnzH-uZ6EGiuv_x6xkxSKRQ1gHQREkDLMwdaZp8Hi_advL-b4dT9RAMWiYwkYhyphenhyphencZcwRB0fbRgg4OGCRCo-tTmObkBuWOcPQIoeEJxRnpbK7vm1Y-/) 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/AVvXsEi57ymgJ9Z7SNQtKqPJ18CUYc4HztzMrVTUJoFhZQoBHwYmDh8aQ_gDddSWSdrEpzkuzx9K0WQPM9yBEWUGEb-SJ5tZJnsfE8jSl5IQhE8_-tiqaib0VasPxim0F5mT15zuN0KY0zsmrIVv/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://namkna.blogsopot.com/";
kwlabel = "Film";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/jquery-rd-post-v2.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://namkna.blogspot.com/ và Film 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.
- Khuyên cáo : nên chọn 1 nhãn nào đó để hiển thị mà thôi, không nên lấy cả blog để hiển thị, do nếu feed càng nhiều bài viết thì tiện ích load càng chậm.
- Lưu ý: bạn nên Download File JS về Tại đây sau đó Upload lên host riêng tránh bị Die host

Chúc thành công!

Theo Fandung.